/*****************************

top__mv

******************************/
@keyframes MvFadeIn {
	0%{
		opacity: 0;
		transform: translateY(30px);
	}

	100%{
		opacity: 1;
		transform: translateY(0px);
	}
	
}

.top__mv{
	position: relative;
	background: url(../img/top/bg-mv.png) no-repeat 50% 50% / cover;
	color: #fff;
	height: 60vw;
}

@media screen and (min-width: 1830px) {
	.top__mv{
		height: 1040px;
	}
}

.top__mv__header{
	position: relative;
	height: 92px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.top__mv__header__logo a{
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 31px;
	letter-spacing: .1em;
	font-weight: 500;
	color: #fff;
	transition: opacity .3s;
}

.top__mv__header__logo img{
	width: 127px;
}

.top__mv__header__insta {
	position: absolute;
	right: 81px;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 39px;
	height: 38px;
}


.top__mv__cont{
	width: 82%;
	position: relative;
	margin: 0 auto;
	height: auto;
	margin-top: 40px;
}

@media screen and (min-width: 1830px) {
	 .top__mv__cont{
	 	max-width: 1500px;
	 }
	
}

.top__mv__cont img{
	position: absolute;
	opacity: 0;
}

.top__mv__cont img:nth-child(1){
	width: 56%;
	left: 4.16vw;
	top: 0;
	animation: MvFadeIn 1s .5s forwards;
}

@media screen and (min-width: 1830px) {
	.top__mv__cont img:nth-child(1){
		left: 50px;
	}

}

.top__mv__cont img:nth-child(2){
	width: 33%;
	right: 0;
	top: 9.16vw;
	animation: MvFadeIn 1s .8s forwards;
}

@media screen and (min-width: 1830px) {
	.top__mv__cont img:nth-child(2){
		top: 150px;
	}

}

.top__mv__cont img:nth-child(3){
	width: 31.8%;
	left: 0;
	top: 34.5vw;
	animation: MvFadeIn 1s 1.1s forwards;
}

@media screen and (min-width: 1830px) {
	.top__mv__cont img:nth-child(3){
		top: 613px;
	}

}

.top__mv__cont__sidetxt{
	font-weight: 400;
	font-size: 22px;
	letter-spacing: .2em;
	display: flex;
	align-items: center;
	transform: rotate(90deg);
	position: absolute;
	left: -140px;
	top: 130px;
}

.top__mv__cont__sidetxt::before{
	content: "";
	width: 75px;
	height: 1px;
	background-color: #fff;
	display: block;
	margin-right: 15px;
}

.top__mv__cont__txt{
	font-size: 1.33vw;
	line-height: 2;
	letter-spacing: .04em;
	position: absolute;
	z-index: 1;
	left: 33.6vw;
	top: 33.7vw;
	font-weight: 400;
	opacity: 0;
	animation: MvFadeIn 1s 1.4s forwards;
	text-shadow: 1px 2px 3px #000; 
}

@media screen and (min-width: 1830px) {
	 .top__mv__cont__txt{
	 	font-size: 24px;
	 	left: 603px;
	 	top: 590px;
	 }
	
}

.top__mv__cont__txt a{
	display: block;
	color: #fff;
	border: 1px solid #fff;
	width: 10.75vw;
	max-width: 230px;
	text-align: center;
	margin-top: 10px;
	padding-left: 10px;
	position: relative;
}

.top__mv__cont__txt a.hover{
	background-color: #000;
}

.top__mv__cont__txt a::before{
	content: "";
	width: 10px;
	height: 1px;
	background-color: #fff;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	transition: .3s;
	z-index: 2;
}

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

	.top__mv__header{
		height: 72px;
	}

	.top__mv__header__logo a{
		font-size: 26px;
	}

	.top__mv__header__insta {
		width: 29px;
		height: 28px;
	}

	.top__mv{
		height: 55vw;
	}

	.top__mv__cont{
		margin-top: 20px;
	}

	.top__mv__cont img:nth-child(2){
		top: 5.16vw;
		animation: MvFadeIn 1s 1.1s forwards;
	}

	.top__mv__cont img:nth-child(3){
		top: 28.5vw;
		animation: MvFadeIn 1s .8s forwards;
	}

	.top__mv__cont__txt{
		top: 28.5vw;
		left: 30.6vw;
	}

	.top__mv__cont__sidetxt{
		font-size: 16px;
	}

}

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

	.top__mv{
		position: relative;
		background: url(../img/top/bg-mv-sp.png) no-repeat 50% 50% / cover;
		color: #fff;
		height: 186vw;
	}

	.top__mv__header{
		height: 54px;
		justify-content: flex-start;
	}

	.top__mv__header__logo a{
		font-size: 4.53vw;
	}

	.top__mv__header__logo img{
		width: 65px;
		margin: 0 10px
	}

	.top__mv__header__insta {
		right: 65px;
		width: 23px;
		height: 23px;
	}

	.top__mv__cont{
		width: 100%;
		height: 100%;
		margin-top: 30px;
	}

	.top__mv__cont img:nth-child(1){
		width: 76%;
		left: auto;
		right: 0;
		top: 0;
		z-index: 3;
	}

	.top__mv__cont img:nth-child(2){
		width: 42%;
		right: 20px;
		top: 84vw;
	}

	.top__mv__cont img:nth-child(3){
		width: 47%;
		left: 0;
		top: 57vw;
	}

	.top__mv__cont__sidetxt{
		font-size: 14px;
		left: -30px;
		top: 86px;
	}

	.top__mv__cont__sidetxt::before{
		width: 41px;
	}

	.top__mv__cont__txt{
		font-size: 13px;
		line-height: 2;
		left: 45px;
		top: 100vw;
		width: calc(100% - 90px);
		font-weight: 500;
	}

	.top__mv__cont__txt a{
		width: 100%;
		max-width: 100%;
		margin: 12vw auto 0;
		font-size: 14px;
		padding: 5px 0 4px 0px;
	}

	.top__mv__cont__txt a::before{
		width: 15px;
	}

}



/*****************************

top__welcome

******************************/

.top__welcome{
	background: url(../img/top/bg-welcome.jpg) no-repeat 50% 50% / cover;
	padding: 83px 0;
}

.top__welcome h2{
	font-size: 43px;
	font-weight: 500;
	font-style: italic;
	letter-spacing: .12em;
	text-align: center;
	margin-bottom: 24px;
}

.top__welcome h2:first-letter{
	font-size: 1.48em;
	color: #00006E;
	letter-spacing: .06em;
}

.top__welcome__txt{
	text-align: center;
	font-size: 16px;
	line-height: 2.12;
	font-weight: 600;
	margin-bottom: 37px;
	color: #1E1E1E;
}

.top__welcome a{
	display: block;
	text-align: center;
	color: #00006E;
	font-size: 16px;
	letter-spacing: .02em;
	font-weight: 600;
	width: 148px;
	margin: 0 auto;
	position: relative;
}

.top__welcome a::after{
	content: "";
	width: 0%;
	height: 1px;
	background-color: #00006E;
	display: block;
	transition: width .3s;
	position: absolute;
	right: 0;
	bottom: -5px;
}

.top__welcome a.hover::after{
	width: 100%;
	left: 0;
}


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

	.top__welcome{
		padding: 35px 0 40px;
	}

	.top__welcome h2{
		font-size: 27px;
		margin-bottom: 18px;
	}

	.top__welcome h2:first-letter{
		font-size: 40px;
	}

	.top__welcome__txt{
		font-size: 12px;
		line-height: 1.75;
		margin-bottom: 30px;
	}

	.top__welcome a{
		font-size: 14px;
		width: 129px;
	}

	.top__welcome a::after{
		width: 100%;
		bottom: -4px;
	}

	.top__welcome a.hover::after{
		width: 100%;
	}

}

/*****************************

top__service

******************************/

.top__service{
	padding: 60px 0 70px;
	position: relative;
}

.top__service::before{
	content: "";
	width: 100%;
	height: 77%;
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: -1;
	background-color: #DED6CA;
}

.top__service  i{
	width: 144px;
	display: block;
	margin: 0 auto -30px;
}

.top__service h2{
	font-size: 48px;
	font-weight: 500;
	letter-spacing: .1em;
	text-align: center;
	margin-bottom: 46px;
}

.top__service h2:first-letter{
	font-size: 1.43em;
	color: #00006E;
}

.top__service__inner{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	max-width: 841px;
	margin: 0 auto;
}

.top__service__inner > div{
	background-color: #fff;
	width: 47%;
	margin-bottom: 6%;
	text-align: center;
	padding-bottom: 28px;
}

.top__service__inner > div img{
	margin-bottom: 20px;
}

.top__service__inner > div.movie img{
	padding: 37px 0;
	background-color: #000;
}

.top__service__inner > div h3{
	text-align: center;
	color: #00006E;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.5;
	margin-bottom: 10px;
}

.top__service__inner > div p{
	text-align: center;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.75;
	margin-bottom: 20px;
}

.top__service__inner > div a{
	font-size: 16px;
	font-weight: 600;
	display: block;
	width: 225px;
	padding: 5px 0;
	margin: 0 auto;
	border: 1px solid #707070;
	position: relative;
}

.top__service__inner > div a span{
	position: relative;
	z-index: 1;
}

.top__service__inner > div a::after{
	content: "";
	width: 0%;
	height: 100%;
	background-color: #00006E;
	position: absolute;
	left: 0;
	top: 0;
	transition: .3s;
}

.top__service__inner > div a::before{
	content: "";
	width: 10px;
	height: 1px;
	background-color: #707070;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	transition: .3s;
	z-index: 2;
}

.top__service__inner > div a.hover{
	color: #fff;
}

.top__service__inner > div a.hover::after{
	width: 100%;
}

.top__service__inner > div a.hover::before{
	background-color: #fff;
}


.top__service__info{
	background-color: #fff;
	max-width: 841px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
	font-size: 16px;
	font-weight: 600;
}

.top__service__info dt{
	width: 40px;
	flex: none;
	margin-right: 15px;
}

.top__service__info dd a{
   font-size: 19px;
   margin: 0 5px;
   letter-spacing: .08em;
   position: relative;
}

.top__service__info dd a::after{
	content: "";
	width: 0%;
	height: 1px;
	background-color: #1E1E1E;
	position: absolute;
	right: 0;
	bottom: -5px;
	transition: width .3s;
}

.top__service__info dd a.hover::after{
	width: 100%;
	left: 0;
}

@media screen and (max-width: 841px) {
.top__service__inner > div.movie img{
	padding: 4vw 0;
}
	
}

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

	.top__service{
		padding: 57px 0 0;
		position: relative;
	}

	.top__service::before{
		content: "";
		display: none;
	}

	.top__service .wrap{
		width: 100%;
	}

	.top__service  i{
		width: 79px;
		margin: 0 auto -20px;
	}

	.top__service h2{
		font-size: 27px;
		margin-bottom: 25px;
	}

	.top__service h2:first-letter{
		font-size: 40px;
	}

	.top__service__inner{
		display: block;
		max-width: 841px;
	}

	.top__service__inner > div{
		width: 100%;
		margin: 0 auto 55px;
		padding-bottom: 50px;
		position: relative;
		background: linear-gradient(180deg, #fff 0%, #fff 30%, #DED6CA 30%, #DED6CA 100%);
	}

	.top__service__inner > div:last-child{
		margin-bottom: 0;
		padding-bottom: 100px;
	}

	.top__service__inner > div .bg{
		background-color: #fff;
		padding: 13px 0 16px;
		width: 73.3vw;
		margin: 0 auto;
	}

	.top__service__inner > div img{
		margin-bottom: 0px;
		width: 73.3vw;
	}

	.top__service__inner > div h3{
		font-size: 18px;
		margin-bottom: 5px;
	}

	.top__service__inner > div p{
		font-size: 12px;
		line-height: 1.75;
		margin-bottom: 16px;
	}

	.top__service__inner > div a{
		font-size: 14px;
		width: 195px;
		padding: 5px 0 6px;
	}

	.top__service__inner > div a::before{
		width: 16px;
	}

	.top__service__inner > div a.hover{
		color: #010022;
	}

	.top__service__inner > div a.hover::before{
		background-color: #707070;
	}

	.top__service__inner > div a.hover::after{
		display: none;
	}



	.top__service__info{
		width: 73.3vw;
		margin: -50px auto 0;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 15px 15px;
		font-size: 12px;
		font-weight: 600;
		position: relative;
		z-index: 1;
	}

	.top__service__info dt{
		width: 34px;
		margin-right: 8px;
	}

	.top__service__info dd a{
	   font-size: 15px;
	}

	.top__service__info dd a::after{
		width: 100%;
		bottom: -1px;
	}

}


/*****************************

top__works

******************************/

.top__works{
	padding: 87px 0 0;
}

.top__works h2{
	text-align: center;
	margin-bottom: 46px;
}

.top__works h2 span{
	font-size: 48px;
	font-weight: 500;
	letter-spacing: .1em;
	text-align: center;
	display: inline-block;
	margin-right: 20px;
}

.top__works h2 span:first-letter{
	font-size: 1.43em;
	color: #00006E;
}

.top__works  i{
	width: 144px;
	display: block;
	margin: 0 auto -30px;
}

.top__works__box{
	padding: 60px 0;
	margin-bottom: 82px;
	background-color: #F7F7F7;
}

.top__works__box .wrap{
	max-width: 770px;
}

.top__works__box h3{
	text-align: center;
	margin-bottom: 30px;
	font-size: 22px;
	font-weight: 600;
	color: #01046E;
}

.top__works__box h3 span{
	border-bottom: 2px solid #00046E;
	padding-bottom: 10px;
}



.top__works__box__txt{
	text-align: center;
	font-size: 16px;
	line-height: 1.56;
	margin-bottom: 20px;
	font-weight: 600;
}

.top__works__box img{
	margin-bottom: 20px;
}

.top__works__box dl{
	display: flex;
	justify-content: center;
}

.top__works__box dt{
	margin-right: 10px;
	font-size: 16px;
}

.top__works__box dt span{
	background-color: #01046E;
	color: #fff;
	border-radius: 5px;
	margin-right: 5px;
	padding: 5px 10px 4px;
	line-height: 1;
}

.top__works__box dd span{
	font-weight: 600;
	margin-right: 16px;
}

.top__works__box ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.top__works__box ul li{
	width: 48%;
	margin-bottom: 3%;
}

.top__works__box ul li a{
	display: block;
}

.top__works__box ul li a.hover{
	opacity: .8;
}


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

	.top__works{
		padding: 80px 0 0;
	}

	.top__works h2{
		margin-bottom: 25px;
		line-height: 1;
	}

	.top__works h2 span{
		font-size: 27px;
		margin-bottom: 0px;
		margin-right: 10px;
	}

	.top__works h2 span:first-letter{
		font-size: 34px;
	}

	.top__works  i{
		width: 79px;
		margin: 0 auto -10px;
	}

	.top__works__box{
		padding: 23px 0;
		margin-bottom: 46px;
	}

	.top__works__box .wrap{
		width: 100%;
	}

	.top__works__box h3{
		margin-bottom: 20px;
		font-size: 16px;
	}
	.top__works__box h3 span{
	  border-bottom: 1px solid #00046E;
	  padding-bottom: 3px;
   }

	.top__works__box__txt{
		font-size: 12px;
		line-height: 1.5;
		margin-bottom: 16px;
		font-weight: 600;
	}

	.top__works__box img{
		margin-bottom: 16px;
	}

	.top__works__box dl{
		display: block;
	}

	.top__works__box dt{
		margin: 0;
		margin-bottom: 0px;
		font-size: 12px;
		text-align: center;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}

	.top__works__box dt span{
		border-radius: 2px;
		margin: 3px;
		padding: 4px 7px 5px;
		font-weight: 500;
	}

	.top__works__box dd{
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}

	.top__works__box dd span{
		margin: 5px;
		font-size: 11px;
	}

	.top__works__box ul{
		display: block;
		width: 70%;
		margin: 0 auto;
	}

	.top__works__box ul li{
		width: 100%;
		margin-bottom: 0px;
	}

}