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

	FIRST VIEW

--------------------------------------------------*/
#fv {margin-top: 7.2rem;background: url("../img/fv/bg01.jpg") no-repeat center / cover;}
#fv .inner {
	position: relative;
	max-width: 122rem;
	padding: 0 6rem;
	overflow: hidden;
	color: #fff;
}
#fv .inner p {
	position: absolute;
	bottom: 50%;
	transform: translate(0,50%) rotate(90deg);
	font-size: 1.2rem;
}
#fv .inner .txtl {left: -10px;}
#fv .inner .txtr {right: -10px;}
#fv .bg {
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	width: 100%;
	height: 45rem;
	background: url("../img/fv/bg02_pc.jpg") no-repeat center / cover;
}
#fv h1 {z-index: 2;}
#fv h1 svg {
	max-width: 60rem;
	margin: 0 auto;
	stroke: #fff;
	stroke-width: .5px;
	fill: #fff;
	stroke-dasharray: 600;
	stroke-dashoffset: 600;
	animation: textAnime 3s linear;
}
@keyframes textAnime {
	0% {
		stroke-dashoffset: 1000;
		fill:transparent;
	}
	50% {
		fill:transparent;
	}
	100% {
		stroke-dashoffset: 0;
		fill:#fff;
	}
}
#fv a {
	position: absolute;
	bottom: 25px;
	width: 100%;
	padding-bottom: 1rem;
	color: #fff;
	font-size: 1rem;
	text-align: center;
}
#fv a img {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%,0);
	width: 46px;
	animation: sdb 1.5s infinite;
}
@keyframes sdb {
	0% {
		transform: translate(-50%,0);
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		transform: translate(-50%,20px);
		opacity: 0;
	}
}
@media only screen and ( max-width : 767px ) {
	#fv {margin-top: 7rem;}
	#fv .inner {padding: 0 3rem;}
	#fv .inner .txtl {left: -26px;}
	#fv .inner .txtr {right: -26px;}
	#fv .bg {height: 30rem;background-image: url("../img/fv/bg02_sp.jpg");}
}
@media only screen and ( max-width : 480px ) {
}
/*-------------------------------------------------

	ABOUT US

--------------------------------------------------*/
#about {width: 100%;height: 100%;}
#about .box {background: url("../img/about/bg.jpg") no-repeat center / cover;}
#about .box div {
	max-width: 662px;
	margin-left: auto;
	padding: 4.5rem 2rem;
	background: rgba(0,0,0,.7);
	color: #fff;
}
#about h2 {
	position: relative;
	z-index: 1;
	margin-bottom: 3rem;
	font-size: 2rem;
	font-family: adobe-garamond-pro, serif;
	letter-spacing: .1em;
	text-align: center;
}
#about h2 span {display: block;text-align: center;}
#about h2::after,#about h2::before,
#about h2 span::after,#about h2 span::before {
	content: '';
	position: absolute;
	transform: translate(0,50%);
	z-index: -1;
	height: 1px;
	background: #fff;
	transition: all .8s;
}
#about h2::before,#about h2::after {bottom: 40%;}
#about h2 span::before,#about h2 span::after {bottom: 60%;}
#about h2::before,#about h2 span::before {left: 0%;width: 38%;}
#about h2::after,#about h2 span::after {right: 0%;width: 38%;}
#about .box div h3 {margin-bottom: 4rem;font-size: 3rem;text-align: center;}
#about .box div p {text-align: center;}
@media only screen and ( max-width : 767px ) {
	#about h2::before,#about h2 span::before,
	#about h2::after,#about h2 span::after {width: 30%;}
	#about .box div h3 {margin-bottom: 3rem;font-size: 2.6rem;line-height: 1.4;}
}
@media only screen and ( max-width : 480px ) {
	#about .box div p {text-align: left;}
	#about h2::before,#about h2 span::before,
	#about h2::after,#about h2 span::after {width: 20%;}
	#about .box div h3 {font-size: 2.2rem;}
}
/*-------------------------------------------------

	VISION & CONCEPT

--------------------------------------------------*/
#vision .flexbox {max-width: 690px;margin: 0 auto 5rem;}
#vision .flexbox div {
	width: 307px;
	height: 307px;
	padding: 8rem 0;
	border-radius: 50%;
	background: #F3E7D2;
}
#vision .flexbox div h3 {
	position: relative;
	z-index: 1;
	margin-bottom: 2.5rem;
	padding-bottom: 2.5rem;
	color: #40210F;
	font-size: 3rem;
	text-align: center;
}
#vision .flexbox div h3::before {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	z-index: -1;
	width: 0;
	transform: translate(-50%,0);
	max-width: 10rem;
	height: 1px;
	background: #2A1509;
	transition: all 2s;
}
#vision .flexbox div h3.isActive::before {width: 100%;}
#vision .flexbox div p {text-align: center;}
#vision .subtitle {margin-bottom: 5.5rem;color: #40210F;text-align: center;}
#vision .subtitle h4 {
	position: relative;
	z-index: 1;
	margin-bottom: 2.5rem;
	text-align: center;
}
#vision .subtitle h3 {
	display: inline-block;
	position: relative;
	z-index: 1;
	margin-bottom: 3rem;
	font-size: 3rem;
	text-align: center;
}
#vision .subtitle p {
	position: relative;
	z-index: 1;
	max-width: 36rem;
	margin: 0 auto;
	padding-bottom: 2rem;
	font-size: 2.4rem;
	text-align: center;
}
#vision .subtitle h4::before,
#vision .subtitle h3::before,
#vision .subtitle p::before {
	content: '';
	position: absolute;
	left: 50%;
	z-index: -1;
	width: 0;
	max-width: 36rem;
	height: 1px;
	background: #40210F;
	transition: all 2s;
}
#vision .subtitle h4::before {bottom: 50%;transform: translate(-50%,50%);}
#vision .subtitle h3::before {
	bottom: -10px;
	transform: translate(-50%,0);
	max-width: 100%;
	height: 27px;
	background: #F3E7D2;
}
#vision .subtitle p::before {bottom: 0;transform: translate(-50%,0);}
#vision .subtitle h4.isActive::before,
#vision .subtitle h3.isActive::before,
#vision .subtitle p.isActive::before {width: 100%;}
#vision .subtitle h4 span {position: relative;padding: 0 2rem;background: #F6EFEA;}
#vision .subtitle h3 span {padding: 0 1rem;}
#vision .subtitle p span {margin-right: 1rem;}
#vision .txt {color: #40210F;font-size: 1.6rem;text-align: center;}
@media only screen and ( max-width : 767px ) {
	#vision .flexbox {justify-content: center;max-width: 307px;}
	#vision .flexbox div {width: 280px;height: 280px;padding: 6.5rem 0;}
	#vision .flexbox div:nth-of-type(1) {margin-bottom: 2rem;}
	#vision .flexbox div h3 {font-size: 2.6rem;}
	#vision .subtitle h3 {margin-bottom: 1rem;}
	#vision .subtitle h3::before {display: none;}
	#vision .subtitle h3 span {
		display: table;
		position: relative;
		z-index: 1;
		margin: 0 auto 2rem;
		font-size: 3rem;
		text-align: center;
	}
	#vision .subtitle h3 span::before {
		content: '';
		position: absolute;
		left: 50%;
		z-index: -1;
		width: 0;
		height: 27px;
		background: #F3E7D2;
		transition: all 2s;
		bottom: -15px;
		transform: translate(-50%,0);
	}
	#vision .subtitle h3 span.isActive::before {width: 100%;}
	#vision .subtitle p span {display: block;margin-right: 0;text-align: center;}
}
@media only screen and ( max-width : 480px ) {
	#vision .txt{text-align: left;}
}
/*-------------------------------------------------

	WORK STYLE

--------------------------------------------------*/
#work .flexbox {margin-bottom: 2rem;}
#work .flexbox li {
	width: 32.8%;
	padding: 3rem 2rem 2rem;
	border: 1px solid #40210F;
	background: #fff;
}
#work .flexbox li h3 {margin-bottom: 2.5rem;text-align: center;}
#work .flexbox li h3 img {max-width: 126px;margin-bottom: 3rem;}
#work .flexbox li h3 span {
	display: block;
	color: #40210F;
	font-size: 2.4rem;
	text-align: center;
}
#work .flexbox li figure {margin-bottom: 2.5rem;}
#work .flexbox a {
	position: relative;
	max-width: 22rem;
	margin: 1rem auto 0;
	padding: 1rem 0;
	overflow: hidden;
	border: 1px solid #40210F;
	color: #40210F;
	text-align: center;
}
#work .flexbox a:hover {background: #40210F;color: #fff;}
#work .flexbox a::before {
    content: "";
    position: absolute;
    height: 150px;
    width: 20px;
    right: 0px;
    bottom: -80px;
    transform: rotate(45deg);
    transition: all .3s;
    background: #40210F;
}
#work .flexbox a:hover::before {right: 120%;}
@media only screen and ( max-width : 767px ) {
	#work .flexbox li {width: 100%;margin-bottom: 3rem;padding: 2rem;}
	#work .flexbox li h3 img {max-width: 100px;margin-bottom: 1rem;}
	#work .flexbox li h3 span {font-size: 1.8rem;}
	#work .flexbox li figure {margin-bottom: 1rem;}
}
@media only screen and ( max-width : 480px ) {
}
/*-------------------------------------------------

	COMPANY DATA

--------------------------------------------------*/
#comp li {width: 32.8%;margin-bottom: 1rem;}
@media only screen and ( max-width : 767px ) {
	#comp li {width: 100%;}
	#comp li:last-child {margin-bottom: 0;}
}
@media only screen and ( max-width : 480px ) {
}
/*-------------------------------------------------

	INTERVIEW

--------------------------------------------------*/
#itv .flexbox {justify-content: center;}
#itv .itvbox {max-width: 26rem;margin-bottom: 2rem;}
#itv .itvbox:nth-of-type(2) {margin: 0 2rem 2rem;}
#itv .txtbox {
	width: 100%;
	padding: 1.5rem 2rem 2rem;
	background: #40210F;
	color: #fff;
}
#itv .txtbox h3 {margin-bottom: 3rem;}
#itv .txtbox h3 span {
	display: block;
	margin-top: 2.5rem;
	font-size: 2.15em;
	text-align: right;
}
#itv .txtbox a {
	position: relative;
	padding: 1rem 0;
	overflow: hidden;
	border: 1px solid #fff;
	color: #fff;
	text-align: center;
}
#itv .txtbox a:hover {background: #fff;color: #40210F;}
#itv .txtbox a::before {
    content: "";
    position: absolute;
    height: 150px;
    width: 20px;
    right: 0px;
    bottom: -80px;
    transform: rotate(45deg);
    transition: all .3s;
    background: #fff;
}
#itv .txtbox a:hover::before {right: 120%;}
@media only screen and ( max-width : 767px ) {
	#itv .txtbox h3 span {margin-top: 1.5rem;}
}
@media only screen and ( max-width : 480px ) {
	#itv .txtbox a {padding: 1rem;}
}
/*-------------------------------------------------

    SEARCH

--------------------------------------------------*/
#search .content {background: #40210F;padding: 6rem 0;}
#search ul.flexbox {margin-bottom: 2rem;}
#search ul.flexbox li {width: 32.5%;}
#search ul.flexbox li div {position: relative;}
#search ul.flexbox li div::before {
	content: "";
	position: absolute;
	right: 20px;
	bottom: 50%;
	transform: translate(0,50%) rotate(-45deg);
	width: 10px;
	height: 10px;
	border-left: 3px solid #fff;
	border-bottom: 3px solid #fff;
}
#search ul.flexbox li select,
#search ul.flexbox li input {
	width: 100%;
	margin: 0;
	padding: 2.5rem 3rem;
	border: 1px solid #fff;
	background: rgba(255,255,255,.1);
	color: #fff;
	vertical-align: middle;
	cursor: pointer;
}
#search button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 30px 0;
	border: 1px solid #40210F;
	outline: 1px solid #40210F;
	outline-offset: -10px;
	background: #fff;
	color: #40210F;
	font-size: 1.6rem;
	letter-spacing: .1em;
	transition: .3s;
}
#search button:hover {background: #F6EFEA;}
#search button span:nth-of-type(1) {position: relative;padding-right: 12rem;}
#search button span:nth-of-type(1)::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 50%;
	transform: translate(0,50%);
	width: 100px;
	height: 1px;
	background: #40210F;
}
#search button span:nth-of-type(2) {margin-left: 2rem;}
#search button span img {width: 18px;margin-right: 1rem;}
@media only screen and ( max-width: 767px) {
	#search .content {padding: 2rem 0;}
	#search ul.flexbox li {width: 100%;margin-bottom: 1rem;}
	#search ul.flexbox li select,
	#search ul.flexbox li input {padding: 2rem;}
	#search button {display: block;}
	#search button span {display: block;text-align: center;}
	#search button span:nth-of-type(1) {margin-bottom: 1.5rem;padding: 0 0 1.5rem;}
	#search button span:nth-of-type(1)::after {
		display: block;
		right: inherit;
		left: 50%;
		bottom: 0;
		transform: translate(-50%,0);
	}
	#search button span:nth-of-type(2) {margin-left: 0;}
}
@media only screen and ( max-width: 480px) {
}