@charset "utf-8";
/*-------------------------------------------------

	COMMON

--------------------------------------------------*/
main {background: url(../img/front/bg.png) center center;}
.btnshine {position: relative;display:inline-block;overflow: hidden;}
.btnshine::before {
	content: '';
	position: absolute;
	top: 0;
	left: -75%;
	z-index: 2;
	width: 50%;
	height: 100%;
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	transform: skewX(-25deg);
}
.btnshine:hover::before {animation: shine 1.2s;}
@keyframes shine {
  100% {
    left: 125%;
  }
}
.edge {position: relative;}
.edge::before,
.edge::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	transition: all .3s;
}
.edge::before {border-top: 1px solid #000;border-bottom: 1px solid #000;transform: scale(0, 1);}
.edge::after {border-right: 1px solid #000;border-left: 1px solid #000;transform: scale(1, 0);}
.edge:hover::before,
.edge:hover::after {transform: scale(1);}
/*-------------------------------------------------

	MAIN VISUAL

--------------------------------------------------*/
#mv {
	position: relative;
	overflow: hidden;
	margin-top: 120px;
	background: #fff;
}
#mv h1 {
	position: absolute;
	left: 6%;
	bottom: 50%;
	z-index: 1;
	transform: translate(0, 50%);
	height: max-content;
	color: #685384;
	font-size: calc(22px + 14 * ((100vw - 320px) / 1600));
	line-height: 2;
	letter-spacing: .2em;
	writing-mode: vertical-rl;
}
.image-crossfader {
	position: relative;
	width: 80%;
	height: calc(250px + 510 * ((100vw - 320px) / 1600));
	margin-left: auto;
	overflow: hidden;
}
.image-crossfader-inner {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	opacity: 0;
	transform: scale(1.2);
	transition:
	opacity 1.5s cubic-bezier(0.455, 0.03, 0.515, 0.955),
	transform 3.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
	background: #fff url("../img/front/mv/bg.jpg") no-repeat center / cover;
}
.image-crossfader-inner.is-visible {opacity: 1;transform: scale(1.0);}
.image-crossfader p {
	display: none;
	position: absolute;
	right: 3%;
	bottom: 5%;
	width: calc(276px + 200 * ((100vw - 320px) / 1600));
}
.image-crossfader p a {
	display: block;
	padding: 2em 0;
	background: rgba(255, 255, 255, .8);
	color: #685384;
	font-size: calc(10px + 2 * ((100vw - 320px) / 1600));
	line-height: 1;
	text-align: center;
}
.image-crossfader p a span {
	display: block;
	margin: 3% 0;
	font-size: 2em;
	text-align: center;
}
.image-crossfader p a img {
	display: block;
	width: calc(20px + 16 * ((100vw - 320px) / 1600));
	margin: 0 auto;
}
@media only screen and ( max-width : 767px ) {
	#mv {margin-top: 100px;}
	.image-crossfader {width: 100%;}
	#mv h1 {
		position: initial;
		transform: none;
		padding: 20px 0;
		text-align: center;
		writing-mode: inherit;
	}
}
/*-------------------------------------------------

	MESSAGE
	
--------------------------------------------------*/
#message .inner {max-width: 930px;}
#message .container {display: flex;justify-content: flex-end;}
#message .container .title_vertical {margin-left: calc(50px + 20 * ((100vw - 320px) / 1600));}
#message .container p {line-height: 2.4;writing-mode: vertical-rl;}
@media only screen and ( max-width : 767px ) {
	#message .container {flex-direction: column-reverse;}
	#message .container .title_vertical {flex-direction: column-reverse;margin: 0 0 20px;}
	#message .container .title_vertical .UpAnime .UpAnime_in {writing-mode: inherit;}
	#message .container p {writing-mode: inherit;}
}
/*-------------------------------------------------

	ABOUT & WORKS
	
--------------------------------------------------*/
.common_container {position: relative;}
.common_container:nth-of-type(1) {margin-bottom: calc(60px + 51 * ((100vw - 320px) / 1600));}
.common_container::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: calc(63px + 50 * ((100vw - 320px) / 1600));
	background: #685384;
}
.common_container .common_content {position: relative;width: 90%;overflow: hidden;}
.common_container:nth-of-type(2) .common_content {margin-left: auto;}
.common_container .common_content .bg {
	width: 80%;
	height: calc(372px + 200 * ((100vw - 320px) / 1600));
	overflow: hidden;
	background: no-repeat center / cover;
}
.common_container:nth-of-type(1) .common_content .bg {background-image: url(../img/front/about/bg.jpg);}
.common_container:nth-of-type(2) .common_content .bg {margin-left: auto;background-image: url(../img/front/works/bg.jpg);}
.common_container .common_content .bg h3 {
	margin: -10px 0 0 -.5em;
	color: #fff;
	font-size: calc(45px + 57 * ((100vw - 320px) / 1600));
	line-height: 2;
	letter-spacing: .4em;
	writing-mode: vertical-rl;
}
.common_container:nth-of-type(2) .common_content h3 {margin: -10px -.5em 0 auto;}
.common_container .common_content .txt_content {
	position: absolute;
	right: 0;
	bottom: 8%;
	z-index: 2;
	width: 100%;
	max-width: calc(338px + 200 * ((100vw - 320px) / 1600));;
	box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
	background: #fff;
}
.common_container:nth-of-type(2) .common_content .txt_content {right: initial;left: 0;}
.common_container .common_content .txt_content a {display: block;padding: 7em 0 8em;}
.common_container .common_content .txt_content a .title,
.common_container .common_content .txt_content a .title .en {margin-bottom: calc(20px + 20 * ((100vw - 320px) / 1600));}
.common_container .common_content .txt_content a p {color: #685384;text-align: center;}
@media only screen and ( max-width : 767px ) {
	.common_container .common_content {width: 100%;}
	.common_container .common_content .bg {width: 100%;height: 250px;}
	.common_container .common_content .txt_content {position: initial;max-width: 100%;}
	.common_container .common_content .txt_content a {padding-top: 4em;}
}
/*-------------------------------------------------

	INTERVIEW

--------------------------------------------------*/
#interview .inner {max-width: 1100px;}
#interview .flexbox2 .content {width: 31%;}
#interview .flexbox2 .content a figure {
	margin-bottom: calc(10px + 10 * ((100vw - 320px) / 1600));
	overflow: hidden;
}
#interview .flexbox2 .content a figure img {transition: .5s all;}
#interview .flexbox2 .content a:hover figure img {transform: scale(1.1, 1.1);}
@media only screen and ( max-width : 767px ) {
	#interview .flexbox .content {width: 49%;margin-bottom: 20px;}
	#interview .flexbox .content:nth-of-type(3),
	#interview .flexbox .content:nth-of-type(4) {margin-bottom: 0;}
}
/*-------------------------------------------------

	CROSSTALK

--------------------------------------------------*/
#crosstalk {background: #F4EDFC;}
#crosstalk .inner {max-width: 1101px;}
#crosstalk .container {
	position: relative;
	padding: calc(10px + 10 * ((100vw - 320px) / 1600));
}
#crosstalk .container a .title_vertical {position: absolute;top: 0;right: 0;}
#crosstalk .container a figure {overflow: hidden;}
#crosstalk .container a .content {
	position: absolute;
	bottom: 10%;
	left: 0;
	padding: 1.4em 5% 1em;
	background: #fff;
}
#crosstalk .container a .content h3 {
	margin-bottom: .5em;
	color: #685384;
	font-size: calc(18px + 10 * ((100vw - 320px) / 1600));
}
#crosstalk .container a .content h3 span {
	display: block;
	color: #CBA1BC;
	font-size: calc(10px + 6 * ((100vw - 320px) / 1600));
}
@media only screen and ( max-width : 767px ) {
	#crosstalk .container a .content {position: initial;padding: 20px 10px 10px;}
}
@media only screen and ( max-width : 500px ) {
	#crosstalk .container {padding: calc(10px + (100vw - 320px - 40px)/2);}
}
/*-------------------------------------------------

	CASE STUDY

--------------------------------------------------*/
#case_study .inner {max-width: 1332px;}
#case_study a.example_container {margin-bottom: calc(60px + 103 * ((100vw - 320px) / 1600));}
#case_study a.example_container figure {position: relative;overflow: hidden;}
#case_study a.example_container figure figcaption {
	display: flex;
	justify-content: center;
	position: absolute;
	bottom: 50%;
	left: 50%;
	transform: translate(-50%, 50%);
	height: 515px;
	color: #fff;
	font-size: calc(40px + 104 * ((100vw - 320px) / 1600));
	line-height: 1;
	letter-spacing: .2em;
	writing-mode: vertical-rl;
}
#case_study ul {display: flex;overflow: hidden;}
#case_study ul li {width: calc(100vw / 3 );background: #E1DAE8;transition: .3s;}
#case_study ul li:nth-child(2) {background: #F4EDFC;}
#case_study ul li:hover {background: #f3f3f3;}
#case_study ul li a {
	display: block;
	position: relative;
	width: 100%;
	height: calc(200px + 264 * ((100vw - 320px) / 1600));
	text-align: center;
}
#case_study ul li a p {
	position: absolute;
	top: 20%;
	left: 50%;
	transform: translate(-50%, 0);
	font-size: calc(18px + 11 * ((100vw - 320px) / 1600));
	letter-spacing: .2em;
	writing-mode: vertical-rl;
}
#case_study ul li a img {
	display: block;
	position: absolute;
	bottom: 15%;
	left: 50%;
	z-index: -1;
	transform: translate(-50%, 0);
	width: auto;
	margin: 0 auto;
}
#case_study ul li:nth-child(1) a img {width: calc(97px + 60 * ((100vw - 320px) / 1600));}
#case_study ul li:nth-child(2) a img {width: calc(85px + 60 * ((100vw - 320px) / 1600));}
#case_study ul li:nth-child(3) a img {width: calc(40px + 60 * ((100vw - 320px) / 1600));}
@media only screen and ( max-width : 767px ) {
	#case_study ul {display: block;}
	#case_study ul li {width: calc(100vw / 1 );}
}