@charset "utf-8";
/*------------------------------------------------------------
	philosophy
------------------------------------------------------------*/
#container {
	padding-top: 0;
}
#main .bgBox {
	padding: 25.4rem 0 20rem;
	position: relative;
	clip-path: inset(0);
}
#main .movieBox {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	overflow: hidden;
	z-index: -1;
}
#main .movieBox img,
#main .movieBox video {
	opacity: 0.22;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#main .movieBox::before,
#main .movieBox::after {
	width: 100%;
	height: 30.9rem;
	position: absolute;
	top: 0;
	left: 0;
	background: url("../img/company/philosophy/top_bg.png") no-repeat left top / 100% 100%;
	content: "";
}
#main .movieBox::after {
	height: 44rem;
	top: auto;
	bottom: 0;
	background-image: url("../img/company/philosophy/btm_bg.png");
}
#main .pageVisual05 {
	margin: 0;
}
#main .pageVisual05 .headLine10 {
	font-size: 1.6rem;
}
#main .pageVisual05 .headLine10 .en {
	margin-bottom: 1.4rem;
	font-size: 4.6rem;
}
#main .pageVisual05 .headLine10 .small {
	margin-bottom: 3.5rem;
	font-size: 2.2rem;
}
#main .h2Title {
	margin: -15.6rem 0 24rem 43rem;
	color: #7A003D;
	font-size: 2.8rem;
	font-weight: 500;
	line-height: 2.07;
	position: relative;
	z-index: 10;
	letter-spacing: 0.3em;
}
#main .h2Title img {
	width: 64.5rem;
}
#main .h2Title .jp {
	margin-bottom: 4.7rem;
	display: block;
}
#main .sec01 {
	margin: 0 auto 23rem;
	max-width: 93.8rem;
}
#main .sec01 .subBox {
	margin-bottom: 23rem;
	padding-left: 17.6rem;
	position: relative;
}
#main .sec01 .subBox:last-child {
	margin-bottom: 0;
}
#main .sec01 .subBox p {
	line-height: 2.5;
	letter-spacing: 0.12em;
}
#main .sec01 .title {
	margin-bottom: 4rem;
	color: #820042;
	font-size: 2.7rem;
	font-weight: bold;
	letter-spacing: 0.2em;
}
#main .sec01 .title .en {
	display: block;
	font-size: 6rem;
	font-family: "Urbanist", sans-serif;
	line-height: 1.2;
	font-weight: 100;
	letter-spacing: 0.01em;
	margin-bottom: 2.6rem;
}
#main .sec01 .subBox02 .title {
	color: #982581;
}
#main .sec01 .subBox02 .enTitle {
	width: 7.3rem;
	right: 1.6rem;
	color: #982581;
}
#main .sec01 .subBox02 .enTitle .line {
	background-color: #982581;
}
#main .enTitle {
	color: #830242;
	width: 5.6rem;
	height: calc(100% - 1.3rem);
	position: absolute;
	top: 1.3rem;
	left: 0;
	line-height: 1;
	font-size: 4rem;
	font-weight: 600;
}
#main .enTitle .line {
	width: 1px;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	background-color: #830242;
}
#main .sec02 {
	margin: 0 auto;
	max-width: 1100px;
	padding-left: 6.4rem;
	position: relative;
}
#main .sec02 .enTitle {
	color: #AA256D;
	left: 0.9rem;
	top: -0.2rem;
}
#main .sec02 .enTitle .line {
	background-color: #AA256D;
}
#main .sec02 .listUl li {
	padding: 0 0 2.6rem 5rem;
	border-bottom: 1px solid rgba(170,38,109, 0.4);
	display: flex;
	margin-bottom: 3.2rem;
}
#main .sec02 .listUl li:last-child {
	margin-bottom: 0;
	padding-bottom: 4.1rem;
	border-bottom: none;
}
#main .sec02 .listUl .title {
	margin-top: 0.4rem;
	width: 42.2rem;
	color: #AA256D;
	font-size: 2.7rem;
	font-weight: bold;
	line-height: 1;
	letter-spacing: 0.08em;
}
#main .sec02 .listUl .title .en {
	margin-bottom: 0.8rem;
	font-weight: 200;
	opacity: 0.7;
	font-family: "Jost", sans-serif;
	font-size: 1.7rem;
	display: block;
	letter-spacing: 0.04em;
}
#main .sec02 .listUl .right {
	flex: 1;
	font-size: 1.5rem;
	line-height: 2;
	letter-spacing: 0.08em;
}
#main .sec03 {
	margin: 0 15px;
	padding: 12.3rem 0 16.8rem;
	border: 1px solid #984273;
	position: relative;
}
#main .sec03 .title {
	margin-bottom: 6rem;
	color: #8B0051;
	text-align: center;
	font-size: 2.8rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	position: relative;
	z-index: 10;
}
#main .sec03 .title img {
	width: 40rem;
}
#main .sec03 .title span {
	display: block;
}
#main .sec03 .title .jp {
	margin-bottom: 4rem;
}
#main .sec03 .title .en {
	color: #AA256D;
	font-family: "Urbanist", sans-serif;
	font-weight: 600;
	font-size: 1.4rem;
	line-height: 1.42;
	white-space: nowrap;
	display: block;
}
#main .imgBox {
	margin: 0 auto;
	width: 75rem;
	position: relative;
}
#main .imgBox .photoBox {
	position: relative;
}
#main .imgBox .imgUl li {
	width: 23rem;
	position: absolute;
	top: 1.5rem;
}
#main .imgBox .imgUl .img01 {
	left: 12.4rem;
}
#main .imgBox .imgUl .img02 {
	top: 9.9rem;
	left: 25.9rem;
	z-index: 10;
}
#main .imgBox .imgUl .img03 {
	right: 13rem;
	left: auto;
}
#main .imgBox .textImg {
	width: 100%;
	position: absolute;
	text-align: center;
	bottom: -5.1rem;
	left: 0;
	margin-left: 0.4rem;
}
#main .imgBox .textImg img {
	width: 25rem;
}
#main .imgBox .arrow {
	width: 100%;
	position: absolute;
	text-align: center;
	top: -10.5rem;
	left: 0;
}
#main .imgBox .arrow img {
	width: 15.6rem;
}
#main .imgBox .txtUl li {
	position: absolute;
	top: -1.5rem;
	left: -19.8rem;
	font-weight: 500;
	font-size: 1.5rem;
	white-space:nowrap;
	line-height: 1.73;
	letter-spacing: 0.1em;
	z-index: 10;
}
#main .imgBox .txtUl li::before {
	width: 181px;
	height: 1px;
	opacity: 0.59;
	position: absolute;
	bottom: 1.1rem;
	left: calc(100% - 0.8rem);
	background-color: #B2B2B2;
	content: "";
}
#main .imgBox .txtUl li::after {
	position: absolute;
	left: calc(100% + 13rem);
	width: 14rem;
	height: 14rem;
	transform: rotate(45deg);
	content:"";
	top: 3rem;
}
#main .imgBox .txtUl li.txt02::after {
	left: calc(100% + 24rem);
	top: -4rem;
}
#main .imgBox .txtUl li.txt03::after {
	left: calc(100% - 7rem);
	top: -4rem;
    width: 30rem;
    height: 8rem;
    transform: rotate(31deg);
}
#main .imgBox .txtUl li.txt04::after {
	left: calc(100% - 48rem);
    top: 0rem;
    width: 14rem;
    height: 14rem;
    transform: rotate(45deg);
}
#main .imgBox .txtUl li.txt05::after {
    left: calc(100% - 44.4rem);
    top: -11rem;
    width: 8rem;
    height: 34rem;
    transform: rotate(57deg);
}
#main .imgBox .txtUl li.txt06::after {
	left: calc(100% - 70.4rem);
    top: 5rem;
    width: 23rem;
    height: 8rem;
    transform: rotate(0deg);
}
#main .imgBox .txtUl .right {
    left: auto;
    top: 0;
    right: -17.3rem;
}
#main .imgBox .txtUl .right::before {
	margin-top: -1px;
    width: 13.8rem;
    bottom: auto;
    top: 50%;
    left: auto;
    right: calc(100% + 1.6rem);
}
#main .imgBox .txtUl .txt02 {
	top: 14.8rem;
}
#main .imgBox .txtUl .txt02::before {
	width: 26.9rem;
	top: 13px;
	bottom: auto;
}
#main .imgBox .txtUl .txt03 {
	top: 29.2rem;
}
#main .imgBox .txtUl .txt03::before {
    width: 10.9rem;
    top: 11px;
    left: calc(100% - 4.6rem);
    bottom: auto;
}
#main .imgBox .txtUl .txt05 {
    top: 22rem;
    right: -18.7rem;
}
#main .imgBox .txtUl .txt05::before {
	margin-top: 0;
	width: 13.1rem;
	top: auto;
	bottom: 1rem;
}
#main .imgBox .txtUl .txt06 {
    top: 34.2rem;
    right: -21.6rem;
}
#main .imgBox .txtUl .txt06::before {
	width: 19.9rem;
}
#main .wayBox {
	padding: 31rem 0 12rem;
}
#main .wayBox .h2Title02 {
	margin-bottom: 19.1rem;
	text-align: center;
	font-size: 2.7rem;
	color: #A70F67;
	font-weight: 500;
}
#main .wayBox .h2Title02 span {
	display: block;
	margin-top: 5rem;
	letter-spacing: 0.4rem;
}
#main .wayBox .h2Title02 img {
	width: 27.8rem;
}
#main .wayBox .content {
    max-width: 106rem;
}
#main .wayBox .title {
	margin-bottom: 8.2rem;
	color: #A70F67;
	font-size: 3rem;
	font-weight: 500;
	line-height: 1.55;
	letter-spacing: 0.15em;
}
#main .wayBox .title.col {
	color: #901859;
}
#main .wayBox .title span {
	display: block;
}
#main .wayBox .title .en {
	margin: 0 0 18px 0;
	font-family: "Urbanist", sans-serif;
	font-size: 8rem;
	font-weight: 100;
	line-height: 1;
	letter-spacing: -0.01em;
}
#main .wayBox .title .jp {
	font-size: 4.5rem;
}
#main .wayBox .title .num {
	margin: 0 0 1rem 5px;
	font-size: 1.6rem;
	letter-spacing: 0.08em;
}
#main .wayBox .showList {
	margin: -5rem -7.7rem 0 0.5rem;
	display: flex;
	flex-wrap: wrap;
}
#main .wayBox .showList li {
	margin: 5rem 7.7rem 0 0;
	padding-left: 2.4rem;
	color: #080808;
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 2.133;
	letter-spacing: 0.05em;
	position: relative;
}
#main .wayBox .showList02 li {
    margin-right: 4.6rem;
    padding-left: 1.7rem;
}
#main .wayBox .showList li::before,
#main .wayBox .showList li::after {
	width: 1px;
	height: calc(100% - 0.8rem);
	position: absolute;
	top: 0;
	left: 0;
	background-color: #D0D0D0;
	content: "";
}
#main .wayBox .showList li::after {
	height: 3.3rem;
	background-color: #AA266D;
}
#main .wayBox .showList .subTitle {
	font-size: 2.5rem;
	margin-bottom: 3.3rem;
	font-weight: bold;
	line-height: 1.12;
}
#main .wayBox .subBox {
	margin-bottom: 20rem;
}
#main .wayBox .subBox:last-child {
	margin-bottom: 0;
}
#main .slideBox .imgUl {
	display: flex;
	font-size: 0;
	line-height: 1;
}
#main .slideBox .imgUl li {
	width: 42.6rem;
	flex-shrink: 0;
	position: relative;
}
#main .slideBox .imgUl li::before {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: #99CDE8;
	opacity: 0.1;
	content: "";
}
#main .slideBox .imgUl img {
	width: 100%;
}
@media all and (min-width: 1000px) {
	#gFooter {
		margin-top: 0;
	}
	#main .enTitle .en {
		white-space: nowrap;
		display: block;
		transform: rotate(90deg);
		position: absolute;
		top: 11px;
		left: 15px;
		width: 30px;
		height: 10px;
	}
	#main .enTitle.right {
		left: auto;
		right: 0;
	}
	#main .enTitle.right .line {
		right: auto;
		left: 0;
	}
	#main .enTitle.right .en {
		left: auto;
		right: 0;
	}
	#main .sec03 .title .en {
		width: 1rem;
		height: 1rem;
		white-space: nowrap;
		transform: rotate(90deg);
		position: absolute;
		top: -10.1rem;
		left: 50px;
		letter-spacing: 0.03em;
	}
	#main .imgBox .txtUl li {
		opacity: 0.3;
		transition: .15s;
		cursor: pointer;
	}
	#main .imgBox .txtUl li:hover {
		opacity: 1;
		font-size: 1.55rem;
	}
	.comPageBox {
		margin: 0;
	}
}
@media all and (max-width: 999px) {
	#main .pageVisual05 {
		margin-bottom: 5.9rem;
		padding-top: 0;
	}
	#main .bgBox {
		padding: 11.8rem 0 5rem;
	}
	#main .pageVisual05 .headLine10 {
		font-size: 1.3rem;
	}
	#main .pageVisual05 .headLine10 .en {
		margin-bottom: 1rem;
		font-size: 3.7rem;
	}
	#main .pageVisual05 .headLine10 .small {
		margin-bottom: 1.7rem;
		font-size: 1.8rem;
	}
	#main .h2Title {
		margin: 0 -0.6rem 11.3rem;
		font-size: 2rem;
		font-weight: 500;
	}
	.pad #main .h2Title {
		margin: -18rem -0.6rem 11.3rem 22rem;
	}
	#main .h2Title .jp {
		margin-bottom: 2.1rem;
	}
	body:not(.pad) #main .enTitle {
		margin-bottom: 2.5rem;
		width: auto;
		height: auto;
		position: relative;
		top: auto;
		left: auto;
		font-size: 3rem;
	}
	#main .sec01 .subBox {
		margin-bottom: 9rem;
		padding-left: 0;
	}
	body:not(.pad) #main .enTitle .line {
		width: calc(100% + 3rem);
		height: 1px;
		top: auto;
		right: auto;
		left: -3rem;
		bottom: 5px;
	}
	#main .sec01 .title .en {
		margin-bottom: 1.8rem;
		font-size: 2.8rem;
		line-height: 1.28;
	}
	#main .sec01 .title {
		margin-bottom: 2.3rem;
		font-size: 2.2rem;
		line-height: 1.6;
	}
	#main .sec01 .subBox p {
		line-height: 2.07;
		letter-spacing: 0.05em;
		font-size: 1.3rem;
	}
	#main .sec01 .subBox02 .enTitle {
		width: auto;
		right: auto;
		text-align: right;
	}
	#main .sec01 .subBox02 .enTitle .line {
		left: auto;
		right: -3rem;
	}
	#main .sec02 .listUl li {
		padding: 0 0 2.4rem 3rem;
		display: block;
		margin-bottom: 2.2rem;
	}
	body:not(.pad) #main .sec02 {
		margin: 0 0 0 -3rem;
		padding-left: 0;
	}
	#main .sec01 {
		margin-bottom: 11.1rem;
	}
	body:not(.pad) #main .sec02 .enTitle {
		margin-bottom: 2.4rem;
		left: auto;
		top: auto;
		padding-left: 3rem;
	}
	#main .sec02 .listUl .title {
		margin: 0 0 1.4rem;
		width: auto;
		font-size: 2rem;
		letter-spacing: 0.08em;
	}
	#main .sec02 .listUl .title .en {
		margin-bottom: 0.6rem;
	}
	#main .sec02 .listUl .right {
		font-size: 1.4rem;
		line-height: 1.71;
	}
	body:not(.pad) #main .sec02 .listUl li:last-child {
		margin-bottom: 0;
		padding-bottom: 2.4rem;
		border-bottom: 1px solid rgba(170,38,109, 0.4);
	}
	#main .sec03 {
		margin: 0;
		padding: 69px 0;
		border: none;
		position: relative;
	}
	#main .sec03 .title .en {
		margin-bottom: 5.2rem;
		letter-spacing: 0.05em;
		line-height: 1.5;
		position: relative;
	}
	#main .sec03 .title .en::after {
		margin-left: -1.6rem;
		width: 3.2rem;
		height: 1px;
		position: absolute;
		left: 50%;
		bottom: -2rem;
		background-color: #820042;
		content: "";
	}
	#main .sec03 .title {
		margin-bottom: -2.6rem;
		font-size: 1.8rem;
		line-height: 1.9;
	}
	#main .sec03 .title img {
		width: 20rem;
	}
	#main .sec03 .title .jp {
		margin-bottom: 1.7rem;
	}
	#main .sec03 .scrollBox {
		overflow-x: auto;
	}
	#main .sec03 .scrollBox .scrollWid {
		min-width: 74rem;
		overflow: hidden;
	}
	#main .imgBox {
		padding: 5.6rem 0 0 0;
		width: 37.6rem;
		height: 32rem;
	}
	#main .imgBox .imgUl li {
		width: 11.4rem;
	}
	#main .imgBox .textImg img {
		width: 12.6rem;
	}
	#main .imgBox .textImg {
		margin-left: 0.2rem;
		bottom: -2.6rem;
	}
	#main .imgBox .imgUl .img03 {
		right: 6.6rem;
		left: auto;
		top: 0.9rem;
	}
	#main .imgBox .imgUl .img02 {
		top: 5.2rem;
		left: 13.1rem;
	}
	#main .imgBox .imgUl li {
		width: 11.4rem;
		top: 0.9rem;
	}
	#main .imgBox .imgUl .img01 {
		left: 6.3rem;
	}
	#main .imgBox .arrow img {
		width: 7.8rem;
	}
	#main .imgBox .arrow {
		top: -5.2rem;
	}
	#main .imgBox .txtUl li {
		top: 3.5rem;
		left: -15rem;
		font-size: 1.1rem;
		line-height: 1.5;
		letter-spacing: 0.1em;
	}
	#main .imgBox .txtUl .right {
		left: auto;
		top: 25px;
		right: -13rem;
	}
	#main .imgBox .txtUl .txt04 {
		background-color: rgba(255,255,255,0.8);
	}
	#main .imgBox .txtUl .txt05 {
		top: 14.7rem;
		right: -13.8rem;
	}
	#main .imgBox .txtUl .txt06 {
		top: 21.9rem;
		right: -15.6rem;
	}
	#main .imgBox .txtUl .txt02 {
		top: 12.7rem;
		left: -15.8rem;
	}
	#main .imgBox .txtUl .txt03 {
		top: 20.7rem;
		left: -15.3rem;
	}
	#main .imgBox .txtUl .txt01::before {
		width: 9rem;
	}
	#main .imgBox .txtUl .txt02::before {
		width: 134px;
		top: 8px;
		bottom: auto;
	}
	#main .imgBox .txtUl .txt03::before {
		width: 47px;
		top: 9px;
		left: calc(100% - 3.4rem);
		bottom: auto;
	}
	#main .imgBox .txtUl .right::before {
		right: calc(100% + 1rem);
	}
	#main .imgBox .txtUl .txt04::before {
		width: 6.9rem;
		top: auto;
		margin: 0;
		bottom: 0.9rem;
	}
	#main .imgBox .txtUl .txt05::before {
		width: 4.3rem;
	}
	#main .imgBox .txtUl .txt06::before {
		width: 9.9rem;
	}
	#main .arrowImg {
		text-align: center;
	}
	#main .arrowImg img {
		width: 16.5rem;
	}
	#main .wayBox {
		padding: 13.2rem 0 7rem;
	}
	#main .wayBox .h2Title02 img {
		width: 15.2rem;
	}
	#main .wayBox .title .en {
		margin-bottom: 0.9rem;
		font-size: 4.5rem;
		line-height: 1.12;
	}
	#main .wayBox .title {
		margin-bottom: 5.2rem;
		font-size: 2.2rem;
	}
	#main .wayBox .h2Title02 {
		margin-bottom: 6.9rem;
		font-size: 1.7rem;
	}
	#main .wayBox .title .num {
		margin: 0 0 4px 5px;
	}
	#main .wayBox .showList {
		margin: 0 0 0 0;
		display: block;
	}
	#main .wayBox .showList .subTitle {
		margin-bottom: 1.2rem;
		font-size: 2rem;
		line-height: 1.35;
	}
	#main .wayBox .showList li {
		margin: 0 0 3rem;
		padding-left: 2.6rem;
		font-size: 1.3rem;
		line-height: 1.92;
		letter-spacing: 0.1em;
	}
	#main .wayBox .showList li:last-child {
		margin-bottom: 0;
	}
	#main .wayBox .subBox {
		margin-bottom: 7.4rem;
	}
	#main .wayBox .title .jp {
		margin-right: -3rem;
		font-size: 2.5rem;
	}
	#main .slideBox .imgUl li {
		width: 25.6rem;
	}
	.pagePath {
		margin-top: 4rem;
	}
}

/* tablet */
.pad .bgBox .content {
	width: calc(100% - 10rem);
}
.pad #main .enTitle .en {
	white-space: nowrap;
	display: block;
	transform: rotate(90deg);
	position: absolute;
	top: 11px;
	left: 15px;
	width: 30px;
	height: 10px;
}
.pad #main .sec01 .subBox {
	padding-left: 11rem;
	width: calc(100% - 11rem);
}
.pad #main .sec01 .subBox02 {
	width: auto;
}
.pad #main .enTitle.right {
	left: auto;
	right: 0;
}
.pad #main .enTitle.right .line {
	right: auto;
	left: 0;
}
.pad #main .enTitle.right .en {
	left: auto;
	right: 0;
}
.pad #main br.sp {
	display: none;
}

/* animate */
#main .animate .line {
	height: 0;
	transition: 1s ease;
}
#main .animate.visible .line {
	height: 100%;
}
#main .sec03 .title .jp,
#main .sec03 .title img,
#main .sec03 .imgBox .txtUl,
#main .sec03 .imgBox .arrow,
#main .sec03 .imgBox .textImg,
#main .sec03 .image {
	opacity: 0;
	transition: .5s ease;
}
#main .sec03 .imgBox .imgUl li {
	opacity: 0;
	transform: translateY(-100%);
	transition: .5s ease;
}
#main .sec03.play .image {
	opacity: 1;
}
#main .sec03.play .imgBox .imgUl li {
	opacity: 1;
	transform: translateY(0);
	transition-delay: .7s;
}
#main .sec03.play .imgBox .imgUl li:nth-child(2) {
	transition-delay: .5s;
}
#main .sec03.play .imgBox .imgUl li:nth-child(3) {
	transition-delay: .9s;
}
#main .sec03.play .imgBox .arrow,
#main .sec03.play .imgBox .textImg {
	opacity: 1;
	transition-delay: 1.4s;
}
#main .sec03.play .title .jp,
#main .sec03.play .title img,
#main .sec03.play .imgBox .txtUl {
	opacity: 1;
	transition-delay: 1.9s;
}
#main .wayBox .arrowBg {
	position: fixed;
	z-index: -1;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	overflow: hidden;
	opacity: 0;
	transition: .3s;
}
#main .wayBox .arrowBg.show {
	opacity: 1;
}
#main .wayBox .arrowBox {
	position: absolute;
	left: -20%;
	top: 0;
	width: 140%;
	height: 100%;
	transform: rotate(-27deg);
}
#main .wayBox .arrowBox .arrow {
	position: absolute;
	left: 0;
	top: 0;
	aspect-ratio: 1791/717;
	background: url(../img/company/philosophy/arrow02.png) no-repeat right center / cover;
	animation: arrowmove 10s linear infinite;
	opacity: 0.5;
}
@keyframes arrowmove {
	0% {
		transform: translateX(-100%);
	}
	100% {
		transform: translate(140vw);
	}
}
#main .wayBox .arrowBox .arrow01 {
	top: 20%;
	height: 27.7rem;
}
#main .wayBox .arrowBox .arrow02 {
	top: 35%;
	height: 35.8rem;
	animation-duration: 6.5s;
	animation-delay: .2s;
}
#main .wayBox .arrowBox .arrow03 {
	top: 50%;
	height: 18.4rem;
	animation-duration: 5s;
	animation-delay: .5s;
}
#main .wayBox .arrowBox .arrow04 {
	top: 60%;
	height: 27.7rem;
	animation-duration: 7s;
}
#main .wayBox .arrowBox .arrow05 {
	top: 70%;
	height: 15.5rem;
	animation-duration: 8s;
	animation-delay: .5s;
}
#main .wayBox .arrowBox .arrow06 {
	top: 80%;
	height: 13rem;
	animation-delay: .2s;
}
#main .wayBox .arrowBox .arrow07 {
	top: 90%;
	height: 35.8rem;
	animation-duration: 7.5s;
}
@media all and (min-width: 1000px) and (max-width: 1260px) {
	#main .scrollBox {
		transform: scale(0.75);
	}
}
@media all and (max-width: 999px) {
	body:not(.pad) #main .animate .line.toright {
		height: 1px;
		clip-path: inset(0 100% 0 0);
	}
	body:not(.pad) #main .animate .line.toleft {
		height: 1px;
		clip-path: inset(0 0 0 100%);
	}
	body:not(.pad) #main .animate.visible .line {
		height: 1px;
		clip-path: inset(0 0 0 0);
	}
	body:not(.pad) #main .wayBox .arrowBox .arrow01 {
		height: 14.3rem;
	}
	body:not(.pad) #main .wayBox .arrowBox .arrow02 {
		height: 7.3rem;
	}
	body:not(.pad) #main .wayBox .arrowBox .arrow03 {
		height: 5.2rem;
	}
	body:not(.pad) #main .wayBox .arrowBox .arrow04 {
		height: 6.2rem;
	}
	body:not(.pad) #main .wayBox .arrowBox .arrow05 {
		height: 14.3rem;
	}
	body:not(.pad) #main .wayBox .arrowBox .arrow06 {
		height: 15.2rem;
	}
	body:not(.pad) #main .wayBox .arrowBox .arrow07 {
		height: 9.8rem;
	}
}
#main .videoSec {
	margin-top: 14.8rem;
}
#main .videoSec .videoBox {
	position: relative;
	margin: 0 auto;
	max-width: 118.8rem;
	width: calc(100% - 12rem);
	z-index: 10;
}
#main .videoSec .videoBox video {
	width: 100%;
	height: auto;
	display: block;
}
#main .videoSec .videoBox .rightTxt {
	font-family: "Urbanist", sans-serif;
	position: absolute;
	top: 47.5%;
	right: -9.3rem;
	transform: translateY(50%) rotate(90deg);
	font-weight: 600;
	font-size: 1.4rem;
	letter-spacing: 0.05em;
	color: #aa256d;
}
#main .videoSec .videoBox .bottomTxt {
	position: absolute;
	left: 0;
	bottom: -3.8rem;
}
#main .videoSec .videoBox .bottomTxt a {
	padding-left: 1.5rem;
	display: block;
	font-family: "Urbanist", sans-serif;
	font-weight: 600;
	font-size: 1.4rem;
	letter-spacing: 0.05em;
	color: #aa256d;
	background: url(../img/company/philosophy/sound.png) no-repeat left 40% / 0.8rem auto;
}
#main .videoSec .videoBox .bottomTxt a.hover {
	opacity: 0.7;
}
@media all and (max-width: 999px) {
	#main .videoSec {
		margin-top: 4.7rem;
	}
	#main .videoSec .videoBox {
		width: 100%;
	}
	#main .videoSec .videoBox .rightTxt {
		display: none;
	}
	#main .videoSec .videoBox .bottomTxt {
		left: 2.5rem;
		bottom: -4.5rem;
	}
	#main .videoSec .videoBox .bottomTxt a {
		padding-left: 1.6rem;
		font-size: 1.5rem;
		background-size: 0.95rem auto;
	}
}
/* popup */
html {
	margin-right: 0 !important;
	overflow: auto !important;
}
body {
	--popfade: 300ms;
}
.mfp-fade {
	animation: popfade var(--popfade) forwards;
}
.mfp-container {
	padding: 0;
}
.mfp-content {
	max-width: 100vw;
	max-height: calc(100vh - 15rem);
	aspect-ratio: 16/9;
	width: auto !important;
	height: auto !important;
}
.mfp-content .video,
.mfp-content video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.mfp-content .mfp-close {
	position: fixed;
	right: 3rem;
	top: 3rem;
	width: 2.4rem;
	height: 2.4rem;
	font-size: 0;
	opacity: 1;
}
.mfp-content .mfp-close::after,
.mfp-content .mfp-close::before {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 3.4rem;
	height: 0.1rem;
	background-color: #fff;
	transform: translate(-50%,-50%) rotate(45deg);
	content: "";
}
.mfp-content .mfp-close::after {
	transform: translate(-50%,-50%) rotate(-45deg);
}
.mfp-bg {
	z-index: 99990;
}
.mfp-wrap {
	z-index: 99991;
}
.mfp-removing {
	animation: popout var(--popfade) forwards;
}
@keyframes popfade {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes popout {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@media all and (max-width: 999px) {
	.mfp-wrap {
		position: fixed !important;
		top: 0 !important;
	}
	.mfp-content {
		max-width: 100%;
		max-height: 100%;
	}
	.mfp-content .mfp-close {
		position: fixed;
		top: 3rem;
		right: 3rem;
	}
}
@media all and (max-width: 999px) and (orientation: landscape) {
	.mfp-content {
		max-width: calc(100% - 12rem);
		max-height: 100%;
	}
	
}