@charset "UTF-8";


.sp {
	display: none !important;
}

#menu-button {
	display: none;
}

#common-header {
	box-sizing: border-box;
	position: relative;
	width: 100%;
	height: 90px;
	left: 0;
	top: 0;
	z-index: 1000;
	background: #fff;
	border-bottom: 1px solid #e6e6e6;
}
#common-header .inner {
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: 17px 40px;
}

#common-header .logo {
	display: flex;
	align-items: center;
	width: 110px;
	height: 54px;
}

#common-header .menu {
	display: flex;
	align-items: center;
}
#common-header .menu ul {
	display: flex;
}
#common-header .menu ul ul {
	display: none;
}

#common-header .menu ul:nth-child(1) a {
	position: relative;
	display: inline-block;
}
#common-header .menu ul:nth-child(1) li {
	position: relative;
}
#common-header .menu ul:nth-child(1) li + li {
	margin-left: 30px;
}

#common-header .menu ul:nth-child(1) li strong {
	position: relative;
	display: block;
	font-size: 16px;
	font-weight: 400;
	font-family: "Josefin Sans", sans-serif;
}
#common-header .menu ul:nth-child(1) li em {
	display: block;
	margin: 3px 0 0;
	font-size: 11px;
	font-weight: 500;
	text-align: center;
}

#common-header .menu ul:nth-child(1) a::after {
	position: absolute;
	content: "";
	display: block;
	width: 40px;
	height: 2px;
	left: calc(50% - 20px);
	bottom: -12px;
	background: #dc1010;
}


#common-header .menu ul:nth-child(2) {
	margin-left: 40px;
}
#common-header .menu ul:nth-child(2) li + li {
	margin-left: 10px;
}
#common-header .menu ul:nth-child(2) li a {
	position: relative;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 150px;
	height: 40px;
	font-size: 14px;
	font-weight: 500;
	border: 1px solid #dc1010;
	border-radius: 20px;
	overflow: hidden;
	will-change: transform;
}
#common-header .menu .download a {
	color: #dc1010;
	background: #fff;
}
#common-header .menu .contact a {
	color: #fff;
	background: #dc1010;
}

#common-header .menu a em {
	position: relative;
	z-index: 5;
}


#common-header .menu ul:nth-child(2) li a::after {
	position: absolute;
	content: "";
	display: block;
	width: 102%;
	height: 100%;
	left: -1%;
	top: 0;
	z-index: 1;
	transform: scaleX(0);
	transform-origin: left center;
	transition: all 400ms ease;
}
#common-header .menu ul:nth-child(2) .download a::after {
	background: #dc1010;
}
#common-header .menu ul:nth-child(2) .contact a::after {
	background: #fff;
}

#common-header .menu ul:nth-child(2) li a:hover::after {
	transform: scaleX(1);
}
#common-header .menu ul:nth-child(2) .download a:hover {
	color: #fff;
}
#common-header .menu ul:nth-child(2) .contact a:hover {
	color: #dc1010;
}








@media screen and (max-width:1279px) {
	#common-header .inner {
		padding: 17px 20px;
	}
	
	#common-header .logo {
		width: 100px;
	}
	#common-header .menu ul:nth-child(1) li + li {
		margin-left: 20px;
	}
	#common-header .menu li.news {
		margin-left: 20px !important;
	}
	#common-header .menu li.news::before {
		left: -15px;
	}
	
	#common-header .menu ul:nth-child(2) {
		margin-left: 20px;
	}
	#common-header .menu ul:nth-child(2) li a {
		width: 120px;
		font-size: 12px;
	}
}

@media screen and (max-width:1079px) {
	#common-header .menu ul:nth-child(1) li {
		top: 2px;
	}
	#common-header .menu ul:nth-child(1) li strong {
		font-size: 14px;
	}
}



/*
#common-header .menu ul:nth-child(1) li strong::after {
	position: absolute;
	display: block;
	content: "";
	width: 100%;
	height: 1px;
	left: 0;
	bottom: 0;
	background: #000;
	transform-origin: left top;
	transform: scaleX(0);
	transition: all 300ms ease-out;
}
#common-header .menu ul:nth-child(1) li a:hover strong::after {
	transform: scaleX(1);
}
*/


body.business #common-header li.business a::after,
body.technology #common-header li.technology a::after,
body.company #common-header li.company a::after,
body.sustainability #common-header li.sustainability a::after,
body.recruit #common-header li.recruit a::after,
body.news #common-header li.news a::after
{
	transform: scaleX(1);
}



#common-header .menu ul:nth-child(1) a::after {
	transform: scaleX(0);
	transition: transform 300ms ease;
}
#common-header .menu ul:nth-child(1) a:hover::after {
	transform: scaleX(1);
}




body:not(.index) #common-header {
	position: absolute;
}
body:not(.index) #wrap {
	padding-top: 88px;
}

body.fix-menu #common-header {
	position: fixed;
	top: -90px;
	transition: transform 400ms ease-out;
}
body.fix-menu.show-menu #common-header {
	transform: translateY(90px);
}

body.fix-menu #menu-modal {
	position: fixed;
}





#menu-modal {
	box-sizing: border-box;
	position: absolute;
	width: 100%;
	height: 164px;
	left: 0;
	top: 100px;
	z-index: 1000;
	pointer-events: none;
}
#menu-modal .inner {
	position: absolute;
	box-sizing: border-box;
	width: 100%;
	height: 164px;
	left: 50%;
	top: 0;
	max-width: 1200px;
	padding: 0 40px;
	transform: translateX(-50%);
	pointer-events: none;
}
#menu-modal .container {
	box-sizing: border-box;
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	height: 164px;
	padding: 0 18px 0 55px;
	background: rgba(255,255,255,0.85);
	border-radius: 7px;
	box-shadow: 0 0 2px rgba(0,0,0,0.1);
	pointer-events: auto;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	
	box-shadow: 0 0 8px rgba(0,0,0,0.2);
}

#menu-modal .container dl {
	position: relative;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 338px;
	height: 104px;
	border-right: 1px solid #e6e6e6;
}
#menu-modal .container dt {
	position: absolute;
	left: 0;
	top: 25px;
	font-size: 35px;
	font-family: "Josefin Sans", sans-serif;
}
#menu-modal .container dd {
	position: absolute;
	left: 0;
	top: 65px;
	font-size: 15px;
	font-weight: 500;
}

#menu-modal .container .content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: calc(100% - 338px - 50px);
}

#menu-modal .container .links {
	display: flex;
	justify-content: space-between;
	height: 70px;
}
#menu-modal .container .links ul {
}
#menu-modal .container .links ul + ul {
	margin-left: 40px;
}
#menu-modal .container .links li::before {
	content: "- ";
}
#menu-modal .container .links li + li {
	margin-top: 10px;
}
#menu-modal .container .links a {
	position: relative;
	font-size: 14px;
	font-weight: 500;
}
#menu-modal .container .links a::after {
	position: absolute;
	display: block;
	content: "";
	width: 100%;
	height: 1px;
	left: 0;
	bottom: 0;
	background: #000;
	transform: scaleX(0);
	transform-origin: left bottom;
	transition: all 300ms ease-out;
}
#menu-modal .container .links a:hover::after {
	transform: scaleX(1);
}



#menu-modal .container .banner {
	width: 240px;
	height: 130px;
}
#menu-modal .container .banner a {
	box-sizing: border-box;
	display: flex;
	align-items: flex-start;
	width: 240px;
	height: 130px;
	padding: 10px;
	background: url(/img/banner_gx_mini.png?2) 50% 50% no-repeat;
	background-size: cover;
	border: 1px solid #c6c6c6;
	border-radius: 7px;
	transition: all 300ms ease-out;
}
#menu-modal .container .banner p {
	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
	color: #333;
}



@media screen and (max-width:1100px) {
	#menu-modal .container dl {
		width: 280px;
	}
	#menu-modal .container .content {
		width: calc(100% - 280px - 50px);
	}
}




#menu-modal .inner {
	opacity: 0;
	transform: translate(-50%, 20px);
	visibility: hidden;
	transition: all 400ms ease-out;
}
#menu-modal.once-shown .inner {
	transform: translate(-50%, 0px);
}


#menu-modal[data-mode="business"] .inner.business,
#menu-modal[data-mode="technology"] .inner.technology,
#menu-modal[data-mode="company"] .inner.company,
#menu-modal[data-mode="sustainability"] .inner.sustainability {
	opacity: 1;
	transform: translate(-50%, 0px);
	visibility: visible;
}



#menu-modal .container dt {
	width: 100%;
	height: 36px;
	overflow: hidden;
}
#menu-modal .container dd {
	width: 100%;
	height: 16px;
	overflow: hidden;
}

#menu-modal .container dt span,
#menu-modal .container dd span {
	position: absolute;
	display: block;
	left: 0;
	top: 0;
	white-space: nowrap;
}

#menu-modal .container dt span {
	transform: translateY(36px);
	transition: all 400ms ease-out;
}
#menu-modal .container dd span {
	transform: translateY(16px);
	transition: all 500ms ease-out;
}


#menu-modal[data-mode="business"] .inner.business dl span,
#menu-modal[data-mode="technology"] .inner.technology dl span,
#menu-modal[data-mode="company"] .inner.company dl span,
#menu-modal[data-mode="sustainability"] .inner.sustainability dl span {
	transform: translateY(0px);
}

#menu-modal.once-shown .inner dl span {
	transform: translateY(0px) !important;
}




/*
#menu-modal {
	transition: all 300ms ease-out;
}
body.scrolled #menu-modal {
	opacity: 0;
	visibility: hidden;
}
*/











#common-footer {
	position: relative;
	z-index: 10;
	padding: 90px 0 40px;
	color: #fff;
	background: #000;
}
#common-footer a {
	color: #fff;
}


#common-footer .inner {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 40px;
}

#common-footer .main {
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
}



#common-footer #return-top {
	position: absolute;
	width: 28px;
	right: 30px;
	top: 30px;
	overflow: hidden;
}
#common-footer #return-top a {
	box-sizing: border-box;
	display: block;
	width: 28px;
	height: 28px;
	font-size: 0;
	border: 1px solid #fff;
	border-radius: 14px;
}
#common-footer #return-top a::before {
	position: absolute;
	content: "";
	display: block;
	width: 14px;
	height: 12px;
	left: calc(50% - 7px);
	top: calc(50% - 6px);
	z-index: 1;
	background: url(../img/arrow_top.svg) 50% 50% no-repeat;
	background-size: 12px auto;
}
#common-footer #return-top a:hover::before {
	filter: invert(1);
}
#common-footer #return-top a::after {
	position: absolute;
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background: #fff;
	border-radius: 14px;
	transform: scale(0);
	transition: all 200ms ease;
}
#common-footer #return-top a:hover::after {
	transform: scale(1);
}




#common-footer .menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-left: 110px;
}
#common-footer .box {
	width: calc((100% - (70px * 2)) / 3);
	margin-left: 70px;
}
#common-footer .box:nth-child(3n + 1) {
	margin-left: 0;
}
#common-footer .box:nth-child(n + 4) {
	margin-top: 50px;
}

#common-footer .menu .parent strong {
	display: block;
	font-size: 18px;
	font-weight: 400;
	font-family: "Josefin Sans", sans-serif;
}
#common-footer .menu .parent span {
	display: block;
	margin: 3px 0 0;
	font-size: 11px;
	font-weight: 500;
}

#common-footer .menu .group + .group {
	margin-top: 40px;
}
#common-footer .menu .group .parent {
	font-size: 16px;
	font-weight: 500;
}




#common-footer .menu ul {
	position: relative;
	margin: 18px 0 0;
}
#common-footer .menu li {
	padding-left: 0.75em;
	text-indent: -0.75em;
}
#common-footer .menu li::before {
	display: inline-block;
	content: "-";
	width: 0.75em;
	text-indent: 0;
}
#common-footer .menu li + li {
	margin-top: 7px;
}
#common-footer .menu li a {
	font-size: 12px;
	font-weight: 500;
}

#common-footer .menu li a .popup {
	position: relative;
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-left: 3px;
	top: 2px;
	background: url(/img/icon_popup_white.svg) 0 0 no-repeat;
	background-size: 100% auto;
}




#common-footer .parent a:hover strong,
#common-footer .mailmagazine .parent a:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
}
#common-footer .menu li a:hover {
	text-decoration: underline;
}




#common-footer .extra {
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	width: 340px;
	padding: 20px 100px 20px 0;
	border-right: 1px solid #505050;
}

#common-footer .logo {
	display: flex;
	width: 240px;
	justify-content: center;
}
#common-footer .logo img {
	width: 188px;
}

#common-footer .extra .links {
	margin: 50px 0 0 ;
}

#common-footer .extra .links li + li {
	margin-top: 10px;
}
#common-footer .extra .links a {
	box-sizing: border-box;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 240px;
	height: 50px;
	font-size: 16px;
	font-weight: 500;
	border: 1px solid #dc1010;
	border-radius: 25px;
	overflow: hidden;
	will-change: transform;
}
#common-footer .extra .links .download a {
	color: #dc1010;
	background: #fff;
}
#common-footer .extra .links .contact a {
	color: #fff;
	background: #dc1010;
}

#common-footer .extra .links a em {
	position: relative;
	z-index: 10;
}



#common-footer .extra .download i {
	position: absolute;
	display: inline-block;
	width: 15px;
	height: 15px;
	right: 16px;
	top: calc(50% - 7px);
	z-index: 10;
	background: url(../img/icon_download.svg?2) 50% 50% no-repeat;
	background-size: 100% auto;
}
#common-footer .extra .contact i {
	position: absolute;
	display: inline-block;
	width: 6px;
	height: 12px;
	right: 20px;
	top: calc(50% - 6px);
	z-index: 10;
	background: url(../img/arrow_mini.svg) 50% 50% no-repeat;
	background-size: 100% auto;
	filter: brightness(0) invert(1);
}


#common-footer .extra .links a::after {
	position: absolute;
	content: "";
	display: block;
	width: 102%;
	height: 100%;
	left: -1%;
	top: 0;
	z-index: 1;
	transform: scaleX(0);
	transform-origin: left center;
	transition: all 400ms ease;
}
#common-footer .extra .links .download a::after {
	background: #dc1010;
}
#common-footer .extra .links .contact a::after {
	background: #fff;
}


#common-footer .extra .links a:hover::after {
	transform: scaleX(1);
}

#common-footer .extra .links .download a:hover {
	color: #fff;
}
#common-footer .extra .links .contact a:hover {
	color: #dc1010;
}


#common-footer .extra .download a:hover i {
	filter: brightness(0) invert(1);
}
#common-footer .extra .contact a:hover i {
	filter: brightness(1) invert(0);
}





#common-footer .sns {
	margin: 45px 0 0 ;
}
#common-footer .sns ul {
	display: flex;
	justify-content: center;
	width: 240px;
}
#common-footer .sns li + li {
	margin-left: 20px;
}
#common-footer .sns li {
	width: 38px;
}



#common-footer .sub {
	display: flex;
	justify-content: space-between;
	margin: 100px 0 0;
}
#common-footer .sub ul {
	display: flex;
}
#common-footer .sub li {
	position: relative;
}
#common-footer .sub li + li {
	margin-left: 28px;
}
#common-footer .sub li + li::before {
	position: absolute;
	display: block;
	content: "";
	width: 1px;
	height: 12px;
	left: -14px;
	top: calc(50% - 4px);
	background: rgba(255,255,255,0.5);
}
#common-footer .sub a {
	font-size: 12px;
}
#common-footer .sub a:hover {
	text-decoration: underline;
}


#common-footer .copyright {
	font-size: 11px;
}





a.button {
	position: relative;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 50px;
	color: #dc1010;
	font-weight: 500;
	border: 1px solid #dc1010;
	border-radius: 25px;
	background: #fff;
	overflow: hidden;
	will-change: transform;
}
a.button em {
	position: relative;
	z-index: 10;
}
a.button::after {
	position: absolute;
	content: "";
	display: block;
	width: 102%;
	height: 100%;
	left: -1%;
	top: 0;
	z-index: 1;
	background: #dc1010;
	transform: scaleX(0);
	transform-origin: left center;
	transition: all 400ms ease;
}
a.button:hover {
	color: #fff;
}
a.button:hover::after {
	transform: scaleX(1);
}


a.button .popup {
	position: absolute;
	display: inline-block;
	width: 15px;
	height: 15px;
	right: 20px;
	top: calc(50% - 7px);
	z-index: 10;
	background: url(../img/icon_popup.svg?2) 50% 50% no-repeat;
	background-size: 100% auto;
}
a.button:hover .popup {
	filter: brightness(0) invert(1);
}

a.button .arrow-mini {
	position: absolute;
	display: inline-block;
	width: 6px;
	height: 12px;
	right: 20px;
	top: calc(50% - 6px);
	z-index: 10;
	background: url(../img/arrow_mini.svg) 50% 50% no-repeat;
	background-size: 100% auto;
}
a.button:hover .arrow-mini {
	filter: brightness(0) invert(1);
}

a.button .download {
	position: absolute;
	display: inline-block;
	width: 15px;
	height: 15px;
	right: 20px;
	top: calc(50% - 7px);
	z-index: 10;
	background: url(../img/icon_download.svg?2) 50% 50% no-repeat;
	background-size: 100% auto;
}
a.button:hover .download {
	filter: brightness(0) invert(1);
}








a.button-bg {
	position: relative;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 50px;
	color: #fff;
	font-weight: 500;
	border-radius: 25px;
	background: #dc1010;
	overflow: hidden;
	will-change: transform;
}
a.button-bg em {
	position: relative;
	z-index: 10;
}
a.button-bg::after {
	position: absolute;
	content: "";
	display: block;
	width: 102%;
	height: 100%;
	left: -1%;
	top: 0;
	z-index: 1;
	background: #fff;
	transform: scaleX(0);
	transform-origin: left center;
	transition: all 400ms ease;
}

a.button-bg:hover {
	color: #dc1010;
}
a.button-bg:hover::after {
	transform: scaleX(1);
}
a.button-bg .arrow-mini {
	position: absolute;
	display: inline-block;
	width: 6px;
	height: 12px;
	right: 20px;
	top: calc(50% - 6px);
	z-index: 10;
	background: url(../img/arrow_mini.svg) 50% 50% no-repeat;
	background-size: 100% auto;
	filter: brightness(0) invert(1);
}
a.button-bg:hover .arrow-mini {
	filter: brightness(1) invert(0);
}




a.button-bg-white {
	position: relative;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 50px;
	color: #dc1010;
	font-weight: 500;
	border: 1px solid #fff;
	border-radius: 25px;
	background: #fff;
	overflow: hidden;
	will-change: transform;
}
a.button-bg-white em {
	position: relative;
	z-index: 10;
}
a.button-bg-white::after {
	position: absolute;
	content: "";
	display: block;
	width: 102%;
	height: 100%;
	left: -1%;
	top: 0;
	z-index: 1;
	background: #dc1010;
	transform: scaleX(0);
	transform-origin: left center;
	transition: all 400ms ease;
}
a.button-bg-white:hover {
	color: #fff;
}
a.button-bg-white:hover::after {
	transform: scaleX(1);
}
a.button-bg-white .arrow-mini {
	position: absolute;
	display: inline-block;
	width: 6px;
	height: 12px;
	right: 20px;
	top: calc(50% - 6px);
	z-index: 10;
	background: url(../img/arrow_mini.svg) 50% 50% no-repeat;
	background-size: 100% auto;
	filter: brightness(1) invert(0);
}
a.button-bg-white:hover .arrow-mini {
	filter: brightness(0) invert(1);
}










main {
	position: relative;
	z-index: 100;
}

/*
body.content {
	padding-top: 90px;
}
*/






#content-links {
	position: relative;
	padding: 90px 0;
	background: #fff;
}
#content-links .inner {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 40px;
}
#content-links ul {
	display: flex;
	justify-content: space-between;
}
#content-links li {
	width: calc((100% - (34px * 2)) / 3);
}
#content-links .thumb {
	overflow: hidden;
	border: 1px solid #e6e6e6;
	border-radius: 7px;
	will-change: transform;
}
#content-links dl {
	margin: 14px 0 0;
}
#content-links dt {
	font-size: 17px;
	font-weight: 500;
	line-height: 1.5;
}
#content-links dd {
	margin: 8px 0 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.7;
	color: #909090;
}

#content-links li a .thumb img {
	transition: all 300ms ease-out;
}
#content-links li a:hover .thumb img {
	transform: scale(1.05);
}









#topics-links {
	position: relative;
	padding: 90px 0;
	background: #fff;
	border-top: 1px solid #e6e6e6;
}
#topics-links .inner {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 40px;
}

#topics-links .title {
	margin: 0 0 40px;
	font-size: 30px;
	font-family: "Josefin Sans", sans-serif;
}

#topics-links ul {
	display: flex;
}
#topics-links li {
	width: calc((100% - (50px * 3)) / 4);
}
#topics-links li + li {
	margin-left: 50px;
}


#topics-links li a {
	display: block;
}
#topics-links .thumb {
	border: 1px solid #e6e6e6;
	border-radius: 7px;
	overflow: hidden;
	will-change: transform;
}
#topics-links .text {
	margin: 20px 0 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.7;

	overflow: hidden;
	
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

#topics-links li a .thumb img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: all 300ms ease-out;
}
#topics-links li a:hover .thumb img {
	transform: scale(1.05);
}






#library-links {
	position: relative;
	padding: 90px 0;
	background: #f4f4f4;
	border-top: 1px solid #e6e6e6;
}
#library-links .inner {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 40px;
}

#library-links .title {
	margin: 0 0 40px;
	font-size: 30px;
	font-family: "Josefin Sans", sans-serif;
}

#library-links ul {
	display: flex;
	justify-content: space-between;
}
#library-links li {
	width: calc((100% - (34px * 2)) / 3);
}
#library-links li a {
	display: block;
}
#library-links .thumb {
	position: relative;
	overflow: hidden;
	border: 1px solid #e6e6e6;
	border-radius: 7px;
	overflow: hidden;
	will-change: transform;
}
#library-links .text {
	margin: 20px 0 0;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.7;

	overflow: hidden;
	
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}
#library-links a .play {
	position: absolute;
	width: 50px;
	height: 50px;
	left: calc(50% - 25px);
	top: calc(50% - 25px);
	background: #dc1010 url(/img/icon_play.svg) 58% 50% no-repeat;
	background-size: 16px auto;
	border-radius: 25px;
}

#library-links nav {
	width: 420px;
	margin: 70px auto 0;
}


#library-links .thumb img {
	transition: all 300ms ease-out;
}
#library-links li a:hover .thumb img {
	transform: scale(1.05);
}









.other-site {
	position: relative;
	padding: 70px 0;
}
.other-site .inner {
	box-sizing: border-box;
	position: relative;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 40px;
}

#other-site1 {
	background: #f4f4f4;
}
#other-site2 {
	background: #fcfcfc;
	border-top: 1px solid #e6e6e6;
}


.other-site h2 {
	position: relative;
}
.other-site h2::before {
	position: absolute;
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	left: 0;
	top: 50%;
	background: #e6e6e6;
}
.other-site h2 strong {
	position: relative;
	display: inline-block;
	padding-right: 8px;
	font-size: 22px;
	font-family: "Josefin Sans", sans-serif;
	color: #dc1010;
}

#other-site1 h2 strong {
	background: #f4f4f4;
}
#other-site2 h2 strong {
	background: #fcfcfc;
}


.other-site .inner {
	display: flex;
	justify-content: space-between;
}
.other-site .inner ul {
	display: flex;
	justify-content: space-between;
	margin: 20px 0 0;
}


.other-site .thumb {
	overflow: hidden;
	border: 1px solid #e6e6e6;
	border-radius: 7px;
	will-change: transform;
}

.other-site dl {
	margin: 15px 0 0;
}
.other-site dt {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
}
.other-site dd {
	margin: 6px 0 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
	color: #909090;
}


#other-site1 .box {
	width: calc((100% - 40px) / 2);
}
#other-site1 li {
	width: calc((100% - 40px) / 2);
}


#other-site2 .box:nth-child(1) {
	width: calc((100% - (36px * 2)) / 3);
}
#other-site2 .box:nth-child(2) {
	width: calc((100% - (36px * 2)) / 3 * 2 + 36px);
}
#other-site2 .box:nth-child(2) li {
	width: calc((100% - 36px) / 2);
}

/*
.other-site li a .thumb,
.other-site li a dt {
	transition: all 300ms ease-out;
}
.other-site li a:hover .thumb {
	opacity: 0.7;
}
.other-site li a:hover dt {
	color: #999;
}
*/

.other-site li a .thumb img {
	transition: all 300ms ease-out;
}
.other-site li a:hover .thumb img {
	transform: scale(1.05);
}









.main-title {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 365px;
	text-align: center;
	/*
	border-bottom: 1px solid #e6e6e6;
	*/
}
.main-title h1 {
	font-size: 65px;
	font-family: "Josefin Sans", sans-serif;
}
.main-title .lead {
	margin: 10px 0 0;
	font-size: 20px;
	font-weight: 500;
}
.main-title .caption {
	margin: 40px 0 0;
}
.main-title .caption p {
	font-size: 15px;
	font-weight: 500;
	line-height: 1.9;
}




.compact-title {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	min-height: 125px;
	border-bottom: 1px solid #e6e6e6;
}
.compact-title .inner {
	box-sizing: border-box;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 40px;
}
.compact-title .inner h1 {
	font-size: 30px;
	font-weight: 500;
}
.compact-title .inner h1 em {
	position: relative;
	top: -1px;
	margin-left: 16px;
	font-size: 22px;
}




#path-info {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	min-height: 50px;
	padding: 0 40px;
	background: #fcfcfc;
	border-bottom: 1px solid #e6e6e6;
}
#path-info * {
	font-size: 14px;
	font-weight: 500;
}
#path-info * + *::before {
	content: "〉";
	margin-left: 10px;
	color: #909090;
}
#path-info span {
	color: #909090;
}
#path-info em {
	margin-left: 6px;
	font-size: 12px;
}




#third-layout {
	display: flex;
	justify-content: space-between;
}
#sidemenu {
	width: 350px;
	min-height: 500px;
	background: #f4f4f4;
}
#primary {
	width: calc(100% - 350px);
	min-height: 500px;
}

#primary .container {
	box-sizing: border-box;
	position: relative;
	width: 100%;
	max-width: 1010px;
	margin: 0 auto;
	padding: 70px 40px 100px;
}


#sidemenu li {
	border-bottom: 1px solid #e6e6e6;
}
#sidemenu li a {
	box-sizing: border-box;
	position: relative;
	display: flex;
	align-items: center;
	min-height: 70px;
	padding: 0 40px;
	font-size: 14px;
	font-weight: 500;
	transition: all 300ms ease-out;
}
#sidemenu li.child a {
	font-size: 13px;
}
#sidemenu li a::before {
	position: absolute;
	content: "";
	display: block;
	width: 6px;
	height: 12px;
	right: 32px;
	top: calc(50% - 6px);
	z-index: 10;
	background: url(../img/arrow_mini.svg) 50% 50% no-repeat;
	background-size: 100% auto;
	transition: all 150ms ease-out;
}
#sidemenu li a em {
	position: relative;
	z-index: 10;
	line-height: 1.6;
}
#sidemenu li a::after {
	position: absolute;
	display: block;
	content: "";
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 1;
	background: #fcfcfc;
	transform: scaleX(0);
	transform-origin: left center;
	transition: all 300ms ease-out;
}

#sidemenu li a:hover::after {
	transform: scale(1);
}



body.topmessage #sidemenu li.topmessage a::after,
body.history #sidemenu li.history a::after,
body.originalscore #sidemenu li.originalscore a::after
{
	transform: scale(1);
}



.simple-column {
	padding: 60px 0 80px;
}
.simple-column .inner {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 40px;
}

.simple-column h2 {
	margin: 0 0 -10px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
}

.simple-column * + h2 {
	margin-top: 60px;
}

.simple-column * + p,
.simple-column * + dl,
.simple-column * + ul {
	margin-top: 30px;
}

.simple-column dl + dl {
	margin-top: 40px;
}

.simple-column p {
	font-size: 15px;
	font-weight: 500;
	line-height: 1.9;
}
.simple-column p + p {
	margin-top: 15px;
}

.simple-column dt,
.simple-column dd {
	font-size: 15px;
	font-weight: 500;
	line-height: 1.9;
}
.simple-column dt {
	margin: 0 0 10px;
	font-weight: 700;
}
.simple-column dd + dd {
	margin-top: 15px;
}
.simple-column span.note {
	font-size: 14px;
}

.simple-column a {
	text-decoration: underline;
}
.simple-column a:hover {
	text-decoration: none;
}


.simple-column ul.marker {
	margin: 10px 0 0;
}
.simple-column ul.marker li {
	padding-left: 1em;
	text-indent: -1em;
	line-height: 1.9;
}
.simple-column ul.marker li::before {
	content: "・";
	text-indent: 0;
}


.simple-column ol.marker {
	margin: 10px 0 0 0.4em;
	counter-reset: order;
}
.simple-column ol.marker > li {
	padding-left: 1.0em;
	text-indent: -1.0em;
	line-height: 1.9;
	counter-increment: order;
}
.simple-column ol.marker > li + li {
	margin-top: 15px;
}
.simple-column ol.marker > li::before {
	box-sizing: border-box;
	display: inline-block;
	content: counter(order) ".";
	width: 1.0em;
	text-indent: 0;
}

.simple-column ol.marker.indent {
	margin-left: 1em;
}
.simple-column ol.marker.indent > li {
	padding-left: 1.8em;
	text-indent: -1.8em;
}
.simple-column ol.marker.indent > li::before {
	box-sizing: border-box;
	position: relative;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	content: counter(order);
	width: 1.3em;
	height: 1.3em;
	top: -1px;
	margin-right: 0.5em;
	padding: 0 0 2px 1px;
	font-size: 14px;
	text-indent: 0;
	line-height: 1;
	border: 1px solid #000;
	border-radius: 0.65em;
}

.simple-column ol.marker ul.marker {
	margin-top: 0;
}

.simple-column ol.marker .subtitle {
	text-indent: 0;
	font-size: 15px;
	line-height: 1.9;
}
.simple-column ol.marker * + .subtitle {
	margin-top: 10px;
}

.simple-column .quote {
	margin: 15px 0 20px;
	padding: 15px 20px;
	font-size: 15px;
	line-height: 1.9;
	color: #666;
	border: 1px solid #eee;
}
.simple-column .quote .head {
	line-height: 1.9;
	text-align: center;
}

.simple-column .source {
	margin: 15px 0 0;
	font-size: 15px;
	line-height: 1.9;
	text-indent: 0;
}

.simple-column .address {
	max-width: 640px;
	margin: 20px 0 15px;
	padding: 15px 20px;
	font-size: 15px;
	line-height: 1.9;
	text-align: center;
	border: 1px solid #999;
}
.simple-column .address strong {
	display: block;
	margin: 0 0 8px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.9;
	text-align: center;
}





/* ---------------------------------------------------------------------------------------------------- */
/* FORM */


#form-section {
	padding: 60px 0 80px;
}
#form-section .inner {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 40px;
}

#form-section .form-container {
	padding: 60px;
	background: #f4f4f4;
	border-radius: 7px;
}





#form-group {
	padding: 60px 0 80px;
}
#form-group .inner {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 40px;
}

#form-group h2 {
	font-size: 24px;
	font-weight: 500;
}
#form-group * + h2 {
	margin-top: 70px;
}

#form-group .lead {
	margin: 30px 0 0;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.9;
}



#form-group .form-list {
	margin: 30px 0 0;
	padding: 60px;
	background: #f4f4f4;
	border-radius: 7px;
}

#form-group .form-list ul {
	display: flex;
	flex-wrap: wrap;
}
#form-group .form-list li {
	width: calc(50% - 10px);
}
#form-group .form-list li:nth-child(2n) {
	margin-left: 20px;
}
#form-group .form-list li:nth-child(n + 3) {
	margin-top: 20px;
}

#form-group .form-list li a {
	box-sizing: border-box;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 70px;
	text-align: center;
	color: #dc1010;
	font-size: 16px;
	font-weight: 500;
	border: 1px solid #dc1010;
	border-radius: 35px;
	background: #fff;
	overflow: hidden;
	will-change: transform;
}
#form-group .form-list li a em {
	position: relative;
	z-index: 10;
	line-height: 1.5;
}
#form-group .form-list li a::after {
	position: absolute;
	content: "";
	display: block;
	width: 102%;
	height: 100%;
	left: -1%;
	top: 0;
	z-index: 1;
	background: #dc1010;
	transform: scaleX(0);
	transform-origin: left center;
	transition: all 400ms ease;
}
#form-group .form-list li a:hover {
	color: #fff;
}
#form-group .form-list li a:hover::after {
	transform: scaleX(1);
}


#form-group .link {
	margin: 80px 0 0;
}
#form-group .link h3 {
	font-size: 20px;
	font-weight: 500;
	text-align: center;
}
#form-group .link nav {
	width: 480px;
	margin: 30px auto 0;
}
#form-group .link nav a {
	height: 70px;
	border-radius: 35px;
	border: 1px solid #dc1010;
}



#form-group .download-list {
	margin: 50px 0 0;
	padding: 60px 60px 20px;
	background: #f4f4f4;
	border-radius: 7px;
}
.download-list .filter {
	margin: 0 0 50px;
}
.download-list .filter dl {
	display: flex;
	align-items: center;
}
.download-list .filter dt {
	font-size: 14px;
	font-weight: 500;
}
.download-list .filter dd {
	display: flex;
	flex-wrap: wrap;
	margin-left: 15px;
	padding-left: 15px;
	border-left: 1px solid #e6e6e6;
}
.download-list .filter a {
	box-sizing: border-box;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 32px;
	margin: 0 8px 0 0;
	padding: 0 14px;
	font-size: 14px;
	font-weight: 500;
	color: #dc1010;
	border: 1px solid #dc1010;
	border-radius: 16px;
	background: #fff;
	overflow: hidden;
	will-change: transform;
}
.download-list .filter a em {
	position: relative;
	z-index: 10;
}
.download-list .filter a::after {
	position: absolute;
	content: "";
	display: block;
	width: 102%;
	height: 100%;
	left: -1%;
	top: 0;
	z-index: 1;
	background: #dc1010;
	transform: scaleX(0);
	transform-origin: left center;
	transition: all 400ms ease;
}
.download-list .filter a:hover,
.download-list .filter a.active {
	color: #fff;
}
.download-list .filter a:hover::after,
.download-list .filter a.active::after {
	transform: scaleX(1);
}


.download-list h3 {
	width: 100%;
	margin: 0 0 30px;
	font-size: 24px;
	font-weight: 500;
	text-align: center;
}
.download-list * + h3 {
	margin-top: 0;
}

.download-list .extra {
	width: 100%;
	margin: -10px 0 40px;
	text-align: center;
}
.download-list .extra a {
	width: 240px;
	height: 40px;
	margin: 0 auto;
	font-size: 0.8125rem;
}



.download-list .list {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	margin: 0 -16px;
}
.download-list .list-item {
	position: relative;
	display: flex;
	flex-direction: column;
	width: calc(((100% - 32px) - (32px * 2)) / 3);
	margin: 0 16px 40px;
}

.download-list .thumb {
	border: 1px solid #e6e6e6;
	border-radius: 7px;
	overflow: hidden;
}
.download-list .list-item dl {
	margin: 12px 0 0;
	padding: 0 0 70px;
}
.download-list .list-item dt {
	font-size: 18px;
	font-weight: 500;
	line-height: 1.5;
}
.download-list .list-item dt + dd {
	margin: 12px 0 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.8;
	color: #777;
}
.download-list .list-item dd + dd {
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 0;
}



.download-list .list-item.hidden {
	display: none;
}

.download-list.filtered h3,
.download-list.filtered .extra {
	display: none;
}







/* ---------------------------------------------------------------------------------------------------- */
/* WP FORM */

#wp-form {
	padding: 60px 0;
}
#wp-form .inner  {
	box-sizing: border-box;
	position: relative;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 40px;
}
#wp-form .form-container {
	padding: 60px;
	background: #f4f4f4;
	border-radius: 7px;
}


#wp-form .form-notice {
	margin: 0 0 50px;
}
#wp-form .form-notice  p {
	font-size: 14px;
	font-weight: 500;
	line-height: 2;
}
#wp-form .form-notice a {
	color: #dc1010;
	text-decoration: underline;
}
#wp-form .form-notice a:hover {
	text-decoration: none;
}


#wp-form dl {
	display: flex;
	width: 100%;
}
#wp-form dl + dl {
	margin-top: 20px;
}
#wp-form dt {
	width: 300px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
}
#wp-form dd {
	width: calc(100% - 300px);
	line-height: 1.5;
}

#wp-form dt .required {
	font-size: 0;
}
#wp-form dt .required::after {
	position: relative;
	display: inline-block;
	content: "*";
	margin-left: 4px;
	top: -2px;
	font-size: 14px;
	font-weight: 500;
	color: #dc1010;
}

#wp-form dt .note {
	display: block;
	margin: 4px 0 0;
	font-size: 13px;
}


#wp-form .submit {
	margin: 40px 0 0 300px;
}

#wp-form input[type="text"],
#wp-form input[type="email"],
#wp-form textarea {
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 8px;
	font-size: 16px;
	font-weight: 500;
	border: 1px solid #ccc;
}

#wp-form input[type="submit"] {
	box-sizing: border-box;
	min-width: 200px;
	padding: 10px 20px;
	font-size: 15px;
	font-weight: 500;
	color: #fff;
	border: 1px solid #dc1010;
	border-radius: 30px;
	background: #dc1010;
	cursor: pointer;
	transition: opacity 300ms ease-out;
}
#wp-form input[type="submit"]:hover {
	opacity: 0.8;
}

#wp-form select {
	min-height: 30px;
	font-size: 16px;
}



#wp-form span.wpcf7-not-valid-tip {
	display: inline-block;
	margin: 8px 0 0;
	font-size: 13px;
	font-weight: 500;
	color: #dc1010;
}

#wp-form .wpcf7-validation-errors {
	display: none;
}


#wp-form span.radio .wpcf7-list-item {
	display: block;
	margin: 0;
	padding: 0;
}
#wp-form span.radio .wpcf7-list-item + .wpcf7-list-item {
	margin-top: 20px;
}
#wp-form span.radio .wpcf7-list-item-label {
	font-size: 15px;
	font-weight: 500;
}
#wp-form span.radio .wpcf7-list-item input {
	width: 15px;
	height: 15px;
	margin: 0;
}



#wp-form .form-agree {
	margin: 40px 0 0;
}
#wp-form .form-agree .policy {
	border: 1px solid #e6e6e6;
	background: #fff;
}
#wp-form .form-agree .policy-inner {
	padding: 25px 30px;
}
#wp-form .form-agree .policy-inner,
#wp-form .form-agree .policy-inner p {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.7;
}
#wp-form .form-agree .policy-inner p + p {
	margin-top: 20px;
}

#wp-form .form-agree .policy-inner strong {
	display: inline-block;
	margin: 0 0 10px;
}


#wp-form .form-agree > p {
	margin: 20px 0 0;
}
#wp-form .form-agree > p a {
	font-size: 15px;
	font-weight: 500;
	color: #dc1010;
	text-decoration: underline;
}
#wp-form .form-agree > p a:hover {
	text-decoration: none;
}

#wp-form .accept-box {
	margin: 40px 0 60px 300px;
}
#wp-form .accept-box .wpcf7-list-item {
	display: block;
	margin: 0;
	padding: 0;
}
#wp-form .accept-box .wpcf7-list-item-label {
	font-size: 15px;
	font-weight: 500;
}
#wp-form .accept-box .wpcf7-list-item input {
	position: relative;
	width: 18px;
	height: 18px;
	margin: 0 4px 0 0;
	top: 2px;
}






#form-thanks {
	box-sizing: border-box;
	min-height: 450px;
	padding: 60px 0 80px;
}
#form-thanks .inner {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 40px;
	text-align: center;
}
#form-thanks h2 {
	margin: 0 0 30px;
	font-size: 24px;
	font-weight: 500;
}
#form-thanks p {
	line-height: 2;
	font-size: 16px;
	font-weight: 500;
}
#form-thanks nav {
	width: 320px;
	margin: 60px auto 0;
}
#form-thanks nav a {
}

div.wpcf7-response-output {
	border: none !important;
}




/* ---------------------------------------------------------------------------------------------------- */
/* Library */

#library-entries {
	position: relative;
	padding: 90px 0 120px;
	background: #f4f4f4;
}
#library-entries .inner {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 40px;
}



#library-entries ul {
	display: flex;
	flex-wrap: wrap;
}
#library-entries li {
	width: calc((100% - (34px * 2)) / 3);
	margin-left: 34px;
}
#library-entries li:nth-child(3n + 1) {
	margin-left: 0;
}
#library-entries li:nth-child(n + 4) {
	margin-top: 60px;
}

#library-entries li a {
	display: block;
	will-change: transform;
}
#library-entries .thumb {
	position: relative;
	overflow: hidden;
	border: 1px solid #e6e6e6;
	border-radius: 7px;
	will-change: transform;
}
#library-entries .text {
	margin: 20px 0 0;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.7;

	overflow: hidden;
	
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}
#library-entries a .play {
	position: absolute;
	width: 50px;
	height: 50px;
	left: calc(50% - 25px);
	top: calc(50% - 25px);
	background: #dc1010 url(/img/icon_play.svg) 58% 50% no-repeat;
	background-size: 16px auto;
	border-radius: 25px;
	will-change: transform;
}

#library-entries .thumb img {
	transition: all 300ms ease-out;
}
#library-entries li a:hover .thumb img {
	transform: scale(1.05);
}




#video-overlay {
	position: fixed;
	width: 100%;
	height: 100vh;
	left: 0;
	top: 0;
	z-index: 10000;
	background: rgba(0,0,0,0.8);
}
#video-player {
	position: fixed;
	width: 960px;
	height: 540px;
	left: 50%;
	top: 50%;
	z-index: 10010;
	transform: translate(-50%, -50%);
}
#video-player iframe {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}
#video-close-button {
	position: fixed;
	width: 50px;
	height: 50px;
	left: calc(50% + 480px - 50px);
	top: calc(50% - 270px - 60px);
	z-index: 10000;
}
#video-close-button::before,
#video-close-button::after {
	position: absolute;
	content: "";
	display: block;
	width: 40px;
	height: 2px;
	left: 5px;
	top: calc(50% - 1px);
	background: #fff;
}
#video-close-button::before {
	transform: rotate(45deg);
}
#video-close-button::after {
	transform: rotate(-45deg);
}


#video-overlay,
#video-player,
#video-close-button {
	opacity: 0;
	transition: all 400ms ease-out;
}
body.video-player #video-overlay,
body.video-player #video-player,
body.video-player #video-close-button {
	opacity: 1;
}