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

.secAboutTop {
	margin-bottom: 50px
}

@media screen and (min-width: 769px) {
	.secAboutTop {
		margin-bottom: 100px
	}
}

.secAboutTop .secAboutTopCont {
	margin-bottom: 50px
}

.secAboutTop .secAboutTopCont h2 {
	font-size: 2.6rem;
	margin-bottom: 40px;
	line-height: 1.4;
}

@media screen and (min-width: 769px) {
	.secAboutTop .secAboutTopCont h2 {
		font-size: 3.8rem
	}
}

.secAboutTop .secAboutTopCont h2 span {
	color: #2466AF
}

.secAboutTop .secAboutTopCont p {
	font-weight: 300;
	line-height: 2;
}

.secAboutTop .secAboutTopLogo {
	margin-bottom: 100px;
	border: 1px solid #E5E5E5;
	padding: 50px 30px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap
}

@media screen and (min-width: 769px) {
	.secAboutTop .secAboutTopLogo {
		padding: 70px 50px
	}
}

.secAboutTop .secAboutTopLogo .secAboutTopLogoImg {
	width: 100%;
	order: 2
}

@media screen and (min-width: 769px) {
	.secAboutTop .secAboutTopLogo .secAboutTopLogoImg {
		width: 47.5%;
		order: 1
	}
}

.secAboutTop .secAboutTopLogo .secAboutTopLogoImg img {
	width: 100%
}

.secAboutTop .secAboutTopLogo .secAboutTopLogoCont {
	width: 100%;
	order: 1;
	margin-bottom: 40px
}

@media screen and (min-width: 769px) {
	.secAboutTop .secAboutTopLogo .secAboutTopLogoCont {
		width: 47.5%;
		order: 2;
		margin-bottom: 0
	}
}

.secAboutTop .secAboutTopLogo .secAboutTopLogoCont h3 {
	font-size: 2rem;
	margin-bottom: 25px;
	line-height: 1.4;
}

.secAboutTop .secAboutTopLogo .secAboutTopLogoCont h4 {
	color: #2466AF;
}

.secAboutTop .secAboutTopLogo .secAboutTopLogoCont h4+p {
	margin-bottom: 24px;
}

.secAboutTop .secAboutTopLogo .secAboutTopLogoCont p {
	font-size: 1.4rem;
	font-weight: 300
}

.secAboutTop .secAboutTopCopy {
	text-align: center
}

.secAboutTop .secAboutTopCopy h3 {
	font-size: 2.4rem;
	margin-bottom: 25px;
	line-height: 1.4;
}

@media screen and (min-width: 769px) {
	.secAboutTop .secAboutTopCopy h3 {
		font-size: 3.2rem
	}
}

.secAboutTop .secAboutTopCopy h3 span {
	display: block;
	color: #2466AF
}

@media screen and (min-width: 769px) {
	.secAboutTop .secAboutTopCopy h3 span {
		display: inline
	}
}

.secAboutTop .secAboutTopCopy p {
	text-align: left;
	font-weight: 300;
	line-height: 2;
}

@media screen and (min-width: 769px) {
	.secAboutTop .secAboutTopCopy p {
		text-align: center
	}
}

.secAboutMovie {
	margin-bottom: 40px
}

@media screen and (min-width: 769px) {
	.secAboutMovie {
		margin-bottom: 80px
	}
}

.secAboutMovie h2 {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	font-size: 2.2rem;
	font-weight: 400;
	color: #2466AF;
	margin-bottom: 25px
}

.secAboutMovie h2 img {
	margin-right: 10px;
	width: 38px
}

.secAboutMovie .secAboutMovieCont {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap
}

.secAboutMovie .secAboutMovieCont .secAboutMovieContBox {
	width: 100%;
	margin-bottom: 20px
}

@media screen and (min-width: 769px) {
	.secAboutMovie .secAboutMovieCont .secAboutMovieContBox {
		width: 48%;
		margin-bottom: 0
	}
}

.secAboutMovie .secAboutMovieCont .secAboutMovieContBox figure {
	margin-bottom: 5px;
	overflow: hidden
}

.secAboutMovie .secAboutMovieCont .secAboutMovieContBox figure img {
	width: 100%;
	transition: all .3s
}

.secAboutMovie .secAboutMovieCont .secAboutMovieContBox h3 {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	transition: all .3s
}

.secAboutMovie .secAboutMovieCont .secAboutMovieContBox h3 span {
	margin-left: 5px;
	font-size: 12px;
	color: #2466AF;
	transition: all .3s
}

.secAboutMovie .secAboutMovieCont .secAboutMovieContBox a:hover figure img {
	transform: scale(1.05, 1.05)
}

.secAboutMovie .secAboutMovieCont .secAboutMovieContBox a:hover h3 {
	color: #2466AF
}

.secAboutMovie .secAboutMovieCont .secAboutMovieContBox a:hover h3 span {
	margin-left: 15px
}

.secAboutComm {
	margin-bottom: 40px
}

@media screen and (min-width: 769px) {
	.secAboutComm {
		margin-bottom: 80px
	}
}

.secAboutComm h2 {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	font-size: 2.2rem;
	font-weight: 400;
	color: #000;
	margin-bottom: 25px;
	padding-left: 10px;
	border-left: 5px solid #2466af;
	line-height: 1.3;
}

.secAboutComm h2 img {
	margin-right: 10px;
	width: 38px
}

.secAboutComm .secAboutCommCont {
	background: #F4F5F7;
	padding: 20px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap
}

@media screen and (min-width: 481px) {
	.secAboutComm .secAboutCommCont {
		padding: 30px
	}
}

@media screen and (min-width: 769px) {
	.secAboutComm .secAboutCommCont {
		padding: 100px 60px
	}
}

.secAboutComm .secAboutCommCont h3 {
	width: 100%;
	margin-bottom: 15px;
	text-align: center
}

@media screen and (min-width: 769px) {
	.secAboutComm .secAboutCommCont h3 {
		width: 49%;
		text-align: center;
		margin-bottom: 30px
	}
}

.secAboutComm .secAboutCommCont h3 img {
	width: 100%;
	max-width: 216px;
	margin-top: 25px
}

@media screen and (min-width: 769px) {
	.secAboutComm .secAboutCommCont h3 img {
		max-width: 328px;
		margin-top: 0
	}
}

.secAboutComm .secAboutCommCont p {
	width: 100%;
	line-height: 2;
	font-weight: 300;
	letter-spacing: .05em;
	font-size: 1.4rem
}

@media screen and (min-width: 769px) {
	.secAboutComm .secAboutCommCont p {
		width: 49%;
		font-size: 1.6rem
	}
}

.secAboutBusiness {
	padding: 0;
	margin-bottom: 30px
}

@media screen and (min-width: 1025px) {
	.secAboutBusiness {
		margin-bottom: 40px;
		padding: 0 40px
	}
}

.secAboutBusiness .secAboutBusinessInner {
	background: url(/files/img/about/bg_secAboutBusiness_01.jpg) center center no-repeat;
	background-size: cover;
	padding: 130px 0 70px
}

.secAboutBusiness .secAboutBusinessInner .secAboutBusinessTtl {
	width: 100%;
	max-width: 1040px;
	padding: 0 20px;
	margin: 0 auto 60px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	color: #fff
}

@media screen and (min-width: 769px) {
	.secAboutBusiness .secAboutBusinessInner .secAboutBusinessTtl {
		flex-wrap: nowrap
	}
}

.secAboutBusiness .secAboutBusinessInner .secAboutBusinessTtl h2 {
	width: 100%;
	text-align: center;
	font-size: 3rem;
	font-weight: 400;
	white-space: nowrap;
	position: relative;
	line-height: 1;
	margin-bottom: 60px
}

/* @media screen and (min-width: 1025px) {
	.secAboutBusiness .secAboutBusinessInner .secAboutBusinessTtl h2 {
		width: auto;
		text-align: center;
		margin-bottom: 0;
		margin-right: 60px
	}
} */

.secAboutBusiness .secAboutBusinessInner .secAboutBusinessTtl h2:after {
	content: "";
	display: block;
	width: 64px;
	height: 4px;
	position: absolute;
	bottom: -40px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
	background: #fff
}

/* @media screen and (min-width: 769px) {
	.secAboutBusiness .secAboutBusinessInner .secAboutBusinessTtl h2:after {
		bottom: 0;
		left: 0;
		-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
		transform: translateX(0)
	}
} */

.secAboutBusiness .secAboutBusinessInner .secAboutBusinessTtl p {
	font-weight: 300;
	line-height: 2;
}

.secAboutBusiness .secAboutBusinessInner .secAboutBusinessList {
	padding: 0 30px
}

@media screen and (min-width: 769px) {
	.secAboutBusiness .secAboutBusinessInner .secAboutBusinessList {
		padding: 0 120px
	}
}

@media screen and (min-width: 1025px) {
	.secAboutBusiness .secAboutBusinessInner .secAboutBusinessList {
		padding: 0
	}
}

.secAboutBusiness .secAboutBusinessInner .secAboutBusinessList ul {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap
}

@media screen and (min-width: 1025px) {
	.secAboutBusiness .secAboutBusinessInner .secAboutBusinessList ul {
		flex-wrap: nowrap
	}
}

.secAboutBusiness .secAboutBusinessInner .secAboutBusinessList ul li {
	width: 100%
}

@media screen and (min-width: 1024px) {
	.secAboutBusiness .secAboutBusinessInner .secAboutBusinessList ul li {
		width: calc(100% / 3)
	}
}

.secAboutBusiness .secAboutBusinessInner .secAboutBusinessList ul li a {
	position: relative;
	display: block;
	overflow: hidden
}

.secAboutBusiness .secAboutBusinessInner .secAboutBusinessList ul li a img {
	width: 100%;
	transition: all .2s
}

.secAboutBusiness .secAboutBusinessInner .secAboutBusinessList ul li a h2 {
	text-align: left;
	white-space: nowrap;
	color: #fff;
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	font-size: 1.7rem;
	font-weight: 400;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding: 50px 15px 15px 15px;
	margin-bottom: 0;
	background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
	transition: all .3s;
	line-height: 1.3;
}

@media screen and (min-width: 769px) {
	.secAboutBusiness .secAboutBusinessInner .secAboutBusinessList ul li a h2 {
		padding: 60px 20px 20px 20px;
		font-size: 2rem
	}
}

.secAboutBusiness .secAboutBusinessInner .secAboutBusinessList ul li a .arrowIcon {
	transition: all .3s
}

.secAboutBusiness .secAboutBusinessInner .secAboutBusinessList ul li a:hover h2 {
	background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%)
}

.secAboutBusiness .secAboutBusinessInner .secAboutBusinessList ul li a:hover img {
	transform: scale(1.05, 1.05)
}

.secAboutBusiness .secAboutBusinessInner .secAboutBusinessList ul li a:hover .arrowIcon {
	transform: translateX(10px)
}

.secAboutBusiness .secAboutBusinessInner .secAboutBusinessList ul li a .secBusinessesImgText {
    position: absolute;
    z-index: 1;
    top: 4px;
    right: 4px;
    color: #fff;
    font-size: 10px;
    letter-spacing: 0.05em;
}

.secAboutBusiness .secAboutBusinessInner .secAboutBusinessList ul li a .secBusinessesContListNum {
	color: #fff;
	font-size: 3.2rem;
	font-family: "Roboto", sans-serif;
	letter-spacing: -.04em;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 122px;
	height: 228px;
	padding: 5px 0 0 15px
}

.secAboutBusiness .secAboutBusinessInner .secAboutBusinessList ul li.secAboutBusinessDomestic .secBusinessesContListNum {
	background: linear-gradient(125deg, #0066b5 0%, #0066b5 40%, rgba(0, 102, 181, 0) 40%, rgba(0, 102, 181, 0) 100%)
}

.secAboutBusiness .secAboutBusinessInner .secAboutBusinessList ul li.secAboutBusinessOverseas .secBusinessesContListNum {
	background: linear-gradient(125deg, #f7b403 0%, #f7b403 40%, rgba(247, 180, 3, 0) 40%, rgba(247, 180, 3, 0) 100%)
}

/*
.secAboutBusiness .secAboutBusinessInner .secAboutBusinessList ul li.secAboutBusinessSolution h2 {
  line-height: 1.5;
  padding: 70px 20px 10px 20px
}
*/
.secAboutBusiness .secAboutBusinessInner .secAboutBusinessList ul li.secAboutBusinessSolution .secBusinessesContListNum {
	background: linear-gradient(125deg, #e04c0f 0%, #e04c0f 40%, rgba(224, 76, 15, 0) 40%, rgba(224, 76, 15, 0) 100%)
}

.secAboutBusiness .secAboutBusinessInner .secAboutBusinessList .secAboutBusinessBtn {
	margin-top: 50px
}

.secAboutBusiness .secAboutBusinessInner .secAboutBusinessList .secAboutBusinessBtn a {
	position: relative;
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 216px;
	height: 80px;
	border: 1px solid #fff;
	text-align: center;
	border-radius: 40px;
	font-weight: 500;
	line-height: 1.5;
	margin: 0 auto;
	transition: all .3s
}

.secAboutBusiness .secAboutBusinessInner .secAboutBusinessList .secAboutBusinessBtn a:hover {
	background: #2466AF;
	border: 1px solid #2466AF
}

.secAboutBusiness .secAboutBusinessInner .secAboutBusinessList .secAboutBusinessBtn a:hover:after {
	right: 15px
}

.secAboutBusiness .secAboutBusinessInner .secAboutBusinessList .secAboutBusinessBtn a:after {
	font-family: ico;
	content: "\e900";
	font-size: 10px;
	position: absolute;
	top: 50%;
	right: 25px;
	transform: translateY(-50%);
	transition: all .3s
}

.secAboutOhter {
	padding: 0 20px;
	margin-bottom: 80px
}

@media screen and (min-width: 769px) {
	.secAboutOhter {
		padding: 0 40px;
		margin-bottom: 120px
	}
}

.secAboutOhter ul {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap
}

.secAboutOhter ul li {
	width: 100%
}

@media screen and (min-width: 1024px) {
	.secAboutOhter ul li {
		width: calc(100% / 2)
	}
}

.secAboutOhter ul li a {
	position: relative;
	display: block;
	overflow: hidden
}

.secAboutOhter ul li a img {
	width: 100%;
	transition: all .2s
}

.secAboutOhter ul li a img.pcShow {
	display: none
}

@media screen and (min-width: 769px) {
	.secAboutOhter ul li a img.pcShow {
		display: block
	}
}

@media screen and (min-width: 769px) {
	.secAboutOhter ul li a img.spShow {
		display: none
	}
}

.secAboutOhter ul li a h2 {
	text-align: left;
	white-space: nowrap;
	color: #fff;
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	font-size: 1.7rem;
	font-weight: 400;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding: 50px 15px 15px 15px;
	margin-bottom: 0;
	background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
	transition: all .3s
}

@media screen and (min-width: 769px) {
	.secAboutOhter ul li a h2 {
		padding: 60px 20px 20px 20px;
		font-size: 2rem
	}
}

.secAboutOhter ul li a h2 br {
	display: none
}

@media screen and (min-width: 769px) {
	.secAboutOhter ul li a h2 br {
		display: block
	}
}

@media screen and (min-width: 1201px) {
	.secAboutOhter ul li a h2 br {
		display: none
	}
}

.secAboutOhter ul li a .arrowIcon {
	transition: all .3s
}

.secAboutOhter ul li a:hover h2 {
	background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%)
}

.secAboutOhter ul li a:hover img {
	transform: scale(1.05, 1.05)
}

.secAboutOhter ul li a:hover .arrowIcon {
	transform: translateX(10px)
}


.secMaterialPurchase {
	margin-bottom: 40px;
}

@media screen and (min-width: 769px) {
	.secMaterialPurchase {
		margin-bottom: 80px;
	}
}

.secMaterialPurchase h2 {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: start;
	-ms-flex-align: center;
	margin-bottom: 25px;
	padding-left: 10px;
	border-left: 5px solid #2466af;
	color: #2466af;
	font-weight: 400;
	font-size: 2.2rem;
	line-height: 1.3;

	-webkit-box-pack: start;
	justify-content: flex-start;
	-webkit-box-align: center;
	align-items: center;
}

@media screen and (min-width: 769px) {
	.secMaterialPurchaseList {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-pack: distribute;

		justify-content: space-around;
	}
}

.secMaterialPurchaseList li {
	border: 1px solid #e5e5e5;
}

@media screen and (min-width: 769px) {
	.secMaterialPurchaseList li {
		width: 50%;
	}
}

.secMaterialPurchaseList li+li {
	border-top: none;
}

@media screen and (min-width: 769px) {
	.secMaterialPurchaseList li+li {
		border-top: 1px solid #e5e5e5;
		border-left: none;
	}
}

.secMaterialPurchase .secMaterialPurchaseList li {
	padding: 30px 24px 30px 16px;
	font-weight: 300;
}

.secMaterialPurchase .secMaterialPurchaseList li a {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: center;
	-ms-flex-align: center;
	height: 3em;
	text-align: center;
	font-size: 20px;
	-webkit-box-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	align-items: center;
}

@media screen and (min-width: 769px) {
	.secMaterialPurchase .secMaterialPurchaseList li a {
		border-right: none;
	}
}

.secMaterialPurchase .secMaterialPurchaseList li a::after {
	position: absolute;
	top: 28%;
	right: -16px;
	color: #2466af;
	content: '\e900';
	font-size: 16px;
	font-family: ico;
}

@media screen and (min-width: 769px) {
	.secMaterialPurchase .secMaterialPurchaseList li a::after {
		right: 0;
	}
}

.secMaterialPurchase .secMaterialPurchaseList li a .hasLine {
	padding-bottom: 1px;
	background-image: linear-gradient(180deg, transparent calc(100% - 1px), #2466af 0);
	background-size: 0 100%;
	background-repeat: no-repeat;
	-webkit-transition: background-size .3s ease-in-out;
	transition: background-size .3s ease-in-out;
}

.secMaterialPurchase .secMaterialPurchaseList li a:hover {
	color: #2466af;
}

.secMaterialPurchase .secMaterialPurchaseList li a:hover .hasLine {
	background-size: 100% 100%;
}



.secAboutCurrent {
	margin-bottom: 40px
}

@media screen and (min-width: 769px) {
	.secAboutCurrent {
		margin-bottom: 80px
	}
}

.secAboutCurrent h2 {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	font-size: 2.2rem;
	font-weight: 400;
	color: #2466AF;
	margin-bottom: 25px;
	padding-left: 10px;
	border-left: 5px solid #2466af;
	line-height: 1.3;
}

.secAboutCurrent h2 img {
	margin-right: 10px;
	width: 38px
}

.secAboutCurrent .secAboutCurrentList {
	/*border-top: 1px solid #E5E5E5;*/
	border-bottom: 1px solid #E5E5E5;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap
}

.secAboutCurrent .secAboutCurrentList li {
	width: 100%
}

@media screen and (min-width: 769px) {
	.secAboutCurrent .secAboutCurrentList li {
		width: calc(100% / 2)
	}
}

.secAboutCurrent .secAboutCurrentList li a {
	display: block;
	position: relative;
	padding: 30px;
	font-weight: 300;
	text-align: center;
	border-left: 1px solid #E5E5E5;
	border-top: 1px solid #E5E5E5;
	border-right: 1px solid #E5E5E5
}

@media screen and (min-width: 769px) {
	.secAboutCurrent .secAboutCurrentList li a {
		border-right: none
	}
}

.secAboutCurrent .secAboutCurrentList li a[target="_blank"]:after {
	font-family: ico;
	content: "\e901";
	font-size: 10px;
	position: absolute;
	top: 50%;
	right: 25px;
	transform: translateY(-50%);
	transition: all .3s;
	color: #2466AF
}

.secAboutCurrent .secAboutCurrentList li a .hasLine {
	padding-bottom: 1px;
	background-image: linear-gradient(180deg, transparent calc(100% - 1px), #2466AF 0);
	background-repeat: no-repeat;
	background-size: 0% 100%;
	transition: background-size .3s ease-in-out;
	letter-spacing: .05em;
}

.secAboutCurrent .secAboutCurrentList li a:hover {
	color: #2466AF
}

.secAboutCurrent .secAboutCurrentList li a:hover .hasLine {
	background-size: 100% 100%
}

/*
.secAboutCurrent .secAboutCurrentList li:first-child {
  width: 100%
}
.secAboutCurrent .secAboutCurrentList li:first-child a {
  text-align: left;
  padding-left: 0;
  border: none
}
.secAboutCurrent .secAboutCurrentList li:first-child a:after {
  right: 0
}
.secAboutCurrent .secAboutCurrentList li:first-child a .icoPdf {
  display: inline-block;
  height: 24px;
  width: 63px;
  border-radius: 5px;
  background: #ED2B00;
  color: #fff;
  text-align: center;
  line-height: 24px;
  font-weight: bold;
  font-size: 1.2rem;
  font-family: "Roboto", sans-serif
}
.secAboutCurrent .secAboutCurrentList li:first-child a:after {
  font-family: ico;
  content: "\e900"
}
*/
.secAboutCurrent .secAboutCurrentList li:last-child {
	border-right: 1px solid #E5E5E5
}

.secAboutComposition {
	margin-bottom: 80px;
	padding: 0
}

@media screen and (min-width: 769px) {
	.secAboutComposition {
		padding: 0 25px
	}
}

.secAboutComposition h2 {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	font-size: 2.2rem;
	font-weight: 400;
	color: #2466AF;
	margin-bottom: 25px;
	padding: 0 25px;
	padding-left: 10px;
	border-left: 5px solid #2466af;
	line-height: 1.3;
	margin-left: 25px;
}

@media screen and (min-width: 769px) {
	.secAboutComposition h2 {
		margin-left: 0;
	}
}

.secAboutComposition h2 img {
	margin-right: 10px;
	width: 38px
}

.secAboutComposition .secAboutCompositionTtlSub {
	background: #B6BEC4;
	color: #fff;
	height: 60px;
	line-height: 60px;
	padding: 0 30px
}

.secAboutComposition .secAboutCompositionList {
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;

}

@media screen and (min-width: 1025px) {
	.secAboutComposition .secAboutCompositionList {
		border-right: 1px solid #E5E5E5;
		border-bottom: 1px solid #E5E5E5;
	}
}

.secAboutComposition .secAboutCompositionList li {
	width: 100%
}

@media screen and (min-width: 1025px) {
	.secAboutComposition .secAboutCompositionList li {
		width: calc(100% / 3)
	}
}

.secAboutComposition .secAboutCompositionList li>a,
.secAboutComposition .secAboutCompositionList li>span {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	padding: 40px 40px 60px;
	font-weight: 300;
	border-bottom: 1px solid #E5E5E5;
	font-size: 1.4rem;
	transition: all .3s
}

@media screen and (min-width: 1025px) {

	.secAboutComposition .secAboutCompositionList li>a,
	.secAboutComposition .secAboutCompositionList li>span {
		border-left: 1px solid #E5E5E5;
		border-bottom: none
	}
}

.secAboutComposition .secAboutCompositionList li>a h3,
.secAboutComposition .secAboutCompositionList li>span h3 {
	margin-bottom: 30px;
	text-align: center;
	font-size: 2rem;
	font-weight: 400;
	letter-spacing: 0em;
	line-height: 1.4;
}

.secAboutComposition .secAboutCompositionList li>a h3 img,
.secAboutComposition .secAboutCompositionList li>span h3 img {
	width: 100%;
	max-width: 252px;
}

.secAboutComposition .secAboutCompositionList li a:after {
	font-family: ico;
	content: "\e901";
	font-size: 10px;
	position: absolute;
	bottom: 24px;
	right: 24px;
	transition: all .3s;
	color: #2466AF
}

.secAboutComposition .secAboutCompositionList li.after_none a:after {
	display: none;
}

.secAboutComposition .secAboutCompositionList li a:hover {
	background: rgba(94, 142, 178, 0.05)
}

.secAboutComposition .secAboutCompositionList li a:hover:after {
	right: 14px
}

.secAboutComposition .secAboutCompositionBtn {
	margin-top: 50px
}

.secAboutComposition .secAboutCompositionBtn a {
	position: relative;
	color: #2466AF;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 308px;
	height: 80px;
	border: 1px solid #2466AF;
	text-align: center;
	border-radius: 40px;
	font-weight: 500;
	margin: 0 auto;
	transition: all .3s
}

.secAboutComposition .secAboutCompositionBtn a:hover {
	color: #fff;
	background: #2466AF
}

.secAboutComposition .secAboutCompositionBtn a:hover:after {
	right: 15px
}

.secAboutComposition .secAboutCompositionBtn a:after {
	font-family: ico;
	content: "\e900";
	font-size: 10px;
	position: absolute;
	top: 50%;
	right: 25px;
	transform: translateY(-50%);
	transition: all .3s
}

_:-ms-lang(x)::-ms-backdrop,
.secAboutCurrent .secAboutCurrentList li a .hasLine {
	background: none;
	position: relative;
	display: inline-block
}

_:-ms-lang(x)::-ms-backdrop,
.secAboutCurrent .secAboutCurrentList li a .hasLine:after {
	content: "";
	background: #2466AF;
	display: block;
	width: 0;
	height: 1px;
	position: absolute;
	bottom: 0;
	left: 0;
	transition: all .3s
}

_:-ms-lang(x)::-ms-backdrop,
.secAboutCurrent .secAboutCurrentList li a:hover .hasLine:after {
	width: 100%
}

.remodal {
	height: inherit
}

@media screen and (min-width: 1025px) {
	.remodal {
		max-width: 60%
	}
}

.embed-container .iframeCover {
	position: relative;
	width: 100%;
	padding-top: 56.25%
}

.embed-container .iframeCover iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%
}

.remodal-close {
	color: #fff;
	margin: 0;
	padding: 0;
	cursor: pointer;
	text-decoration: none;
	border: 0;
	outline: 0;
	transition: all .3s;
	width: 45px;
	height: 45px;
	line-height: 45px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #2466AF;
	border-radius: 50%;
	position: absolute;
	bottom: -60px;
	left: 50%;
	transform: translateX(-50%)
}

.remodal-close:before {
	right: 0
}

@media screen and (min-width: 769px) {
	.remodal-close {
		transform: translateX(0);
		left: inherit;
		width: 60px;
		height: 60px;
		top: -30px;
		right: -30px
	}
}

.remodal-close:hover,
.remodal-close:focus {
	background: #000
}

.remodal-close:before {
	font-family: YakuHanJP, "Noto Sans JP", sans-serif;
	font-size: 24px;
	line-height: 45px;
	width: 45px;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	display: block;
	content: "×";
	text-align: center
}

@media screen and (min-width: 769px) {
	.remodal-close:before {
		line-height: 60px;
		width: 60px
	}
}