/*--------------------------------------------------------------
Foundation
--------------------------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, i, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, figure, figcaption,
button, input, textarea, select, i {
  border: 0;
  font-style: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  font-family: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: baseline;
}

html {
  font-size: 62.5%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.grecaptcha-badge { visibility: hidden; }

body {
  font-size: 1.6rem;
  line-height: 1.5;
  background: #000;
  color: #fff;
  overflow-x: hidden;
  overflow-y: scroll;
  font-family: "NHaasGroteskDSPro-75Bd", sans-serif;
  font-weight: bold;
}

body.full {
  overflow: hidden;
}

ul, li {
  list-style: none;
}

table {
  border-collapse: collapse;
  width: 100%;
}

a:hover,
a:active,
a:focus {
  outline: 0;
}

a {
  backface-visibility: hidden;
  transition: .4s ease-out;
  transition-property: opacity, color, border, background, transform, box-shadow;
  opacity: 1;
  line-height: inherit;
}

img {
  vertical-align: middle;
}

img,
input[type="image"] {
  border: 0;
  height: auto;
  max-width: 100%;
}

input[type="submit"], input[type="button"], button {
  cursor: pointer;
  -webkit-appearance: none;
  border-radius: 0;
  font-size: inherit;
  letter-spacing: inherit;
  background: none;
}

strong {
  font-weight: bold;
}

a {
  text-decoration: none;
}

main {
  overflow: hidden;
}

/*--------------------------------------------------------------
Component
--------------------------------------------------------------*/
.evt {
  visibility: hidden;
}

.evt.done {
  visibility: visible;
}

.c_anchor {
  position: absolute;
  width: 100%;
  left: 0;
}

.c_ttl {
	font-size: 6.4rem;
	line-height: 1;
	margin-bottom: .6em;
	font-family: 'NHaasGroteskTXPro-65Md';
}

@media (max-width: 767px) {
  .c_ttl {
    font-size: 5.6rem;
  }
}

.c_ttl + p {
	margin-bottom: 6rem;
	font-family: 'NHaasGroteskTXPro-65Md';
	line-height: 1.2;
}

@media (min-width: 768px) {
  .c_ttl + p {
    width: 68rem;
  }
}

.c_btn {
  text-align: center;
}

.c_btn a {
  font-size: 1.4rem;
  display: inline-block;
  line-height: 6rem;
  width: 30rem;
  border: solid 1px #fff;
  border-radius: 3em;
  background: url(../img/ico_arrow.svg) no-repeat calc(100% - 2.8rem) center/1rem;
	font-family: 'NHaasGroteskTXPro-65Md';
}

.c_btn a:hover {
  background-color: #fff;
  color: #000;
  background-image: url(../img/ico_arrow_b.svg);
}

.glass_filter {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
}

.move_cursor {
  pointer-events: none;
  position: fixed;
  transition: opacity .6s ease-out,visibility .3s ease-out;
  opacity: 0;
  visibility: hidden;
  z-index: 5000;
  mix-blend-mode: difference;
}

.move_cursor svg {
  width: 100%;
  height: 100%;
}

.move_cursor .wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50%  -50%;
}

@media (max-width: 767px) {
	.move_cursor {
		display: none;
	}
}

.cursor_dot .wrap {
  width: 2rem;
  height: 2rem;
}

@media (max-width: 767px) {
  .cursor_dot {
    display: none;
  }
}

body.mouse_move .cursor_dot {
  opacity: 1;
  visibility: visible;
}

.cursor_drag .wrap {
  width: 9.1rem;
  height: 1.4rem;
}

body.drag_move .cursor_drag {
  opacity: 1;
  visibility: visible;
}

.popup-modal {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 9999;
  background: #000;
  display: none;
}

.popup-modal .close {
  position: absolute;
  top: 4rem;
  right: 4rem;
  cursor: pointer;
  z-index: 10;
}

.popup-modal .close img {
  width: 3rem;
  transform: rotate(45deg);
  transition: .3s;
}

.popup-modal .close:hover img {
  transform: rotate(0);
}

.popup-modal .wrap {
  display: flex;
  align-items: center;
  height: 100%;
}

@media (max-width: 767px) {
	.popup-modal .wrap {
		padding: 0 2.3rem;
	}
}

.popup-modal .box {
  margin: auto;
}

body.show-modal {
  overflow-y: hidden;
}

.switch_btn {
  width: 6.7rem;
  aspect-ratio: 1 / 1;
  border: solid 1px #fff;
  border-radius: 50%;
  cursor: pointer;
  position: absolute;
}

.switch_btn:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50%  -50%;
  height: .15rem;
  width: 2.3rem;
  background: #fff;
  transition: width .3s;
}

.switch_btn:before {
  content: '';
  position: absolute;
  background: url(../img/ico_arrow.svg) no-repeat 50%/contain;
  width: 1rem;
  height: 100%;
  transition: .3s;
  transition-property: left, right;
}

.switch_btn:hover:after {
  width: 3rem;
}

.switch_btn.prev:before {
  left: 1.8rem;
  transform: rotate(180deg);
}

.switch_btn.prev:hover:before {
  left: 1.3rem;
}

.switch_btn.next:before {
  right: 1.8rem;
}

.switch_btn.next:hover:before {
  right: 1.3rem;
}

@media (max-width: 767px) {
	.switch_btn{
		width: 5rem;
	}
	.switch_btn:after{
		width: 2rem;
	}
	.switch_btn.next:before{
		right: 1rem;
	}
	.switch_btn.prev:before{
		left: 1rem;
	}
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fadeIn {
  display: block;
  animation: fadeIn 1s;
}

@keyframes fadeOut {
  from {
    opacity: 1;
    display: block;
  }
  to {
    opacity: 0;
  }
}

.fadeOut {
  display: none;
  animation: fadeOut .8s;
}

/*--------------------------------------------------------------
Utility
--------------------------------------------------------------*/
.u_wrap {
  overflow: hidden;
}

@media (min-width: 768px) {
  .u_inner {
    margin: 0 5rem;
  }
}

@media (max-width: 767px) {
  .u_inner {
    margin: 0 2.3rem;
  }
}

html {
  font-size: 10px;
}

@media (min-width: 768px) and (max-width: 1400px) {
  html {
    font-size: calc(100vw * 10 / 1400);
  }
}

@media (max-width: 767px) {
  html {
    font-size: 9px;
  }
}

@media (max-width: 390px) {
  html {
    font-size: calc(100vw * 9 / 390);
  }
}

.u_switch_img {
  opacity: 1;
}

.u_relative {
  position: relative;
}

@media (min-width: 768px) {
  .u_visible_sp {
    display: none;
  }
  .u_tel {
    pointer-events: none;
    cursor: default;
  }
  .u_tel:hover {
    opacity: 1;
  }
}

@media (max-width: 767px) {
  .u_visible_pc {
    display: none;
  }
}

/*--------------------------------------------------------------
Layout/PageBase
--------------------------------------------------------------*/
header{
	position: relative;
	z-index: 1000;
}
#header {
  position: absolute;
  width: 100%;
  top: 0;
  z-index: 66;
  padding: 2.5rem 5rem;
  display: flex;
  gap: 5rem;
}

@media (max-width: 767px) {
  #header {
    flex-direction: column;
    padding: 2.3rem;
    gap: 1.5rem;
  }
}

.h_logo img {
	width: 46rem;
}

@media (max-width: 767px) {
	.h_logo img {
		width: 30rem;
	}
}

.c_info {
  display: flex;
  font-size: 1.2rem;
  font-weight: 400;
  font-family: "NHaasGroteskDSPro-45Lt";
  gap: 3em;
}

.c_info p {
  line-height: 1.2;
  text-align-last: justify;
}

@media (max-width: 767px) {
	.c_info {
		font-size: 1rem;
	}
}

.h_contents{
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 100%;
}

.h_row{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: auto 0;
}

.h_nav {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	font-size: 5.7rem;
	font-family: "NHaasGroteskTXPro-65Md";
	font-weight: 400;
}

.h_nav a{
	position: relative;
	padding-left: 2.1rem;
}

.h_nav a:before{
	content: '';
	position: absolute;
	top: 50%;
	translate: 0 -50%;
	width: 1.3rem;
	border: solid 1px #fff;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	left: 0;
	transition: background .5s;
}
.h_nav a:hover:before{
	background: #fff;
}

@media (max-width: 767px) {
  .h_nav {
    font-size: 4rem;
    width: 100%;
  }
  .h_nav img {
    display: none;
  }
  .h_nav a {
    display: block;
  }
  .h_nav .active:before {
    background: #fff;
  }
}

@media (min-width: 768px) {
  .h_nav img {
    width: 15rem;
    transition: opacity .3s ease-out;
  }
  .h_nav li {
    opacity: 0;
    transform: translateY(10rem);
    transition: 1s 1s;
  }
  .h_nav li a {
    opacity: 0;
    transition: opacity .5s;
  }
  body.open .h_nav li {
    opacity: 1;
    transform: none;
    transition: 1.2s cubic-bezier(0.22, 0.61, 0.11, 1);
    transition-property: transform, opacity;
  }
  body.open .h_nav li:nth-child(1) {
    transition-delay: .3s;
  }
  body.open .h_nav li:nth-child(2) {
    transition-delay: .4s;
  }
  body.open .h_nav li:nth-child(3) {
    transition-delay: .5s;
  }
  body.open .h_nav li:nth-child(4) {
    transition-delay: .6s;
  }
  body.open .h_nav li:nth-child(5) {
    transition-delay: .7s;
  }
  body.open .h_nav li a {
    opacity: 1;
    transition: none;
  }
}

.h_movies{
	width: 60rem;
}

.h_movies .movie{
	display: none;
}

.h_movies .movie.active{
	display: block;
}

.h_movies video{
	display: block;
	width: 100%;
}

@media (max-width: 767px) {
	.h_movies{
		display: none;
	}
}

.h_menu {
  position: fixed;
  right: 5rem;
  top: 3rem;
  cursor: pointer;
}

@media (max-width: 767px) {
  .h_menu {
    top: 2.3rem;
    right: 2.3rem;
  }
}

.h_menu img {
  width: 2.1rem;
  transition: .3s;
}

.h_menu:hover img {
  transform: rotate(45deg);
}

.h_close img {
  transform: rotate(-45deg);
}

.h_close:hover img {
  transform: rotate(0);
}

#toggle_menu {
	position: fixed;
	top: 0;
	right: 0;
	width: 100%;
	transition: right 0.6s cubic-bezier(0.77, 0, 0.175, 1);
	overflow-y: auto;
	height: 100%;
	background: #000;
	padding: 0 4rem;
	visibility: hidden;
}

body.close #toggle_menu {
	animation: headerFadeOut .25s linear both
}
body.open #toggle_menu {
	animation: headerFadeIn .25s linear both;
}

body.open {
  overflow-y: hidden;
}

@keyframes headerFadeIn{
	0%{
		opacity: 0;
		visibility: hidden;
	}
	100%{
		opacity: 1;
		visibility: visible;
	}
}
@keyframes headerFadeOut{
	0%{
		opacity: 1;
		visibility: visible;
	}
	100%{
		opacity: 0;
		visibility: hidden;
	}
}

.h_btm{
	padding: 6.5rem 1rem 5.7rem;
	display: flex;
	justify-content: space-between;
}
@media (max-width: 767px) {
	.h_btm{
		display: none;
	}
}

#footer {
  padding: 6.5rem 5rem 5.7rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

@media (max-width: 767px) {
  #footer {
    gap: 2rem;
    align-items: center;
    padding: 6.5rem 2.3rem 5.7rem;
  }
}

@media (max-width: 767px) {
  .f_logo {
    width: 100%;
  }
}

.f_logo img {
  width: 46rem;
}

.f_sns a {
  border: solid 1px #fff;
  border-radius: 3em;
  font-size: 1.2rem;
  padding: 0 1em;
  display: block;
	font-family: 'NHaasGroteskTXPro-65Md';
}

.f_copy{
	width: 100%;
	padding-top: 2rem;
	font-size: 1.2rem;
	font-weight: 400;
	font-family: "NHaasGroteskDSPro-45Lt";
}
@media (max-width: 767px) {
	.f_copy{
		padding-top: 0;
	}
}

.f_recapthc{
	color: #737373;
	width: 100%;
	padding-top: 2rem;
	font-size: 1.2rem;
	font-weight: 400;
	font-family: "NHaasGroteskDSPro-45Lt";
}
@media (max-width: 767px) {
	.f_recapthc{
		padding-top: 0;
	}
}

/*--------------------------------------------------------------
Project
--------------------------------------------------------------*/
.top_main {
  margin-bottom: 11rem;
}

.top_main video {
  width: 100%;
  height: 100vh;
  object-fit: cover;
}

.top_main .box {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}

.top_main p {
	line-height: 1.2;
	text-align: center;
	opacity: 0;
	transform: translateY(100%);
	font-family: 'NHaasGroteskTXPro-65Md';
}

@media (min-width: 768px) {
	.top_main p {
		text-align: justify;
		text-align-last: justify;
	}
}

.top_main p.show {
  opacity: 1;
  transform: none;
  transition: .5s ease-out;
  transition-property: opacity, transform;
}

@media (max-width: 767px) {
	.top_main .box{
		width: 75%;
	}
  .top_main p {
    width: 32rem;
    margin: 0 auto;
    font-size: 1.4rem;
  }
  .top_main p br {
    display: none;
  }
}

.top_service {
  margin-bottom: 11rem;
}

.top_service ul {
  display: flex;
}

@media (max-width: 767px) {
  .top_service ul {
    flex-direction: column;
  }
}

.top_service .ttl {
  top: 3.5rem;
  font-size: 4.2rem;
  line-height: 1;
  font-family: 'NHaasGroteskTXPro-65Md';
}

.top_service .ttl i {
  display: block;
  font-size: 1.4rem;
  margin-bottom: 3em;
}

.top_service li {
  position: relative;
  border: solid 1px #262626;
}

@media (min-width: 768px) {
  .top_service li {
    width: 25%;
  }
  .top_service li + li {
    border-left: none;
  }
}

.top_service li .ttl, .top_service li p {
  mix-blend-mode: difference;
  position: absolute;
  left: 5rem;
  z-index: 1;
}

@media (max-width: 767px) {
  .top_service li .ttl, .top_service li p {
    left: 2.3rem;
  }
}

.top_service li p {
  bottom: 4rem;
  font-size: 1.4rem;
  line-height: 1.2;
  font-family: "NHaasGroteskDSPro-45Lt";
}

.top_service li img {
  transition: opacity 0.7s cubic-bezier(0.01, -0.02, 0.02, 0);
  aspect-ratio: 323 / 618;
  object-fit: cover;
  opacity: 0;
}

@media (max-width: 767px) {
  .top_service li img {
    aspect-ratio: 1 / 1;
  }
}

.top_service li a {
  display: block;
}

@media (min-width: 768px) {
	.top_service li a:hover img {
		opacity: 1;
	}
}
@media (max-width: 767px) {
	.top_service li a img.active {
		opacity: 1;
	}
}

.top_service .box {
  display: none;
}

.service_modal:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1;
}

.service_modal dt {
	font-size: 3.8rem;
	font-family: 'NHaasGroteskTXPro-65Md';
	line-height: 1;
	margin-bottom: 1em;
}

.service_modal dt i {
  display: block;
  font-size: 1.4rem;
  margin-bottom: 4em;
}

.service_modal dd {
  font-size: 1.4rem;
  line-height: 1.2;
  font-family: "NHaasGroteskDSPro-45Lt";
  font-weight: 400;
}

.service_modal .box img {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  object-fit: cover;
}

@media (min-width: 768px) {
  .service_modal .box {
    width: 82rem;
    max-width: calc(100% - 4.6rem);
    display: flex;
    justify-content: space-between;
  }
  .service_modal .box p {
    width: 40rem;
    margin-top: 14.4rem;
  }
}

@media (max-width: 767px) {
  .service_modal .box dl {
    margin-bottom: 4rem;
  }
}

.service_modal .box dl, .service_modal .box p {
  position: relative;
  z-index: 2;
}

.service_modal .box p {
  line-height: 1.2;
  font-size: 1.4rem;
  font-family: "NHaasGroteskDSPro-45Lt";
  font-weight: 400;
}

@media (min-width: 768px) {
	.service_modal .box p {
		text-align: justify;
	}
}

.top_project {
  margin-bottom: 11rem;
}

@media (max-width: 767px) {
	.top_project .c_ttl + p{
		margin-bottom: 3rem;
	}
}

.top_project .swiper-slide {
  width: 53.2rem;
  margin: 0 .5rem;
}

@media (max-width: 767px) {
  .top_project .swiper-slide {
    width: 100%;
  }
}

.top_project .swiper-slide p {
	font-size: 2.5rem;
	margin-top: .5em;
	line-height: 1.2;
	font-family: 'NHaasGroteskTXPro-65Md';
}

@media (max-width: 767px) {
  .top_project .swiper-slide p {
    padding: 0 2.3rem;
  }
}

.top_project .swiper-slide i {
  display: inline-block;
  border: solid 1px #fff;
  padding: 0 1em;
  border-radius: 3em;
  margin-left: .8em;
  font-size: 1.2rem;
  font-family: "NHaasGroteskTXPro-55Rg";
  font-weight: 400;
  vertical-align: middle;
}

.top_project figure {
  position: relative;
  overflow: hidden;
}

.top_project figure img {
  width: 100%;
  aspect-ratio: 532 / 340;
  object-fit: cover;
  transition: .5s;
}

@media (min-width: 768px) {
	.top_project figure img:hover{
		transform: scale(1.05);
	}
}

.top_project .c_btn {
  margin-top: 6rem;
}

.top_project .slide {
  position: relative;
  top: -12rem;
  margin-bottom: -12rem;
}

@media (max-width: 767px) {
	.top_project .slide {
		top: 0;
		margin-bottom: 0;
	}
}

.top_project .swiper-slide {
  padding-top: 12rem;
  cursor: none;
}

@media (max-width: 767px) {
	.top_project .swiper-slide {
		padding-top: 8rem;
	}
}

.top_project .switch_btn {
  position: absolute;
  top: 0;
  z-index: 10;
  right: 13rem;
}

.top_project .switch_btn.next {
  right: 5rem;
}

@media (max-width: 767px) {
	.top_project .switch_btn{
		right: 9rem;
	}
	.top_project .switch_btn.next {
		right: 2.3rem;
	}
}

.top_client {
  margin-bottom: 23rem;
}

.top_client .ttl {
  font-size: 4.8rem;
  line-height: 1.2;
  margin-bottom: .6em;
	font-family: 'NHaasGroteskTXPro-65Md';
}

@media (max-width: 767px) {
  .top_client .ttl {
    font-size: 4rem;
  }
}

.top_client .ttl small {
  display: block;
  font-size: 1.6rem;
}

.top_client .row {
  display: flex;
  justify-content: space-between;
}

@media (max-width: 767px) {
  .top_client .row {
    flex-direction: column;
  }
}

.top_client section + section {
  margin-top: 9rem;
}

.top_client p {
  line-height: 1.14;
  font-size: 1.4rem;
  font-family: 'NHaasGroteskTXPro-65Md';
}

.top_client .right {
  display: flex;
}

.top_client .right p{
	line-height: 1.2;
}

@media (min-width: 768px) {
  .top_client .right {
    width: 67.3rem;
    align-items: flex-end;
    justify-content: space-between;
  }
  .top_client .right figure {
    width: 32.3rem;
  }
  .top_client .right p {
    width: 31.3rem;
  }
}

@media (max-width: 767px) {
	.top_client .right {
		align-items: flex-end;
		gap: 2.3rem;
	}
	.top_client .right > *{
		flex: 1;
	}
}

.top_client figure {
  position: relative;
}

@media (max-width: 767px) {
  .top_client figure {
    margin: 9rem 0 0;
  }
}

.top_client figure.show i {
  transform: scale(1, 0);
}

.form {
	font-size: 1.4rem;
	font-family: 'NHaasGroteskTXPro-65Md';
}

.form div.wpcf7 .ajax-loader {
  position: absolute;
  left: 0;
  background-color: transparent;
}

.form div.wpcf7 .ajax-loader:before {
  content: none;
}

.form .wpcf7-spinner {
  display: none !important;
}

.form span.wpcf7-list-item {
  margin: 0;
  display: inline;
}

.form .wpcf7c-conf:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px #000 inset;
}

.form input:-webkit-autofill, .form select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px #000 inset;
  -webkit-text-fill-color: #ffffff;
}

.form input[readonly], .form textarea[readonly], .form select[readonly] {
  border: none !important;
  background: #000;
}

.form .c_ttl {
  margin-bottom: 5.5rem;
}

@media (min-width: 768px) {
  .form .row {
    display: flex;
    gap: 5rem;
  }
  .form .row > * {
    width: 50%;
  }
}

.form .right {
  margin-top: 2rem;
}

@media (max-width: 767px) {
  .form .right {
    margin-top: 2em;
  }
}

.form .name {
  display: flex;
  gap: 2em;
}

@media (max-width: 767px) {
  .form .name {
    flex-direction: column;
  }
}

@media (min-width: 768px) {
  .form .name p {
    width: 50%;
  }
}

.form input[type="text"], .form input[type="email"], .form input[type="tel"], .form textarea, .form select {
	background: none;
	width: 100%;
	padding: 0 0 1em;
	-webkit-appearance: none;
	border-bottom: solid 1px #fff;
	border-radius: 0;
	font-family: inherit !important;
}

.form input[type="text"]::placeholder, .form input[type="email"]::placeholder, .form input[type="tel"]::placeholder, .form textarea::placeholder, .form select::placeholder {
  color: #fff;
}

.form input[type="text"]:-ms-input-placeholder, .form input[type="email"]:-ms-input-placeholder, .form input[type="tel"]:-ms-input-placeholder, .form textarea:-ms-input-placeholder, .form select:-ms-input-placeholder {
  color: #fff;
}

.form input[type="text"]::-ms-input-placeholder, .form input[type="email"]::-ms-input-placeholder, .form input[type="tel"]::-ms-input-placeholder, .form textarea::-ms-input-placeholder, .form select::-ms-input-placeholder {
  color: #fff;
}

.form select {
  border: solid 1px #fff;
  height: 6rem;
  border-radius: 3em;
  padding: 0 2em;
  margin-bottom: 4rem;
  background: url(../img/ico_arrow_down.svg) no-repeat calc(100% - 2.8rem) center/1.1rem;
}

.form .wpcf7-not-valid-tip{
	display: none;
}

@media (min-width: 768px) {
  .form select {
    width: calc(50% - 1em);
  }
}

.form option {
  color: #000;
}

.form textarea {
  height: 8.4em;
  display: block;
}

.form .btn {
  text-align: center;
  margin-top: 5rem;
}

.form .btn input {
  border: solid 1px #fff;
  width: 100%;
  height: 6rem;
  border-radius: 3em;
  transition: .4s ease-out;
  transition-property: color, background;
}

.form .btn input:hover {
  background: #fff;
  color: #000;
}

.low {
  margin-top: 14rem;
}

@media (max-width: 767px) {
  .low {
    margin-top: 8rem;
  }
}

.low_path {
  margin: 12rem 0 6rem;
  font-size: 1.2rem;
  font-family: "NHaasGroteskTXPro-55Rg";
  font-weight: 400;
  display: flex;
}

@media (max-width: 767px) {
  .low_path {
    margin: 16rem 0 4rem;
  }
}

.low_path li + li:before {
  content: '/';
  margin: 0 .25em;
}

.project_list {
  overflow: hidden;
  position: relative;
}

.project_list .slide1 {
  padding: 10rem 5.9rem;
  position: absolute;
  width: 100%;
  height: 100vh;
  z-index: 10;
}

@media (max-width: 767px) {
  .project_list .slide1 {
    padding: 10rem 2.3rem 26rem;
  }
}

.project_list .slide1 .swiper {
  overflow: hidden;
  width: 100%;
  height: 100%;
  z-index: 10;
}

.project_list .slide1 .swiper-slide {
  opacity: .5;
  transition: opacity .5s;
}

.project_list .slide1 .swiper-slide:hover {
  opacity: 1;
}

@media (max-width: 767px) {
  .project_list .slide1 .swiper-slide {
    height: auto;
    padding: 3rem 0;
  }
}

@media (min-width: 768px) {
  .project_list .slide1 .swiper-slide {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: calc((100vh - 20rem) / 7);
  }
}

.project_list .slide1 .swiper-slide-active {
  opacity: 1;
}

@media (min-width: 768px) {
  .project_list .slide1 a {
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    word-break: break-all;
  }
}

.project_list .slide1 p {
  font-size: 4.8rem;
  position: relative;
  margin-right: .5em;
  line-height: 1.2;
	font-family: 'NHaasGroteskTXPro-65Md';
}

@media (max-width: 767px) {
	.project_list .slide1 p {
		display: inline-block;
		font-size: 3.6rem;
		margin-right: 0;
		line-height: 1;
		word-break: break-all;
	}
}

.project_list .slide1 p:after {
  display: none;
  content: '/';
  position: absolute;
  right: 0;
  top: 0;
}

@media (max-width: 767px) {
	.project_list .slide1 p:after {
		display: none;
	}
}

.project_list .slide1 ul {
  display: flex;
  font-size: 1.2rem;
  gap: 1em;
}

@media (max-width: 767px) {
  .project_list .slide1 ul {
    margin-top: .5rem;
  }
}

.project_list .slide1 li {
  font-family: "NHaasGroteskTXPro-55Rg";
  font-weight: 400;
  text-align: center;
}

.project_list .slide1 li a {
  border-radius: 3em;
  border: solid 1px #fff;
  padding: 0 1em;
  pointer-events: none;
  white-space: nowrap;
}

.project_list .slide1 li a:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: transparent;
}

.project_list .slide2 img {
  width: 100%;
  height: 100vh;
  object-fit: cover;
}

.project_list .slide2 .swiper-slide-active img {
  animation: swiper-slide-active .8s forwards;
}

.project_list .copy {
  position: absolute;
  right: 6rem;
  bottom: 12rem;
  z-index: 10;
  font-size: 1rem;
  font-family: "NHaasGroteskTXPro-55Rg";
  font-weight: 400;
}

.project_list .btn {
  position: absolute;
  bottom: 4rem;
  width: 100%;
  padding: 0 6rem;
  z-index: 30;
}

@media (max-width: 767px) {
	.project_list .copy {
		bottom: 22rem;
	}
  .project_list .btn {
    padding: 0 2.3rem;
    bottom: 15rem;
  }
}

.project_list .btn a {
  display: block;
  line-height: 4rem;
  font-size: 1.4rem;
  text-align: center;
  border: solid 1px #fff;
  border-radius: 3em;
	font-family: 'NHaasGroteskTXPro-65Md';
}

.project_list .btn a:hover {
  background: #fff;
  color: #000;
}

.project_list .btn a:hover p:after {
  width: 3rem;
  background: #000;
}

.project_list .btn a:hover p:before {
  left: 2.5rem;
  background-image: url(../img/ico_arrow_b.svg);
}

.project_list .btn a:hover i {
  left: 1rem;
}

.project_list .btn p {
  display: inline-block;
  padding-left: 3.5rem;
  position: relative;
}

.project_list .btn p:after {
  content: '';
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  height: .15rem;
  width: 2rem;
  background: #fff;
  transition: width .3s;
  left: 0;
}

.project_list .btn p:before {
  content: '';
  position: absolute;
  background: url(../img/ico_arrow.svg) no-repeat 50%/contain;
  width: 1rem;
  height: 100%;
  transition: left .3s;
  left: 1.5rem;
}

.project_list .btn p i {
  position: relative;
  transition: left .3s;
  display: inline-block;
  left: 0;
}

@keyframes swiper-slide-prev {
  0% {
    transform: translateY(0%) scaleY(0) scaleX(0) rotate(0deg);
    opacity: 1;
  }
  30% {
    opacity: 0;
  }
  100% {
    transform: translateY(-10%) scaleY(1.24) scaleX(1.1) rotate(-6deg);
    opacity: 1;
  }
}

@keyframes swiper-slide-active {
  0% {
    transform: translateY(0%) scaleY(1.2) scaleX(1.05) rotate(4deg);
    opacity: 1;
  }
  100% {
    transform: translateY(0%) scaleY(1) scaleX(1) rotate(0deg);
    opacity: 1;
  }
}

.project_detail .header {
  position: relative;
}

.project_detail .ttl {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 100%;
  text-align: center;
  font-size: 4.8rem;
  line-height: 1.125;
  mix-blend-mode: difference;
  padding: 0 2.3rem 3rem;
	font-family: 'NHaasGroteskTXPro-65Md';
}

@media (max-width: 767px) {
  .project_detail .ttl {
    font-size: 2.4rem;
    padding-bottom: 0;
  }
}

.project_detail img, .project_detail video {
	width: 100%;
	object-fit: cover;
	aspect-ratio: 3 / 2;
}

.project_detail figure {
  width: 100%;
}

.project_detail .row {
  display: flex;
  gap: 4rem;
  margin-top: 4rem;
}

.project_detail .row:not(.col1) img, .project_detail .row:not(.col1) video {
  aspect-ratio: 4 / 5;
}

@media (max-width: 767px) {
  .project_detail .row {
	  flex-direction: column;
    gap: 1.5rem;
    margin-top: 1.5rem;
  }
}

.project_detail .txt {
  font-size: 1.2;
}

.project_detail .desc {
  font-weight: 400;
  padding-top: 4.7rem;
  margin: 4rem 0 6rem;
  border-top: solid 1px rgba(255, 255, 255, 0.3);
  font-family: 'NHaasGroteskTXPro-65Md';
}

.project_detail .desc dl {
  display: flex;
  flex-wrap: wrap;
  gap: .3em 0;
  font-family: "NHaasGroteskTXPro-55Rg";
}

@media (max-width: 767px) {
  .project_detail .desc dl {
    border-top: solid 1px rgba(255, 255, 255, 0.3);
    padding-top: 4rem;
    margin-top: 4rem;
  }
}

.project_detail .desc dt {
  width: 7em;
  text-transform: uppercase;
}

.project_detail .desc dd {
  width: calc(100% - 7em);
  text-align: right;
}

.project_detail .desc dd a {
  display: inline-block;
  font-size: 1.2rem;
  border-radius: 3em;
  border: solid 1px #fff;
  padding: 0 1em;
  margin-bottom: .5em;
	pointer-events: none;
}

.project_detail .desc .txt{
	font-family: "NHaasGroteskTXPro-55Rg";
	font-size: 1.2rem;
}

@media (min-width: 768px) {
  .project_detail .desc {
    display: flex;
    align-items: flex-start;
    position: relative;
  }
  .project_detail .desc dl {
    width: 33rem;
    padding: 2.5rem;
  }
  .project_detail .desc .txt {
    border-right: solid 1px rgba(255, 255, 255, 0.3);
    width: calc(100% - 33rem);
  }
}

.projects_body {
  font-family: "NHaasGroteskTXPro-55Rg";
  font-weight: 400;
}

.projects_body .ttl {
  margin: -3rem 0 2rem;
}

@media (max-width: 767px) {
  .projects_body .ttl {
    margin: -1.5rem 0 2rem;
  }
}

.projects_body .lead {
  font-size: 1.2rem;
}

.projects_body .cat_parent{
	display: flex;
	align-items: center;
	height: 8rem;
}

.projects_body .cat {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  height: 8rem;
  gap: 0 1em;
  font-size: 1.2rem;
}

.projects_body .cat.cat-sticky{
	position: fixed;
	inset: 0 auto auto 50%;
	translate: -50% 0;
	width: calc(100% - 10rem);
	z-index: 999;
}

.projects_body .cat a {
  border-radius: 3em;
  border: solid 1px #fff;
  padding: 0 1em;
  display: block;
}

@media (max-width: 767px) {
	.projects_body .cat_parent{
		height: 6rem;
		margin: 1rem 0;
	}
	.projects_body .cat {
		height: 6rem;
		margin: 1rem 0;
	}
	.projects_body .cat.cat-sticky{
		width: calc(100% - 4.6rem);
	}
}

.projects_body .cat a:hover, .projects_body .cat a.active {
  background: rgba(255, 255, 255, 0.2);
  border-color: transparent;
}

.projects_body .list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4rem;
}

@media (max-width: 767px) {
  .projects_body .list {
    grid-template-columns: repeat(1, 1fr);
    gap: 1.5rem;
  }
}

.projects_body .list figure{
	overflow: hidden;
}

.projects_body .list img {
  aspect-ratio: 4 / 5;
  width: 100%;
  object-fit: cover;
  transition: .5s;
}

@media (min-width: 768px) {
	.projects_body .list img:hover {
		transform: scale(1.05);
	}
}


.projects_body .list a {
  display: block;
  position: relative;
}

.projects_body .list p {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 2rem;
  font-size: 2.4rem;
  line-height: 1.2;
}

.projects_body .list p i {
  display: inline-block;
  font-size: 1.2rem;
  border-radius: 3em;
  border: solid 1px #fff;
  padding: 0 1em;
  margin-right: .6em;
}

/* .projects_body .list li {
  clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
}

.projects_body .list li.show {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  transition: clip-path 1s;
} */

/* .projects_body .list.video img {
  aspect-ratio: 680 / 453;
}

@media (min-width: 768px) {
  .projects_body .list.video {
    grid-template-columns: repeat(1, 1fr);
    width: 68rem;
    margin: 0 auto;
  }
} */

.projects_body .box {
  display: none;
}

.projects_body .c_btn {
  margin-top: 6rem;
}

.projects_body .embed {
  margin-bottom: 3.5rem;
}

.projects_body .embed iframe {
  width: 100%;
}

.list_modal .switch_btn {
  left: 0;
  bottom: 0;
}

.list_modal .switch_btn.next {
  left: 8rem;
}

@media (max-width: 767px) {
	.list_modal .switch_btn.prev{
		left: auto;
		right: 6.5rem;
	}
	.list_modal .switch_btn.next {
		left: auto;
		right: 0;
	}
}

.list_modal dt {
  font-size: 4.2rem;
  line-height: 1.33;
  margin-bottom: 1em;
	font-family: 'NHaasGroteskTXPro-65Md';
}

@media (max-width: 767px) {
  .list_modal dt {
    font-size: 3.2rem;
    line-height: 1.2;
  }
}

.list_modal dd {
  font-family: "NHaasGroteskTXPro-55Rg";
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.33;
}

.creator_modal .wrap {
  padding: 0 6rem;
  position: relative;
  overflow: hidden;
  overflow-y: auto;
}

@media (max-width: 767px) {
  .creator_modal .wrap {
    padding: 0 2.3rem 5rem;
  }
}

.creator_modal .box {
  position: relative;
}

@media (max-width: 767px) {
  .creator_modal .box {
    padding: 6rem 0 0
  }
}

@media (max-width: 767px) {
  .creator_modal .slide {
    width: calc(100vw - 4.6rem);
    margin-top: 5rem;
    position: relative;
    padding-bottom: 7rem;
  }
}

@media (min-width: 768px) {
  .creator_modal .box {
    width: 100%;
    display: flex;
    margin-right: 6rem;
    justify-content: space-between;
    align-items: center;
    padding: 7rem 0;
  }
  .creator_modal dl {
    width: calc(100% - 37vw);
  }
  .creator_modal .slide {
    width: 35vw;
    overflow: hidden;
  }
}

.video_modal .wrap {
  padding: 0 6rem 9rem;
  overflow: hidden;
  overflow-y: auto;
}

@media (max-width: 767px) {
  .video_modal .wrap {
    padding: 0 2.3rem 5rem;
  }
}

.video_modal .box {
  position: relative;
  padding: 11rem 0 12rem;
}

@media (max-width: 767px) {
  .video_modal .box {
    padding: 6rem 0 10rem;
  }
}

.video_modal video {
  aspect-ratio: 3 / 2;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.video_modal video.ver {
  aspect-ratio: 4 / 5;
  width: 53.5%;
  display: block;
  margin: 0 auto;
}

@media (max-width: 767px) {
	.video_modal video.ver {
		width: 100%;
	}
}

.video_modal .slide,
.creator_modal .slide{
  margin-bottom: 5rem;
}

.video_modal .slide{
	position: relative;
	padding-bottom: 10rem;
}

@media (max-width: 767px) {
  .video_modal .slide {
    width: calc(100vw - 4.6rem);
    margin-top: 5rem;
    position: relative;
    padding-bottom: 7rem;
  }
}

@media (min-width: 768px) {
  .video_modal .box {
    width: 89.2rem;
  }
}

/*# sourceMappingURL=style.css.map */