@charset "UTF-8";

#policy .policy-movie{
	display: none;
}
.sj-kv-slide-wrap{
	opacity: 0;
	transform: translateX(30px);
}
.sj-kv-slide-wrap.on{
	opacity: 1;
	transform: translateX(0);
	transition: transform 1500ms ease,opacity 1500ms ease;
}
.sj-sec-header{
	opacity: 0;
	transform: translateX(-20px);
}
.sj-sec-header.on{
	opacity: 1;
	transform: translateX(0);
	transition: transform 1000ms ease,opacity 1000ms ease;
}

.motion{
	opacity: 0;
	transform: translateY(40px);	
}
.motion.on{
	opacity: 1;
	transform: translateX(0);
	transition: transform 1000ms ease,opacity 1000ms ease;
}

.motion-news{
	opacity: 0;
	transform: translateY(40px);	
}
.motion-news.on{
	opacity: 1;
	transform: translateX(0);
	transition: transform 1000ms ease,opacity 1000ms ease;
}

.motion-fig{
	opacity: 0;
	transform: translateY(40px);	
}
.motion-fig.on{
	opacity: 1;
	transform: translateX(0);
	transition: transform 1000ms ease,opacity 1000ms ease;
}


@keyframes loading{
	0%{opacity: 1;}
	25%{opacity: 0;}
	35%{opacity: 0;}
	50%{opacity: 1;}
	100%{opacity: 1;}
}

.sj-loading{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #fff;
	z-index: 10100;
	transition: all 400ms ease;
}


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


	.sj-loading span{
		position: absolute;
		margin: auto;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100px;
		height: 100px;
		background: #fbdce4;
		visibility: hidden;
	}
	.sj-loading span.on{
		visibility: visible;
	}
	.sj-loading span em{
		position: absolute;
		margin: auto;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		background: url(../img/loading.svg);
		background-size: 100% 100%;
		z-index: 50;
	}
	.sj-loading span i{
		position: absolute;
		margin: auto;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 0;
		background: #ea658b;
		transition: height 400ms ease;
		z-index: 30;
		will-change: height;
	}
	.sj-loading.remove{
		opacity: 0;
		visibility: hidden;
	}

	/* kv
	======================================================*/
	.sj-kv{
		position: relative;
		width: 100%;
	}
	.sj-kv:before{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 100%;
		background: #fff;
	}
	.sj-kv-slide-wrap{
		position: relative;
		width: 100%;
		height: 630px;
		border-radius: 0 0 60px 0;
		overflow: hidden;
		will-change: opacity;
	}


	.sj-kv figure{
		position: absolute;
		width: 100%;
		height: 630px;
		z-index: 50;
		opacity: 0;
		visibility: hidden;
	}
	.sj-kv figure.ease{
		transition: all 1000ms ease;
	}
	.sj-kv figure.on{
		opacity: 1;
		visibility: visible;
	}
	.sj-kv figure img{
		position: relative;
		object-fit: cover;
		width: 100%;
		height: 100%;
		z-index: 10;
	}
	.sj-kv figure i{
		position: absolute;
		display: block;
		margin: auto;
		padding: 0 10px;
		max-width: 900px;
		letter-spacing: 2px;
		width: 100%;
		z-index: 20;
		bottom: 120px;
		right: 0;
		left: 0;
		font-size: 46px;
		color: #fff;
		text-shadow: 0 0 30px rgba(0,0,0,1);
	}
	.sj-kv .sj-kv-pager{
		position: absolute;
		right: 60px;
		bottom: 45px;
		z-index: 100;
	}
	.sj-kv .sj-kv-pager{
		display: flex;
	}
	.sj-kv .sj-kv-pager li + Li{
		margin-left: 20px;
	}
	.sj-kv .sj-kv-pager li a{
		display: block;
		width: 10px;
		height: 10px;
		background: #fff;
		border-radius: 5px;
	}
	.sj-kv .sj-kv-pager li a:hover,
	.sj-kv .sj-kv-pager li a.on{
		background: #eb8da0;
	}


	/* News
	======================================================*/
	#news{
		padding: 118px 0;
		background: #fff;
	}
	#news .sj-sec-col{
		position: relative;
		padding: 40px 0 0;
	}

	/* philosophy
	======================================================*/
	#philosophy{
		padding: 82px 0;
		background: #fff;
		box-shadow: 0 0 20px 0 rgba(170,153,157,0.2);
	}
	#philosophy .philosophy-lead{
		margin: 20px 0 0;
		padding: 0 0 0 40px;
		font-size: 18px;
		line-height: 2;
	}
	#philosophy .philosophy-detail{
		position: relative;
		margin: 50px 0 0;
	}
	#philosophy .detail-col + .detail-col{
		margin-top: 20px;
	}

	/*detail-btn*/	
	#philosophy .detail-btn{
		width: 100%;
		box-shadow: 0 0 20px 10px rgba(170,153,157,0.1);
		background: #fff;
		transition: all 400ms ease;
	}
	#philosophy .detail-btn a{
		position: relative;
		display: block;
		width: calc(650% / 12);
		height: 120px;
	}
	#philosophy .detail-btn .btn-inner{
		position: relative;
		display: flex;
		align-items: center;
		margin: auto;
		max-width: 650px;
		height: 100%;
	}
	#philosophy .detail-btn i{
		position: absolute;
		top: 50%;
		left: 100px;
		transform: translateY(-50%);
		font-size: 18px;
		z-index: 20;
	}
	#philosophy .detail-btn figure{
		position: relative;
		margin: auto;
		height: 100%;
		z-index: 10;
	}
	#philosophy .detail-btn figure img{
		height: 100%;
	}
	#philosophy .detail-btn figure span{
		display: block;
		width: 100%;
		height: 100%;
		transition: all 400ms ease;
	}
	#philosophy .detail-btn figure span:nth-child(1){
		position: relative;
		z-index: 10;
	}
	#philosophy .detail-btn figure span:nth-child(2){
		opacity: 0;
		position: absolute;
		top: 0;
		z-index: 20;
	}
	#philosophy .detail-col.on .detail-main{
		visibility: visible;
		opacity: 1;
	}
	#philosophy .detail-col:hover .detail-btn,
	#philosophy .detail-col.on .detail-btn{
		background: #eb8da0;
		color: inherit;
	}
	#philosophy .detail-col:hover .detail-btn i,
	#philosophy .detail-col.on .detail-btn i{
		color: #fff;
	}
	#philosophy .detail-col:hover .detail-btn span:nth-child(2),
	#philosophy .detail-col.on .detail-btn span:nth-child(2){
		opacity: 1;
	}
	#philosophy .detail-col:hover .detail-btn span:nth-child(1),
	#philosophy .detail-col.on .detail-btn span:nth-child(1){
		opacity: 0;
	}
	#philosophy .detail-btn a:after{
		content: "";
		position: absolute;
		margin: auto;
		top: 0;
		right: 7%;
		bottom: 0;
		width: 40px;
		height: 40px;
		border: 1px solid #c1c1c1;
		border-radius: 20px;
		background: url(/shared/img/arrow_r.png) 50% 50% no-repeat;
		background-size: 10px 20px;
		z-index: 20;
	}
	#philosophy .detail-col.on .detail-btn a:after,
	#philosophy .detail-btn a:hover:after{
		border: 1px solid #fff;
		background: url(/shared/img/arrow_r_wh.png) 50% 50% no-repeat;
		background-size: 10px 20px;
	}
	/*detail-main*/
	.detail-main{
		position: absolute;
		right: 0;
		top: 0;
		width: calc(550% / 12);
		height: 100% !important;
		background: #fff;
		z-index: 50;
		border-radius: 50px 0 0 0;
		box-shadow: 0 0 20px 10px rgba(170,153,157,0.1);
		overflow: auto;
		visibility: hidden;
		opacity: 0;
		transition: all 400ms ease;
	}
	/*detail-group*/
	#detail-group .detail-main .detail-main-box{
		display: flex;
		align-items: center;
		padding: 0 60px;
		height: 100%;
	}
	#detail-group .detail-main figure{
		margin: auto;
		max-width: 418px;
	}
	/*detail-philosophy*/
	#detail-philosophy .detail-main .detail-main-box{
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 10px;
		height: 100%;
	}
	#detail-philosophy .detail-main p{
		font-size: 24px;
		text-align: center;
		line-height: 1.8;
	}
	/*detail-charter*/
	#detail-charter .detail-main .detail-main-box{
		padding: 40px;
	}
	#detail-charter .detail-main dl + dl{
		margin-top: 30px;
	}

	#detail-charter .detail-main dt span{
		display: inline-block;
		width: 72px;
	}
	#detail-charter .detail-main dt span img{
		width: auto;
		height: 30px;
	}
	#detail-charter .detail-main dt i{
		width: calc(100% - 72px);
		line-height: 1.3;
	}
	#detail-charter .detail-main dt{
		display: flex;
		align-items: center;
		font-size: 20px;
		color: #eb8da0;
		vertical-align: bottom;
	}
	#detail-charter .detail-main dd{
		margin: 15px 0 0 10px;
		line-height: 1.5;
		font-size: 18px;
	}
	/*detail-policy*/
	#detail-policy .detail-main .detail-main-box{
		display: flex;
		flex-direction: column;
		padding: 70px 0 20px;
		height: 100%;
	}
	#detail-policy .detail-policy-lead{
		padding: 0 20px;
		text-align: center;
		line-height: 1.8;
		font-size: 18px;
	}
	#detail-policy .detail-policy-box{
		margin: 50px 0 0;
		border: 2px solid #eb8da0;
	}
	#detail-policy .detail-policy-box strong{
		margin: -18px auto 0;
		display: block;
		width: 130px;
		text-align: center;
		line-height: 36px;
		font-size: 18px;
		color: #fff;
		border-radius: 18px;
		background: #eb8da0;
	}
	#detail-policy .detail-policy-box ul{
		padding: 25px 0 30px;
		display: flex;
	}
	#detail-policy .detail-policy-box ul li{
		position: relative;
		width: 33.333%;
		text-align: center;
		color: #eb8da0;
		font-size: 20px;
	}
	#detail-policy .detail-policy-box ul li + li:before{
		content: "";
		position: absolute;
		margin: auto;
		top: 0;
		left: -9px;
		bottom: 0;
		display: block;
		width: 19px;
		height: 30px;
		background: url(../img/arrow_policy.png) 0 0 repeat;
		background-size: 100% 100%;

	}
	#detail-policy .detail-policy-disc{
		display: flex;
		flex-grow: 1;
	}
	#detail-policy .detail-policy-disc ul{
		display: flex;
		padding: 20px 0 0;
	}
	#detail-policy .detail-policy-disc ul li{
		position: relative;
		padding: 10px 25px 0;
		width: 33.333%;
		height: 100%;
		line-height: 1.8;
		font-size: 18px;
	}
	#detail-policy .detail-policy-disc ul li + li{
		border-left: 1px solid #fbe8ec;
	}
	/*detail-credo*/
	#detail-credo .detail-main .detail-main-box{
		padding: 40px;
	}
	#detail-credo .detail-main dl + dl{
		margin-top: 30px;
	}
	#detail-credo .detail-main dt span{
		display: inline-block;
		width: 72px;
	}
	#detail-credo .detail-main dt{
		font-size: 24px;
		color: #eb8da0;
		vertical-align: bottom;
		line-height: 1.3;
	}
	#detail-credo .detail-main dd{
		margin: 15px 0 0;
		line-height: 1.5;
		font-size: 18px;
	}

	/* policy
	======================================================*/

	#policy{
		position: relative;
		background: #fff;
		z-index: 20;
	}
	#policy article{
		box-shadow: 0 0 20px 0 rgba(170,153,157,0.2);
		border-radius: 0 0 50px 0;
		overflow: hidden;
	}
	#policy .policy-contents-header-wrap{
		padding: 70px 0 50px;
		background: url(../img/texture_perple.jpg) 0 0 repeat;
		border-radius: 0 0 50px 0;
		overflow: hidden;
	}
	#policy .policy-contents-header{
		position: relative;
		margin: 0 auto;
		max-width: 1120px;
	}
	#policy .policy-contents-title{
		position: relative;
	}
	#policy .sj-sec-header{
		position: relative;
		padding: 0 0 30px;
	}
	#policy .sj-sec-header i{
		color: #fff;
	}
	#policy .policy-header-catch{
		position: absolute;
		right: 0;
		bottom: 0;
		width: 60%;
		height: 60px;
		line-height: 60px;
		color: #fff;
		font-size: 24px;
		letter-spacing: 4px;
		border-top: 1px solid #fff;
	}

	#policy .policy-header-lead{
		padding: 30px 0 0;
		display: flex;
		justify-content: flex-end;
		border-top: 1px solid #fff;

	}
	#policy .policy-header-lead-inner{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 3% 0 0;
		width: 60%;
	}
	#policy .policy-header-lead-inner p{
		width: calc(100% - 3% - 60px);
		font-size: 18px;
		color: #fff;
		line-height: 2.4;
	}
	#policy .policy-header-lead .btn-pd-icon{
		width: 60px;
		height: 60px;
	}
	#policy .policy-header-lead .btn-pd-icon span{
		position: relative;
		display: block;
		width: 100%;
		height: 100%;
	}
/*	#policy .policy-header-lead .btn-pd-icon span:hover{
		opacity: 0.7;
		transition: opacity 400ms ease;
	}*/
	#policy .policy-header-lead .btn-pd-icon span i{
		position: absolute;
		margin: auto;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 2px;
		background: #fff;
		transition: transform 400ms ease;
	}
	#policy .policy-header-lead .btn-pd-icon span i:nth-child(2){
		transform: rotate(90deg);
	}
	#policy .open .policy-header-lead .btn-pd-icon span i:nth-child(2){
		transform: rotate(0);
	}
	#policy .policy-movie{
		padding: 0 10px;
	}
	#policy .policy-player-wrap{
		padding: 75px 0;
		margin: auto;
		max-width: 800px;
	}
	#policy .policy-player{
		position: relative;
		padding-top: 56.25%;
	}
	#policy .policy-player iframe{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	#policy .btn-pd{
		display: block;
		transition: opacity 400ms ease;
	}
	#policy .btn-pd:hover{
		opacity: 0.8;
	}

	/* message
	======================================================*/

	#message{
		padding: 130px 0 110px;
		background: #fff;
	}
	#message .sj-message-detail{
		margin: auto;
		padding: 30px 0 0;
		max-width: 790px;
	}
	#message .sj-message-detail p{
		font-size: 18px;
		line-height: 1.8;
	}
	#message .sj-message-detail p + p{
		margin-top: 40px;
	}
	#message .sj-message-credit{
		display: flex;
		padding: 45px 0 0;
		justify-content: flex-end;
	}
	#message .sj-message-credit dt{
		line-height: 1.8;
		font-size: 18px;
	}
	#message .sj-message-credit dd{
		margin: 25px 0 0;
		text-align: right;
	}
	#message .sj-message-credit dd span{
		display: inline-block;
		width: 154px;
	}

	/* service
	======================================================*/

	#service{
		padding: 80px 0 90px;
	}
	#service .sj-sec-header strong{
		color: #fff;
	}
	#service .service-slide-contents{
		position: relative;
		margin: 30px 0 0;
	}	
	#service .service-slide-container{
		position: absolute;
		margin: auto;
		left: 50%;
		width: 1580px;
		transform: translateX(-50%);
	}	
	#service .service-slide-wrap{
		display: flex;
	}
	#service .service-detail{
		padding: 35px 0;
		border-bottom: 1px solid #aa999d;
	}
	#service .service-detail h3{
		padding: 35px 0;
		text-align: center;
		font-size: 24px;
		color: #aa999d;
		border-top: 1px solid #aa999d;
		border-bottom: 1px solid #aa999d;
	}
	#service .service-slide-item{
		position: relative;
		display: flex;
		flex-direction: column;
		padding: 35px 35px 50px;
		background: #fff;
		height: auto;
		border-radius: 30px;
		opacity: 0.6;
	}
	#service .service-slide-item:after{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 100%;
		z-index: 20;
	}
	#service .service-slide-item.swiper-slide-active:after{
		display: none;
	}
	#service .service-slide-item.swiper-slide-active{
		opacity: 1;
	}
	#service .service-slide-item figure{
		width: 100%;
		height: 190px;
	}
	#service .service-slide-item figure img{
		object-fit: contain;
		width: 100%;
		height: 100%;
	}
	#service .service-slide-item dl{
		margin: 20px 0 0;
		flex-grow: 1;
	}
	#service .service-slide-item dl dt{
		text-align: center;
		color: #eb8da0;
		font-size: 24px;
		line-height: 1.8;
	}
	#service .service-slide-item dl dt i{
		font-size: 18px;
	}
	#service .service-slide-item dl dd{
		margin: 10px 0 0;
		line-height: 1.8;
		font-size: 18px;
	}
	#service .service-slide-item .sj-btn-link-s{
		margin: 40px auto 0;
		max-width: 300px;
		width: 100%;
	}
	#service .service-slide-pager{
		margin: 30px 0 0;
		font-size: 0;
		text-align: center;
	}
	#service .service-slide-pager span.swiper-pagination-bullet{
		outline: none;
	}
	#service .service-slide-pager span.swiper-pagination-bullet{
		margin: 0 8px;
		width: 10px;
		height: 10px;
		border-radius: 5px;
		background: #fff;
		opacity: 1;
		border: 1px solid #ec92a4;
	}
	#service .service-slide-pager span.swiper-pagination-bullet.swiper-pagination-bullet-active{
		background: #ec92a4;
	}
	#service .slide-btn-next{
		position: absolute;
		top: 50%;
		right: 50%;
		margin: -20px -270px 0 0;
		display: block;
		width: 40px;
		height: 40px;
		border: 1px solid #aa999d;
		border-radius: 20px;
		background: #fff url(/shared/img/arrow_r.png) 50% 50% no-repeat;
		background-size: 10px 20px;
		outline: none;
		cursor: pointer;
	}
	#service .slide-btn-prev{
		position: absolute;
		top: 50%;
		left: 50%;
		margin: -20px 0 0 -270px;
		display: block;
		width: 40px;
		height: 40px;
		border: 1px solid #aa999d;
		border-radius: 20px;
		background: #fff url(/shared/img/arrow_l.png) 50% 50% no-repeat;
		background-size: 10px 20px;
		outline: none;
		cursor: pointer;
	}
	#service .slide-btn-next:hover,
	#service .slide-btn-prev:hover{
		opacity: 0.7;
		transition: opacity 400ms ease;
	}

	#service .service-slide-pager-wrap .slide-btn-next,
	#service .service-slide-pager-wrap .slide-btn-prev{
		display: none;
	}
	
	#service .service-management{
		padding: 55px 0 0;
	}
	#service .service-management-col{
		border-radius: 30px;
		background: #fff;
	}
	#service .service-management-col + .service-management-col{
		margin-top: 25px;
	}
	#service .service-management-col dl dt{
		font-size: 24px;
		color: #eb8da0;
	}
	#service .service-management-col dl dd{
		margin: 20px 0 0;
		font-size: 18px;
		line-height: 1.8;
	}
	#service .service-management-col dl dd + dd{
		margin: 15px 0 0;
	}
	#service .service-management-col1{
		padding: 65px 75px;
		display: flex;
		flex-direction: row-reverse;
		align-items: flex-end;
	}
	#service .service-management-col1 figure{
		width: 245px;
	}
	#service .service-management-col1 dl{
		padding: 0 45px 0 0;
		width: calc(100% - 245px);
	}
	#service .service-management-col2{
		padding: 45px 75px;
	}
	#service .service-management-col2 dl{
		text-align: center;
	}
	#service .service-management .sj-btn-link-s{
		margin: auto;
		max-width: 300px;
		width: 100%;
	}


	/* approach
	======================================================*/

	#approach{
		padding: 110px 0 175px;
		background: #fff;
	}
	#approach .sj-approach-detail{
		padding: 40px 0 0;
	}
	#approach .sj-figbox2 figure{
		border-radius: 0 0 50px 0;
		overflow: hidden;
	}
	#approach .sj-approach-detail figure img{
		width: 100%;
		height: auto;
	}
	#approach .sj-approach-boxwrap{
		display: flex;
		justify-content: space-between;
		margin: auto;
		width: 1200px;
		transform-origin: top left;
	}
	#approach .sj-approach-boxwrap .sj-figbox1,
	#approach .sj-approach-boxwrap .sj-figbox2{
		width: calc(50% - 10px);
	}
	#approach .sj-approach-boxwrap .sj-figbox1 figure + figure{
		margin-top: 20px;
	}
	#approach .sj-approach-txt{
		padding: 50px 0 0;
		text-align: center;
	}
	#approach .sj-approach-txt p{
		line-height: 2.4;
		font-size: 18px;
	}
	#approach .sj-btn-link-l{
		margin: 50px auto 0;
		max-width: 600px;
	}


}

@media screen and (min-width: 768px) and (max-width: 1080px) {


	/*detail-group*/
	#detail-group .detail-main .detail-main-box {
		padding: 0 20px;
	}
	/*detail-philosophy*/
	#detail-philosophy .detail-main .detail-main-box{
		padding: 0 10px;
	}
	#detail-philosophy .detail-main p{
		font-size: 16px;
	}
	/*detail-charter*/
	#detail-charter .detail-main .detail-main-box {
		padding: 40px 20px;
	}
	#detail-charter .detail-main dt{
		font-size: 18px;
	}
	#detail-charter .detail-main dd{
		font-size: 16px;
	}
	/*detail-policy*/
	#detail-policy .detail-main .detail-main-box{
		padding: 50px 0 20px;
	}
	#detail-policy .detail-policy-lead{
		padding: 0 10px;
		font-size: 14px;
	}
	#detail-policy .detail-policy-box strong{
		margin: -15px auto 0;
		line-height: 30px;
		font-size: 14px;
	}
	#detail-policy .detail-policy-box ul li{
		font-size: 16px;
	}
	#detail-policy .detail-policy-disc ul li{
		position: relative;
		padding: 10px 10px 0;
		font-size: 14px;
	}
	/*detail-credo*/
	#detail-credo .detail-main .detail-main-box{
		padding: 40px 20px;
	}
	#detail-credo .detail-main dl + dl{
		margin-top: 30px;
	}
	#detail-credo .detail-main dt{
		font-size: 20px;
	}
	#detail-credo .detail-main dd{
		font-size: 16px;
	}

}



@media screen and (min-width: 768px) and (max-width: 980px) {
	#philosophy .detail-btn a{
		height: 100px;
	}
	#philosophy .detail-btn a:after{
		right: 3%;
		width: 20px;
		height: 20px;
		background: url(/shared/img/arrow_r.png) 50% 50% no-repeat;
		background-size: 5px 10px;		
	}
	#philosophy .detail-col.on .detail-btn a:after,
	#philosophy .detail-btn a:hover:after{
		background: url(/shared/img/arrow_r_wh.png) 50% 50% no-repeat;
		background-size: 5px 10px;		
	}

}





@media screen and (max-width: 767px) {

	body {
		width: 100%;
	}
	.ignore-sp{
		display: none;
	}


/*	.sj-loading span{
		position: absolute;
		margin: auto;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 240px;
		height: 44px;
		background: url(/shared/img/logo_sanga_japan.svg) 50% 50% no-repeat;
		background-size: 100% 100%;
		z-index: 10100;
		animation: loading 3000ms linear infinite;
	}
	.sj-loading.remove{
		opacity: 0;
		visibility: hidden;
	}
*/


	.sj-loading span{
		position: absolute;
		margin: auto;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 80px;
		height: 80px;
		background: #fbdce4;
		visibility: hidden;
	}
	.sj-loading span.on{
		visibility: visible;
	}
	.sj-loading span em{
		position: absolute;
		margin: auto;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		background: url(../img/loading.svg);
		background-size: 100% 100%;
		z-index: 50;
	}
	.sj-loading span i{
		position: absolute;
		margin: auto;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 0;
		background: #ea658b;
		transition: height 400ms ease;
		z-index: 30;
		will-change: height;
	}
	.sj-loading.remove{
		opacity: 0;
		visibility: hidden;
	}


	/* kv
	======================================================*/
	.sj-kv{
		position: relative;
		width: 750px;
		height: 640px;
		transform-origin: top left;
	}
	.sj-kv:before{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 100%;
		background: #fff;
	}
	.sj-kv .sj-kv-slide-wrap{
		position: relative;
/*		padding-top: calc(640% / 7.5);
*/		width: 750px;
		height: 640px;
		border-radius: 0 0 30px 0;
		overflow: hidden;
		will-change: opacity;
/*		transform-origin: top left;
*/	}
	.sj-kv figure{
		position: absolute;
		top: 0;
		width: 100%;
		z-index: 50;
		opacity: 0;
/*		visibility: hidden;
*/	}
	.sj-kv figure.ease{
		transition: opacity 1500ms ease;
	}
/*	.sj-kv figure:nth-child(1){
		transform: translate(-30px,-30px);
	}
	.sj-kv figure:nth-child(2){
		transform: translate(-30px,30px);
	}
	.sj-kv figure:nth-child(3){
		transform: translate(30px,0);
	}*/
	.sj-kv figure.on{
		opacity: 1;
/*		visibility: visible;
*//*		transform: translate(0,0);
*/	}
	.sj-kv figure img{
		position: relative;
		width: 100%;
		z-index: 10;
	}
	.sj-kv figure i{
		position: absolute;
		display: block;
		margin: auto;
/*		padding: 0 10px;
*/		max-width: 900px;
		width: 100%;
		z-index: 20;
		bottom: 120px;
		right: 0;
		left: 80px;
		font-size: 48px;
		color: #fff;
		text-shadow: 0 0 30px rgba(0,0,0,1);
	}
	.sj-kv .sj-kv-pager{
		display: none;
	}

	/* News
	======================================================*/
	#news{
		padding: 30px 0 70px;
		background: #fff;
	}
	#news .sj-sec-col{
		position: relative;
		padding: 40px 0 0;
	}

	/* philosophy
	======================================================*/
	#philosophy{
		padding: 60px 0;
		background: #fff;
		box-shadow: 0 0 20px 0 rgba(170,153,157,0.2);
	}

	#philosophy .philosophy-lead{
		margin: 20px 0 0;
		padding: 0 0 0 20px;
		font-size: 16px;
		line-height: 2;
	}
	#philosophy .philosophy-detail{
		position: relative;
		margin: 30px 0 0;
	}
	#philosophy .detail-col + .detail-col{
		margin-top: 10px;
	}

	/*detail-btn*/	
	#philosophy .detail-btn{
		width: 100%;
		box-shadow: 0 0 10px 5px rgba(170,153,157,0.1);
		background: #fff;
		transition: all 400ms ease;
	}
	#philosophy .detail-btn a{
		position: relative;
		display: block;
		width: 100%;
		height: 73px;
	}
	#philosophy .detail-btn .btn-inner{
		position: relative;
		display: flex;
		align-items: center;
		margin: auto;
		max-width: 650px;
		height: 100%;
	}
	#philosophy .detail-btn i{
		position: absolute;
		top: 50%;
		left: 40px;
		transform: translateY(-50%);
		font-size: 14px;
		z-index: 20;
	}
	#philosophy .detail-btn figure{
		position: relative;
		text-align: center;
		width: 100%;
		height: 100%;
		z-index: 10;
	}
	#philosophy .detail-btn figure img{
		height: 100%;
	}
	#philosophy .detail-btn figure span{
		display: block;
		width: 100%;
		height: 100%;
		transition: all 400ms ease;
	}
	#philosophy .detail-btn figure span:nth-child(1){
		position: relative;
		z-index: 10;
	}
	#philosophy .detail-btn figure span:nth-child(2){
		opacity: 0;
		position: absolute;
		top: 0;
		z-index: 20;
	}
	#philosophy .detail-col.open .detail-main{
		visibility: visible;
		opacity: 1;
	}
	#philosophy .detail-col.open .detail-btn{
		background: #eb8da0;
		color: inherit;
	}
	#philosophy .detail-col.open .detail-btn i{
		color: #fff;
	}
	#philosophy .detail-col.open .detail-btn span:nth-child(2){
		opacity: 1;
	}
	#philosophy .detail-col.open .detail-btn span:nth-child(1){
		opacity: 0;
	}

	#philosophy .detail-btn a:after{
		content: "";
		position: absolute;
		margin: auto;
		top: 0;
		right: 20px;
		bottom: 0;
		width: 40px;
		height: 40px;
		border: 1px solid #c1c1c1;
		border-radius: 20px;
		background: url(/shared/img/arrow_d.png) 50% 50% no-repeat;
		background-size: 20px 10px;
		z-index: 20;
	}
	#philosophy .detail-col.open .detail-btn a:after{
		border: 1px solid #fff;
		background: url(/shared/img/arrow_d_wh.png) 50% 50% no-repeat;
		background-size: 20px 10px;
	}

	/*detail-main*/
	.detail-main{
		background: #fff;
		height: 0;
		z-index: 50;
		overflow: hidden;
		transition: height 400ms ease;
		will-change: height;
	}
	/*detail-group*/
	#detail-group .detail-main .detail-main-box{
		display: flex;
		align-items: center;
		padding: 40px 50px;
	}
	#detail-group .detail-main figure{
		margin: auto;
		max-width: 418px;
	}
	/*detail-philosophy*/
	#detail-philosophy .detail-main .detail-main-box{
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 40px 50px;
	}
	#detail-philosophy .detail-main p{
		font-size: 16px;
		text-align: left;
		line-height: 1.8;
	}
	#detail-philosophy .detail-main p br{
		display: none;
	}
	/*detail-charter*/
	#detail-charter .detail-main .detail-main-box{
		padding: 40px;
	}
	#detail-charter .detail-main dl + dl{
		margin-top: 30px;
	}
	#detail-charter .detail-main dt i{
		width: calc(100% - 45px);
		line-height: 1.3;
	}
	#detail-charter .detail-main dt span{
		display: inline-block;
		width: 45px;
		text-align: left;
	}
	#detail-charter .detail-main dt span img{
		width: auto;
		height: 18px;
	}
	#detail-charter .detail-main dt{
		font-size: 16px;
		color: #eb8da0;
		vertical-align: bottom;
	}
	#detail-charter .detail-main dd{
		margin: 10px 0 0;
		line-height: 1.5;
		font-size: 16px;
	}
	/*detail-policy*/
	#detail-policy .detail-main .detail-main-box{
		display: flex;
		flex-direction: column;
		padding: 40px 0 30px;
	}
	#detail-policy .detail-policy-lead{
		padding: 0 40px;
		line-height: 1.8;
		font-size: 16px;
	}
	#detail-policy .detail-policy-lead br{
		display: none;
	}
	#detail-policy .detail-policy-box{
		margin: 50px 0 0;
		border: 2px solid #eb8da0;
	}
	#detail-policy .detail-policy-box strong{
		margin: -20px auto 0;
		display: block;
		width: 120px;
		text-align: center;
		line-height: 40px;
		font-size: 16px;
		color: #fff;
		border-radius: 20px;
		background: #eb8da0;
	}
	#detail-policy .detail-policy-box ul{
		padding: 25px 0 30px;
		display: flex;
	}
	#detail-policy .detail-policy-box ul li{
		position: relative;
		width: 33.333%;
		text-align: center;
		color: #eb8da0;
		font-size: 16px;
	}
	#detail-policy .detail-policy-box ul li + li:before{
		content: "";
		position: absolute;
		margin: auto;
		top: 0;
		left: -9px;
		bottom: 0;
		display: block;
		width: 19px;
		height: 30px;
		background: url(../img/arrow_policy.png) 0 0 repeat;
		background-size: 100% 100%;

	}
	#detail-policy .detail-policy-disc ul{
		padding: 0 20px;
	}
	#detail-policy .detail-policy-disc ul li{
		position: relative;
		padding: 20px;
		height: 100%;
		line-height: 1.8;
		font-size: 16px;
		border-bottom: 1px solid #fbe8ec;

	}
	#detail-policy .detail-policy-disc ul li strong{
		display: block;
		font-size: 16px;
		color: #eb8da0;
	}
	#detail-policy .detail-policy-disc ul li + li{
	}
	/*detail-credo*/
	#detail-credo .detail-main .detail-main-box{
		padding: 30px 40px;
	}
	#detail-credo .detail-main dl + dl{
		margin-top: 30px;
	}
	#detail-credo .detail-main dt span{
		display: inline-block;
		width: 72px;
	}
	#detail-credo .detail-main dt{
		font-size: 16px;
		color: #eb8da0;
		vertical-align: bottom;
		line-height: 1.3;
	}
	#detail-credo .detail-main dd{
		margin: 10px 0 0;
		line-height: 1.5;
		font-size: 16px;
	}

	/* policy
	======================================================*/

	#policy{
		position: relative;
		background: #fff;
		z-index: 20;
	}
	#policy article{
		box-shadow: 0 0 20px 0 rgba(170,153,157,0.2);
		border-radius: 0 0 30px 0;
		overflow: hidden;
	}
	#policy .policy-contents-header-wrap{
		padding: 40px 0;
		background: url(../img/texture_perple.jpg) 0 0 repeat;
		border-radius: 0 0 30px 0;
		overflow: hidden;
	}
	#policy .policy-contents-header{
		position: relative;
		margin: 0 auto;
		max-width: 1120px;
	}
	#policy .policy-contents-title{
		position: relative;
	}
	#policy .sj-sec-header{
		position: relative;
		padding: 0 0 18px;
	}
	#policy .sj-sec-header i{
		color: #fff;
	}
	#policy .policy-header-catch{
		margin: 0 28px;
		padding: 0 5px;
		right: 0;
		bottom: 0;
		height: 50px;
		line-height: 50px;
		color: #fff;
		font-size: 20px;
		letter-spacing: 4px;
		border-top: 1px solid #fff;
		border-bottom: 1px solid #fff;
	}

	#policy .policy-header-lead{
		padding: 15px 0 0;
		display: flex;
		justify-content: flex-end;
	}
	#policy .policy-header-lead-inner{
		margin: 0 28px;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}
	#policy .policy-header-lead-inner p{
		width: calc(100% - 60px);
		font-size: 16px;
		color: #fff;
		line-height: 2;
	}
	#policy .policy-header-lead-inner p br{
		display: none;
	}
	#policy .policy-header-lead .btn-pd-icon{
		margin: 0 3px 0 0;
		width: 36px;
		height: 36px;
	}
	#policy .policy-header-lead .btn-pd-icon span{
		position: relative;
		display: block;
		width: 100%;
		height: 100%;
	}
	#policy .policy-header-lead .btn-pd-icon span i{
		position: absolute;
		margin: auto;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 2px;
		background: #fff;
		transition: transform 400ms ease;
	}
	#policy .policy-header-lead .btn-pd-icon span i:nth-child(2){
		transform: rotate(90deg);
	}
	#policy .open .policy-header-lead .btn-pd-icon span i:nth-child(2){
		transform: rotate(0);
	}
	#policy .policy-movie{
		padding: 0 40px;
	}
	#policy .policy-player-wrap{
		padding: 30px 0;
		margin: auto;
		max-width: 800px;
	}
	#policy .policy-player{
		position: relative;
		padding-top: 56.25%;
	}
	#policy .policy-player iframe{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	#policy .btn-pd{
		display: block;
	}
	/* message
	======================================================*/

	#message{
		padding: 50px 0 70px;
		background: #fff;
	}
	#message .sj-message-detail{
		margin: auto;
		padding: 30px 20px 0;
		max-width: 790px;
	}
	#message .sj-message-detail p{
		font-size: 16px;
		line-height: 1.8;
	}
	#message .sj-message-detail p + p{
		margin-top: 40px;
	}
	#message .sj-message-credit{
		display: flex;
		padding: 45px 0 0;
		justify-content: flex-end;
	}
	#message .sj-message-credit dt{
		line-height: 1.8;
		font-size: 16px;
	}
	#message .sj-message-credit dd{
		margin: 20px 0 0;
		text-align: right;
	}
	#message .sj-message-credit dd span{
		display: inline-block;
		width: 121px;
	}

	/* service
	======================================================*/

	#service{
		padding: 40px 0 60px;
	}
	#service .sj-sec-header strong{
		color: #fff;
	}
	#service .service-slide-contents{
		position: relative;
		margin: 30px 0 0;
		padding: 0 24px;
	}	
	#service .service-detail{
		padding: 35px 0;
		border-bottom: 1px solid #aa999d;
	}
	#service .service-detail h3{
		padding: 30px 0;
		text-align: center;
		font-size: 20px;
		color: #aa999d;
		border-top: 1px solid #aa999d;
		border-bottom: 1px solid #aa999d;
	}
	#service .service-slide-item{
		position: relative;
		display: flex;
		flex-direction: column;
		padding: 20px 27px 30px;
		background: #fff;
		height: auto;
		border-radius: 30px;
		opacity: 0.6;
	}
	#service .service-slide-item:after{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 100%;
		z-index: 20;
	}
	#service .service-slide-item.swiper-slide-active:after{
		display: none;
	}
	#service .service-slide-item.swiper-slide-active{
		opacity: 1;
	}
	#service .service-slide-item figure{
		width: 100%;
		height: 170px;
	}
	#service .service-slide-item figure img{
		object-fit: contain;
		width: 100%;
		height: 100%;
	}
	#service .service-slide-item dl{
		margin: 10px 0 0;
		flex-grow: 1;
	}
	#service .service-slide-item dl dt{
		text-align: center;
		margin: 0 -5px;
		color: #eb8da0;
		font-size: 16px;
		line-height: 1.8;
	}
	#service .service-slide-item dl dd{
		margin: 10px 0 0;
		line-height: 1.8;
		font-size: 16px;
	}
	#service .service-slide-item .sj-btn-link-s{
		margin: 40px auto 0;
		max-width: 300px;
		width: 100%;
	}
	#service .service-slide-pager-wrap{
		position: relative;
		margin: 38px 0 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	#service .service-slide-pager{
		width: auto;
		height: auto;
		font-size: 0;
		text-align: center;
	}
	#service .service-slide-pager span.swiper-pagination-bullet{
		outline: none;
	}
	#service .service-slide-pager span.swiper-pagination-bullet{
		margin: 0 8px;
		width: 10px;
		height: 10px;
		border-radius: 5px;
		background: #fff;
		opacity: 1;
		border: 1px solid #ec92a4;
	}
	#service .service-slide-pager span.swiper-pagination-bullet.swiper-pagination-bullet-active{
		background: #ec92a4;
	}

	#service .slide-btn-next{
		margin: 0 0 0 10px;
		display: block;
		width: 40px;
		height: 40px;
		border: 1px solid #aa999d;
		border-radius: 20px;
		background: #fff url(/shared/img/arrow_r.png) 50% 50% no-repeat;
		background-size: 10px 20px;
		outline: none;
	}
	#service .slide-btn-prev{
		margin: 0 10px 0 0;
		display: block;
		width: 40px;
		height: 40px;
		border: 1px solid #aa999d;
		border-radius: 20px;
		background: #fff url(/shared/img/arrow_l.png) 50% 50% no-repeat;
		background-size: 10px 20px;
		outline: none;
	}
	#service .service-slide-contents .slide-btn-next,
	#service .service-slide-contents .slide-btn-prev{
		display: none;
	}
	#service .service-management{
		padding: 55px 0 0;
	}
	#service .service-management-col{
		border-radius: 30px;
		background: #fff;
	}
	#service .service-management-col + .service-management-col{
		margin-top: 20px;
	}
	#service .service-management-col dl dt{
		font-size: 16px;
		color: #eb8da0;
		text-align: center;
	}
	#service .service-management-col dl dd{
		margin: 20px 0 0;
		font-size: 16px;
		line-height: 1.8;
	}
	#service .service-management-col dl dd + dd{
		margin: 15px 0 0;
	}
	#service .service-management-col{
		padding: 40px 30px;
	}
	#service .service-management-col1 figure{
		margin: auto;
		max-width: 168px;
	}
	#service .service-management-col1 dl{
		margin: 25px 0 0;
	}
	#service .service-management .sj-btn-link-s{
		margin: auto;
		max-width: 240px;
		width: 100%;
	}


	/* approach
	======================================================*/

	#approach{
		padding: 55px 0 120px;
		background: #fff;
	}
	#approach .sj-approach-detail{
		padding: 25px 0 0;
	}
	#approach .sj-figbox2 figure{
		border-radius: 0 0 30px 0;
		overflow: hidden;
	}
	#approach .sj-approach-boxwrap{
		display: flex;
		justify-content: space-between;
		margin: auto;
		width: 1200px;
		transform-origin: top left;
	}
	#approach .sj-approach-boxwrap .sj-figbox1,
	#approach .sj-approach-boxwrap .sj-figbox2{
		width: calc(50% - 10px);
	}
	#approach .sj-approach-boxwrap .sj-figbox1 figure + figure{
		margin-top: 20px;
	}
	#approach .sj-approach-txt{
		padding: 35px 40px 0;
	}
	#approach .sj-approach-txt p{
		line-height: 2;
		font-size: 16px;
	}
	#approach .sj-approach-txt p br{
		display: none;
	}
	#approach .sj-btn-link-l{
		padding: 0 20px;
		margin: 40px auto 0;
		max-width: 380px;
	}

}


@media screen  and (max-width: 374px){

	#service .service-slide-item figure {
	    width: 100%;
	    height: 150px;
	}
	#service .service-slide-item {
	    padding: 20px;
	}
	#service .service-slide-item dl dt{
		font-size: 13px;
	}
	#service .service-slide-item dl dd {
		font-size: 13px;
	}


}