@charset "UTF-8";

/*=====================================
style
=====================================*/
:root {
    --wht: #fff;
    --blk: #000;
    --lgry: #d1d1cf;
    --pgry: #eaeae8;
    --trp: rgba(255,255,255,0);
}
@media (min-width: 835px) {
	:root {
		--t3xl: clamp(57px, 4.067vw, 61px);
		--t2xl: clamp(45px, 3.267vw, 49px);
		--txl: clamp(35px, 2.6vw, 39px);
		--tl: clamp(21px, 1.667vw, 26px);
		--tm: clamp(17px, 1.333vw, 21px);
		--nm: clamp(14px, 1.067vw, 17px);
		--ts: clamp(10px, .667vw, 13px);
	}
}
@media (max-width: 834px) {
	:root {
		--t3xl: clamp(35px, 10.2vw, 39px);
		--t2xl: clamp(24px, 6.54vw, 28px);
		--txl: clamp(19px, 5.12vw, 24px);
		--tl: clamp(17px, 4.6vw, 21px);
		--tm: clamp(15px, 3.94vw, 18px);
		--nm: clamp(13px, 3.58vw, 15px);
		--ts: clamp(8px, 2.3vw, 10px);
	}
}
a {
	color: var(--clr1);
    text-decoration: none;
}
@media (hover: hover) {
	a, a * {
    	transition: .3s	
	}
	a:hover {
		color: var(--clr2);
		text-decoration: none
	}
	a::before, a::after {
		transition: .3s
	}
}
html, body {
	color: var(--blk);
	font-family: "Figtree", "Noto Sans JP", serif;
	font-size: var(--nm);
	line-height: 2;
	letter-spacing: .02em
}
body {
	overflow-x: hidden;
	width: 100%;
	background-color: var(--pgry)
}


/*=====================================
header
=====================================*/
header {
    flex-shrink: 0;
    position: fixed;
    z-index: 9999;
	top: 0;
    left: 50%;
	width: 100%;
	transform: translateX(-50%);
}
.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
	gap: 5vw;
    background: var(--pgry)
}
.header__logo {
	margin: 0;
    padding: 0;
}
.header__logo a {
    display: flex;
    align-items: center;
    justify-content: center;
	flex-direction: column-reverse;
	font-weight: 400;
	text-decoration: none
}
.header__logo a .hdr-logo {
	flex-shrink: 0;
	aspect-ratio: 1000/118;
}
.global-navigation__list {
	list-style: none
}
.global-navigation__list li a {
	color: var(--blk);
	font-weight: 500;
	text-decoration: none;
	text-transform: uppercase
}
.global-navigation__list li a.hdr__btn {
	padding: .2em 1.8em;
	background-color: var(--blk);
	border-radius: 30px;
	color: var(--wht);
}
@media (min-width: 1080px) {
	.header__inner {
		height: 100px;
		padding: 0 4%;
		transition: .4s
	}
	.header__logo a .hdr-logo {
		height: 25px
	}
	.humberger {
		display: none
	}
	.header__nav {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
	.header__nav .header__menu {
		width: min(100%,1040px)
	}
	.global-navigation {
		display: flex;
		align-items: center;
		gap: 2.8%
	}
	.global-navigation__list {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		gap: 2rem
	}
	.global-navigation__list > li {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 3px;
		height: 30px;
		background-image: -webkit-linear-gradient(to right, var(--blk) 0%, var(--blk) 100%);
		background-image: linear-gradient(to right, var(--blk) 0%, var(--blk) 100%);
		background-repeat: no-repeat;
		background-position: bottom center;
    	background-size: 0 2px;
		font-size: clamp(12px, 1.1vw, 15px);
		list-style: none;
		transition: .3s
	}
	.global-navigation__list > li:not([class]) {
		background-image: -webkit-linear-gradient(to right, var(--blk) 0%, var(--blk) 100%);
		background-image: linear-gradient(to right, var(--blk) 0%, var(--blk) 100%);
		background-repeat: no-repeat;
		background-position: bottom center;
    	background-size: 0 2px;
	}
	.global-navigation__list li a {
		display: block;
	}
	.global-navigation__list li a:hover {
		color: var(--blk)
	}
	.global-navigation__list li.selected,
	.global-navigation__list li:not([class]):hover {
    	background-size: 100% 2px;
	}
	.global-navigation__list li a.hdr__btn:hover {
		background-color: var(--wht);
		border-radius: 30px;
		color: var(--blk);
	}
	main {
		margin-top: 100px;
	}
}
@media (max-width: 1079px) {
/*global navi*/
	header {
		top: 0;
		width: 100%
	}
	.header__inner {
		height: 60px;
		padding-left: 4vw
	}
	.header__logo a .hdr-logo {
		height: 20px
	}
	.humberger {
		display: block;
		height: 60px;
		margin-top: auto;
		margin-left: auto;
		margin-bottom: auto;
		position: relative;
		z-index: 10;
		width: 60px;
		border: none;
		background-color: var(--clr1);
	}
	.humberger__line {
		display: block;
		height: 1.5px;
		position: absolute;
		top: 28px;
		left: 50%;
		transform: translateX(-50%);
		width: 26px;
		background-color: var(--blk);
		transition: 0.4s;
	}
	.humberger__line:before,
	.humberger__line:after {
		content: "";
		display: block;
		position: absolute;
		height: 100%;
		background-color: var(--blk);
		transition: inherit;
	}
	.humberger__line:before {
		top: -8px;
		width: 100%;
	}
	.humberger__line:after {
		top: 8px;
		width: 50%;
	}
	.humberger.-active .humberger__line {
		background-color: transparent;
	}
	.humberger.-active .humberger__line::before {
		top: 0;
		transform: rotate(45deg);
	}
	.humberger.-active .humberger__line::after {
		top: 0;
		transform: rotate(-45deg);
		width: 100%;
	}
	.humberger__text {
		position: absolute;
		bottom: 8px;
		left: 50%;
		transform: translateX(-50%);
		width: 100%;
	}
	.header__nav-area {
		position: fixed;
		top: max(10vw,60px);
		left: 0;
		z-index: 9;
		height: 100vh;
		width: 100vw;
		visibility: hidden;
		padding: 0;
		background-color: var(--pgry);
		opacity: 0;
		transition: .4s;
	}
	.header__nav-area.-active {
		opacity: 1;
		visibility: visible;
		overflow-y: scroll
	}
	.global-navigation {
		padding: 0 0 60px;
	}
	.global-navigation__list {
		padding: 0
	}
	.global-navigation__list > li {
		padding: .6em;
		text-align: center
	}
	.global-navigation__list > li.hdr__cv {
		padding: 1em 1rem;
	}
	.global-navigation__list > li a {
		display: inline-block;
		margin: auto;
		padding: .4em 1rem;
		width: 40%;
	}
	main {
		margin-top: 60px;
	}
}


/*=====================================
footer
=====================================*/
footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.copyright {
	font-size: var(--ts);
	text-align: center
}
.ftr__ic {
	display: block;
	aspect-ratio: 844/779;
	height: 25px
}
@media (min-width: 835px) {
	footer {
		padding: 4%
	}
}
@media (max-width: 834px) {
	footer {
		padding: 10% 4% 8%
	}
}

/*=====================================
base layout
=====================================*/
[class^="inner-"] {
    clear: both;
    margin-left: auto;
    margin-right: auto;
}
@media (min-width: 835px) {
	.inner-l {
		width: min(81.25%, 1040px)
	}
	.inner-m {
		width: min(64%, 826px)
	}
	.inner-s {
		width: min(49.5%, 614px)
	}
	.spno {
		display: block!important;
	}
	.pcno {
		display: none!important;
	}
	.mgt03 {
		margin-top: min(2%,14px)
	}
	.mgt05 {
		margin-top: min(4%,28px)
	}
	.mgt10 {
		margin-top: min(8%,56px)
	}
	.mgt13 {
		margin-top: min(10%,70px)
	}
}
@media (max-width: 834px) {
	.inner-l, .inner-m, .inner-s {
    	width: min(100%,88vw);
	}
	.spno {
		display: none!important;
	}
	.pcno {
		display: block!important;
	}
	.mgt03 {
		margin-top: 3%
	}
	.mgt05 {
		margin-top: 5%
	}
	.mgt10 {
		margin-top: 10%
	}
	.mgt13 {
		margin-top: 12.5%
	}
}
.dsno {
	display: none
}
.ofh {
    overflow: hidden
}
.txt-c {
	text-align: center
}
.txt-r {
	text-align: right
}
.notes {
	font-size: var(--ts);
	line-height: 1.5
}
.en {
	line-height: 1.5
}
.char {
	display:inline-block;
	opacity:0;
	transform:translateY(.5em);
}

.active .char {
	animation: slide-in .6s cubic-bezier(.22,1,.36,1) both;
	animation-delay: calc(60ms * var(--char-index));
}

.active.delay .char {
	animation-delay: calc(60ms * var(--char-index));
}

@keyframes slide-in {
	to {
		opacity:1;
		transform:translateY(0);
	}
}
@-webkit-keyframes  slide-in {
	to {
		opacity:1;
		transform:translateY(0);
	}
}
@keyframes cpyAnm {
    0% {
        opacity: 0;
		filter: blur(1.5rem);
    }
    100% {
        opacity: 1;
		filter: blur(0);
    }
}
@-webkit-keyframes cpyAnm {
    0% {
        opacity: 0;
		filter: blur(1.5rem);
    }
    100% {
        opacity: 1;
		filter: blur(0);
    }
}


/*=====================================
top page
=====================================*/
.mv {
	position: relative;
	width: 100%;
	overflow: hidden
}
.mv__inner {
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	width: 100%;
	color: var(--wht);
}
.mv video {
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 100%;
	object-fit: cover
}
.mv__inner h1 {
	width: fit-content;
	font-weight: 800;
	line-height: 1.1;
	text-transform: uppercase;
	opacity: 0;
    -webkit-animation: cpyAnm 2s ease-out .5s 1 forwards;
    animation: cpyAnm 2s ease-out .5s 1 forwards
}
.mv__inner h1 .split {
	display: block;
}
.mv__txt__inner {
	opacity: 0;
    -webkit-animation: cpyAnm 2s ease-out 1.5s 1 forwards;
    animation: cpyAnm 2s ease-out 1.5s 1 forwards
}
.mv__txt {
	display: flex;
}
.mv__txt__inner {
	flex-basis: 60%
}
.mv__txt__inner p {
	text-align: left;
}
.mv__txt__inner p.en {
	font-size: var(--tl)
}
.mv__txt__inner p.jp {
	margin-top: 2%;
	font-size: var(--nm)
}
.mv__txt .mv-logo {
	flex-shrink: 0;
	aspect-ratio: 1000/118;
	opacity: 0;
    -webkit-animation: cpyAnm 2s ease-out 2.5s 1 forwards;
    animation: cpyAnm 2s ease-out 2.5s 1 forwards
}
@media (min-width: 835px) {
	.mv,
	.mv__inner,
	.mv video {
		aspect-ratio: 16/9
	}
	.mv__inner {
		padding: 4% 8%
	}
	.mv__inner h1 {
		font-size: 7.4vw
	}
	.mv__txt {
		align-items: flex-end;
		justify-content: space-between;
		padding: 2%;
	}
	.mv__txt .mv-logo {
		margin-bottom: .4em;
		width: 34.8%;
	}
}
@media (max-width: 834px) {
	.mv,
	.mv__inner,
	.mv video {
		aspect-ratio: 9/16
	}
	.mv__inner {
		padding: 0 8% 5%
	}
	.mv__inner h1 {
		font-size: 11.5vw
	}
	.mv__txt {
		flex-direction: column;
		align-items: center;
		padding: 5% 0;
	}
	.mv__txt .mv-logo {
		margin-top: 10%;
		width: 60%;
	}
}


/*=====================================
common
=====================================*/
.contents {
	padding-top: 5%
}
.bg-asia {
	background: url("../imgs/bg-asia.webp") no-repeat left top / 40%
}
.ttl-cmn {
	display: block;
	font-size: var(--t3xl);
	font-weight: 800;
	line-height: 1.1;
	text-align: center;
	text-transform: uppercase
}
.lead {
	font-size: var(--tm);
	font-weight: 700
}
.box {
  opacity: 0;
  transform: translateY(30px);
  transition: .8s;
}

.box.is-active {
  opacity: 1;
  transform: translateY(0);
}
.contact-form {
	display: flex;
	flex-wrap: wrap;
	border-top: 1px solid var(--lgry);
}
.contact-form strong {
	font-weight: 700
}
.wpcf7-form textarea,
.wpcf7-form input[type=text],
.wpcf7-form input[type=email]{
    padding: .4rem .8rem;
    border: 1px solid var(--wht);
	background-color: var(--wht);
	line-height: 1.4;
    outline: none;
	transition: all .3s
}
.wpcf7-form input[type=text]:focus,
.wpcf7-form input[type=email]:focus,
.wpcf7-form textarea:focus {
    border: 1px solid var(--lgry)
}
.wpcf7-form input[type=submit] {
	padding: .2em 3.6em;
	border: 0;
    border-radius: 30px;
	outline: none;
	cursor: pointer;
	font-size: var(--tm);
    background-color: var(--blk);
    color: var(--wht);
	transition: .3s
}
.wpcf7-form input[type=submit]:hover {
    background-color: var(--wht);
    color: var(--blk);
}
.wpcf7-spinner{
 display: block!important;
 margin: 0.5em auto 0!important;
}
.btnArea {
	text-align: center
}
.contact-form dt {
	line-height: 1.4
}
.contact-form dd {
		border-bottom: 1px solid var(--lgry);
}
@media (min-width: 835px) {
	.ttl-cmn {
		padding: min(4%,50px) 0;
	}
	.contact-form {
	}
	.contact-form dt {
		flex-basis: 30%;
		padding: 3%;
		border-bottom: 1px solid var(--lgry);
	}
	.contact-form dd {
		flex-basis: 70%;
		padding: 3%;
	}
	.form_S {
		width: 40%
	}
	.form_M {
		width: 65%
	}
	.form_L {
		width: 100%
	}
	.btnArea {
		padding: 4% 4%;
	}
}
@media (max-width: 834px) {
 .bg-asia {
	background: url("../imgs/bg-asia.webp") no-repeat left top / 100%
}
	.ttl-cmn {
		padding: 6% 0;
	}
	.contact-form {
		flex-direction: column;
		border-top: 1px solid var(--lgry);
	}
	.contact-form dt {
		padding: 4% 3% 0;
	}
	.contact-form dd {
		padding: 2% 3% 5%;
	}
	.form_S,
	.form_M,
	.form_L {
		width: 100%
	}
	.btnArea {
		padding: 8% 4%;
	}
}
.works .works__item + .works__item {
	margin-top: 3%
}
.works__item {
	background-color: var(--wht)
}
.works__item__ph {
	overflow: hidden
}
.works__item__ph img {
	object-fit: cover;
	object-position: center;
	width: 100%;
	height: 100%;
}
.works__item__txt > * + * {
	margin-top: 1em
}
.works__item__txt h2 {
	margin-bottom: .5em;
	font-size: var(--tl);
	font-weight: 700;
	line-height: 1.4;
}
.works__item__txt p {
	margin-bottom: .5em
}
.works__item__txt p.has-medium-font-size
 {
  font-size: 1.09em;
  	line-height: 1.6;
}
.pagination {
	display: flex;
	align-items: center;
	justify-content: center;
    flex-wrap: wrap;
	list-style: none
}
.pagination > li {
    padding: .5em
}
.pagination li a:not(.link__before):not(.link__next),
.pagination li span {
    display: block;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    color: var(--gry);
    font-weight: 700;
    line-height: 2.5rem;
    text-align: center;
    text-decoration: none;
    transition: .3s
}
.pagination li a:not(.link__before):not(.link__next) {
    background: var(--wht);
    border: 1px solid var(--lgry)
}
.pagination li a:not(.link__before):not(.link__next):hover {
    border: 1px solid var(--wht);
    color: var(--lgry)
}
.pagination li .current__page {
    background: var(--blk);
    border: 1px solid var(--blk);
    color: var(--wht)
}
.pagination li:not(.link__before):not(.link__next)::before {
    display: none
}
.pagination li a.link__before,
.pagination li a.link__next {
    display: block;
    font-size: 0
}
.pagination li a.link__before::before,
.pagination li a.link__next::before {
    content: '';
    display: block;
    width: .8rem;
    height: .8rem;
    border-top: 2px solid var(--blk);
    border-right: 2px solid var(--blk);
    transition: .3s
}
.pagination li a.link__before::before {
    margin-right: 15px;
    transform: rotate(-135deg)
}
.pagination li a.link__next::before {
    margin-left: 15px;
    transform: rotate(45deg)
}
@media (min-width: 835px) {
	.works__item {
		display: flex;
		align-items: stretch
	}
	.works__item__ph {
		flex-basis: 44.7%;
		flex-shrink: 0;
	}
	.works__item__ph img {
		transition: .3s
	}
	.works__item__ph:hover img {
		transform: scale(1.1)
	}
	.works__item__txt {
		padding: 3%
	}
	.pagination li a.link__before:hover::before,
	.pagination li a.link__next:hover::before {
		border-top: 2px solid var(--wht);
		border-right: 2px solid var(--wht);
	}
}
@media (max-width: 834px) {
	.works__item__ph {
		aspect-ratio: 16/9;
	}
	.works__item__txt {
		padding: 4% 5%
	}
	.works__item__txt p {
		font-size: clamp(11px, 3.16vw, 13px);
		line-height: 1.8
	}
 .works__item__txt p.has-medium-font-size
 {
  font-size: clamp(12px, 3.45vw, 14.2px)!important;
}
}
.cmn__ttl {
	margin-bottom: 3%;
	font-size: var(--tl);
}
.cmn__ttl small {
	display: block;
	margin-bottom: 3%;
	font-size: var(--nm);
}
.cmn__ttl strong {
	display: block;
	font-size: var(--t2xl);
	line-height: 1
}
.profile__ph {
	object-fit: cover;
}
table {
	border-top: 1px solid var(--lgry)
}
table th,
table td {
	padding: 3%;
	border-bottom: 1px solid var(--lgry);
	line-height: 1.5;
	text-align: left;
	vertical-align: top
}
table th {
	font-weight: 400;
}
table th strong {
	font-weight: 700
}
@media (min-width: 835px) {
	.profile__ph {
		float: right;
		aspect-ratio: 2/3;
		width: 25%;
		margin-left: 30px;
		margin-bottom: 20px;
		border-radius: 1rem;
	}
	.company__table th {
		width: 30%
	}
}
@media (max-width: 834px) {
	.profile__ph {
		float: right;
		aspect-ratio: 1/1;
		width: 33%;
		margin: 0 auto 3%;
		border-radius: .5rem;
	}
	.company__table th {
		width: 40%
	}
}
.point__list {
	list-style: none
}
.point__list__item {
	position: relative;
	overflow: hidden;
}
.point__list__item img {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	object-fit: cover;
	object-position: center;
	transform: translate(-50%, -50%);
}
.point__list__item span {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: var(--wht);
	font-size: var(--tl);
	font-weight: 700;
	text-align: center;
	text-transform: uppercase;
	line-height: 1.1
}
@media (min-width: 835px) {
	.point__list {
		display: flex
	}
	.point__list__item {
		flex-basis: calc(100% / 3);
		aspect-ratio: 400/225;
	}
	.point__list__item img {
		aspect-ratio: 400/225;
		transition: .3s;
	}
	.point__list__item:hover img {
		transform: scale(1.1) translate(-45%, -45%)
	}
}
@media (max-width: 834px) {
	.point__list__item,
	.point__list__item img {
		aspect-ratio: 3/1
	}
}