@charset "utf-8";

/* common */
main section		{ position: relative; overflow: hidden; }
main section:not(:last-child)	{ margin-bottom: 10px; }
main figure			{ width: 100%; }
main figure img		{ width: 100%; height: auto; }
main .lead			{ position: absolute; top: 50%; padding: 30px 35px; font-family: 'Noto Sans JP', sans-serif; background: #fff; transform: translateY(-50%); }
main .lead p    { font-size: 1.6rem; }
main h3        { font-family: 'Noto Sans JP', sans-serif; font-weight: 400; font-size: 3.8rem; color: #000; }

#animation_container { position: relative; width: 100% !important; height: 0 !important; padding-top: 56.51%; }
#animation_container canvas { display: block; position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; }

#person::before { content: ''; position: absolute; bottom: 0; right: 0; width: 100%; height: 50%; background: #eee; transform: rotate(-35deg) translate(25%, 90%); }

#service::before { content: ''; position: absolute; bottom: 0; right: 0; width: 100%; height: 50%; background: #fff; transform: rotate(-35deg) translate(25%, 90%); }

.title-area h2    { line-height: 1; }
.title-area span { display: block; margin-left: 30px; font-family: 'Noto Sans JP', sans-serif; font-weight: 700; font-size: 2rem; }

#vision .title-area,
#service .title-area,
#message .title-area,
#recruiting .title-area { position: absolute;  }

#vision .title-area,
#message .title-area { top: 30px; right: 0; }
#service .title-area { top: 0; left: 0; }
#recruiting .title-area { top: 0; left: 0; }


#person h2::before { bottom: 39px; right: 96px; width: 46%; background: #fff; }
#service h2::before { bottom: 41px; right: -256px; width: 90%; background: #eee; }

.lead h3         { margin-bottom: 14px; font-family: 'Noto Sans JP', sans-serif; font-weight: 400; font-size: 3.8rem; color: #000; }
.lead p          { font-family: 'Noto Sans JP', sans-serif; font-weight: 400; font-size: 1.6rem;  }

#person .lead { text-align: left; }

#person .lead { right: 50%; margin-top: -512px; margin-right: -665px; transform: translate(-50%, -50%); }
#vision .lead,
#message .lead 	{ width: 508px; }
#vision .lead		{ left: 106px; transform: translateY(-50%); }
#message .lead { width: 508px;  }
#service .lead { right: 50%; margin-top: -202px; margin-right: -818px; background: #eee; transform: translate(-50%, -50%); }
#message .lead  { top: unset; bottom: 50%; right: 50%; margin-right: -250px; margin-bottom: -80px; transform: translate(50%, 50%); }
@media all and (-ms-high-contrast: none) {
  #message .lead  { top: auto; }
}

#person .lead h3,
#service .lead h3 { text-align: right; }

#person .lead p,
#service .lead p   { text-align: right; }

#person .inner-person				{ z-index: 2; position: relative; z-index: 0; width: 100%; padding: 0 0 80px; }
#person .parallel					{ width: 860px; margin: 0 auto; }
#person .title-area					{ position: relative; margin-bottom: 50px; }
#person .title-area h2,
#person .title-area p				{ display: table-cell; vertical-align: middle; }
#person .title-area h2				{ width: 6em; line-height: 1; }
#person .parallel:after				{ content: ""; clear: both; display: block; height: 0; }
#person .parallel li				{ float: left; width: 400px; margin-right: 30px; /*background: #fff;*/ }
#person .parallel li:nth-child(2n){ margin-top: 50px; }
#person .parallel li:last-child		{ margin-right: 0; }
#person .parallel li a				{ display: block; }
#person .parallel li a:hover		{ opacity: 1; }
#person .parallel li a figure		{ width: 400px; height: 220px; /*background: #fff;*/ overflow: hidden; }
#person .parallel li a img			{ display: block; transition-duration: .3s; }
#person .parallel li a:hover img	{ /*opacity: 0.7;*/ transform: scale(1.1); transition-duration: .3s; }
#person .parallel li dl				{ position: relative; top: -1px; padding: 20px; background: #000; color: #fff; font-family: 'Noto Sans JP', sans-serif; transition-duration: .3s; }
#person .parallel li a:hover dl		{ /*background: rgba(0, 0, 0, 0.6);*/ background: #999; }
#person .parallel li dl:after		{ content: "\f105"; position: absolute; top: 50%; right: 15px; margin-top: -12px; font-family: "Font Awesome 5 Pro"; font-size: 1.8rem; }
#person .parallel li dd		{ position: relative; margin-right: 1em; font-size: 1.4rem; font-weight: normal; }
#person .parallel li dd span			{ font-size: 1.8rem; font-weight: 700; }
#person .parallel li dd span::before		{ content: '／'; left: 0; position: relative; margin: 0 0.5em; font-size: 1.4rem; font-weight: normal; }

#vision .link-box { margin-top: 30px; }

#service                    { padding: 335px 0 60px; background: #eee; }
#service .service-list    { position: relative; z-index: 2; width: 1020px; margin: 0 auto; }
#service .service-list::after { content: ''; display: block; clear: both; }
#service .service-list li { float: left; width: 320px; padding-left: 14px; margin-right: 30px;  list-style: none; }
#service .service-list li:first-of-type { background: #e198b4; }
#service .service-list li:nth-of-type(2) { background: #1da9b7; }
#service .service-list li:last-of-type { margin-right: 0; background: #ebd56c; }
#service .service-list dl { padding: 30px; font-family: 'Noto Sans JP', sans-serif; font-weight: 400; color: #fff; background: #000; }
#service .service-list dt { margin-bottom: 20px; font-size: 2.4rem; line-height: 1; }
#service .service-list dd { font-size: 1.4rem; line-height: 1.6; }
#service .link-box         { margin-top: 40px; text-align: center; }

#message .link-box { margin-top: 30px; }

#movie .movie-area { width: 768px; margin: 40px auto 90px; }
#movie .movie-area a { display: block; }
#movie .movie-area a:hover { opacity: 0.8; }

#recruiting  h3							{ color: #000; font-size: 3rem; font-weight: 700; line-height: 1; }
#recruiting .inner-recruit				{ position: absolute; z-index: 1; right: 0; left: 0; bottom: 50%; width: 930px; margin: 0 auto -250px; text-align: center; }
#recruiting .parallel					{ display: flex; }
#recruiting .parallel > li				{ width: calc((100% - 30px) / 2); margin-right: 30px; padding: 40px;  font-family: 'Noto Sans JP', sans-serif; background: #fff; }
#recruiting .parallel > li:nth-child(2n){ margin-right: 0; }

#recruiting .inner-parallel						{ margin: 30px auto 0; display: flex; justify-content: center; }
#recruiting .inner-parallel:after				{ content: ""; clear: both; display: block; height: 0; }
#recruiting .inner-parallel li					{ float: left; margin-right: 22px; }
#recruiting .inner-parallel li:last-of-type		{ margin-right: 0; }
/* #recruiting .inner-parallel li a				{ display: block; position: relative; width: 180px; height: 180px; padding: 20px 0 0; color: #fff; } */
#recruiting .inner-parallel li.new-graduate a	{ background: #235dac; }
#recruiting .inner-parallel li a i:first-of-type{ display: block; margin-left: 5px; font-size: 4rem; }
#recruiting .inner-parallel li a i:last-of-type	{ position: absolute; bottom: 20px; left: 50%; margin-left: -10px; font-size: 2rem; }
#recruiting .inner-parallel li:first-of-type a i:first-of-type	{ margin-bottom: 30px; }
#recruiting .inner-parallel li:last-of-type a i:first-of-type	{ margin-bottom: 20px; }

#recruiting .entry a { display: flex; justify-content: center; align-items: center; width: 100%; height: 120px; margin-top: 30px; font-family: 'Noto Sans JP', sans-serif; font-weight: 700; font-size: 3.2rem; color: #fff; background: #cc0001; }

@media (max-width: 767px) {
main				{ padding-bottom: 25px; }
main section:not(:last-child)	{ margin-bottom: 25px; }
main .lead			{ position: static; padding: 20px; background: #fff; transform: translateY(0); }
main h2:first-letter{ font-size: 6.4rem; }
main h2:before		{ width: 6.4rem; height: 6.4rem; }

#animation_container { padding-top: 133%; }

.title-area span { margin-top: -15px; margin-left: 0; font-size: 1.2rem; }
.title-area img { width: 100%; height: auto; }

.lead h3 { font-size: 2.6rem; }
.lead p { font-size: 1.4rem; }

#service .title-area{ position: relative; }

#vision .title-area { top: 20px; right: 0; width: 40%; }
#service .title-area { top: unset;}
#message .title-area { top: 30px; right: 0; width: 60%; }
#movie .title-area { width: 80%; }
#recruiting .title-area { top: 40px; left: unset; right: 0; width: 90%; }

#person .title-area h2,
#service .title-area h2 { width: 80%; }

#recruiting .title-area span {
  margin-top: 0;
}

#person .lead { right: unset; margin-top: 0; margin-right: 0; transform: none; }
#vision .lead { width: calc(100% - 40px); margin: -30px 20px 0; }
#service .lead { right: unset; margin-top: 0; margin-right: 0; padding: 20px 0; transform: none; }
#message .lead { position: relative; right: unset; width: calc(100% - 40px); margin: -30px 20px 0; padding: 20px; transform: none;}

#person::before { width: 140%; height: 30%; transform: rotate(-35deg) translate(0%, 95%); }
#person .inner-person				{ position: static; padding: 0 20px; }
#person .parallel					{ width: auto; }
#person .title-area					{ display: block; margin-bottom: 0; }
#person .title-area h2,
#person .title-area p				{ display: block; }
#person .parallel li				{ float: none; width: auto; margin: 0 0 25px; }
#person .parallel li:nth-child(2n) { margin-top: 0; }
#person .parallel li a figure { width: 100%; height: auto; }

#service { padding: 0 20px; }
#service::before { width: 120%; height: 25%; transform: rotate(-45deg) translate(0, 90%); }
#service .service-list { width: 100%; }
#service .service-list li { width: 100%; margin-right: 0; margin-bottom: 30px; }
#service .service-list li:last-child { margin-bottom: 0; }
#service .service-list dl { padding: 20px 40px; }
#service .service-list dt { margin-bottom: 20px; font-size: 2.4rem; }
#service .service-list dd { font-size: 1.4rem; }
#service .link-box         { width: 50%; margin: 40px auto 60px; }

#movie { padding: 0 20px; background: #eee; }
#movie .movie-area { width: 100%; margin: 30px auto 60px; }

#recruiting h3 { font-size: 2rem; }
#recruiting .inner-recruit				{ width: 100%; margin: 0 auto -275px; }
#recruiting .parallel					{ display: block; width: 100%; }
#recruiting .parallel > li				{ display: block; width: calc(100vw - 40px); margin: 0 auto 15px; padding: 30px 45px; background: #fff; }
#recruiting .parallel > li:last-child	{ margin: 0 auto; }
#recruiting .inner-parallel						{ width: auto; margin: 15px auto 0; }

#recruiting .inner-parallel li					{ float: none; margin: 0 0 15px; }
#recruiting .inner-parallel li:last-child		{ margin-bottom: 0; }
#recruiting .inner-parallel li a i:first-of-type{ display: inline-block; position: absolute; left: 20px; margin-left: 0; font-size: 3rem; }
#recruiting .inner-parallel li a i:last-of-type	{ top: 50%; bottom: auto; left: auto; right: 20px; margin: -12px 0 0; }
#recruiting .inner-parallel li:first-of-type a i:first-of-type,
#recruiting .inner-parallel li:last-of-type a i:first-of-type	{ margin-bottom: 0; }
#recruiting .inner-parallel li:first-of-type a i:first-of-type	{ margin-top: -4px; }
#recruiting .inner-parallel						{ display: block; }
#recruiting .entry { margin: 0 20px; }
}

@media (min-width: 600px) and (max-width: 767px) {
#recruiting  h2	{ top: 15.5vw; }
}