@charset "utf-8";

/*
// common
///////////////////////////////////////////////////////////////*/

*{
	margin:0px;
	padding:0px;
}
html,body{
	width:100%;
	height: 100%;
}
img{
	width: 100%;
	height: auto;
}
a{
	transition: 0.3s;
}
a:hover{
	text-align: none;
}

/*
// Color
///////////////////////////////////////////////////////////////*/

:root{
	--c-white : #fff;
	--c-bg : #F1F1F1;
	--c-text : #444;
	--c-text-dark : #000;
	--c-border :#ccc;

	--c-main: #FF6000;
	--c-accent : #000;

	--c-bg-light : #F9f9f9;

	--c-link: #FF6000;
}


/*
// font
///////////////////////////////////////////////////////////////*/

:root{
	--font-london : 'London Tube', sans-serif;
	--font-chonburi : "Chonburi", serif;
}

@font-face {
    font-family: 'London Tube';
    font-style: normal;
    font-weight: 400;
    src: local('London Tube'), url('../fonts/London-Tube.woff') format('woff');
}




/*
// html
///////////////////////////////////////////////////////////////*/
html{
	font-size: 16px;
}
@media all and (min-width:0px) and (max-width:1000px) {
	html{
		font-size: 3.2vw;
	}
}

/*
// body
///////////////////////////////////////////////////////////////*/
body{
	font-family: 'Noto Sans JP',  sans-serif;
	font-weight: 400;
	color: var(--c-text);
	line-height: 2;
	background: var(--c-white);
	overflow-x: hidden;
}
@media all and (min-width:0px) and (max-width:1000px) {
}


/*
// wrap
///////////////////////////////////////////////////////////////*/
.wrapper{
	position: relative;
	width: 100%;
	height: auto;
}
.inner{
	position: relative;
	width: 1000px;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
	padding: 0 3vw;
}
@media all and (min-width:0px) and (max-width:1000px) {
	.wrapper,
	.inner{
		width: 100%;
		padding: 0 6vw;
	}
}



/*
// nav
///////////////////////////////////////////////////////////////*/

.nav__button{
	position: fixed;
	top: 0;
	right: 0;
	z-index: 200;
	padding: 3rem;
	mix-blend-mode: exclusion;
	color: var(--c-white);
}
.nav__button .nav__button__hamburger{
	height: calc(1.5rem + 2px);
}
.nav__button .nav__button__hamburger span{
	position: relative;
	width: 6rem;
	height: 2px;
	background-color: var(--c-white);
	display: block;
	transition: 0.3s;
}
.nav__button .nav__button__hamburger span:nth-child(2){
	transform: translateY(0.75rem);
}
.nav__button .nav__button__hamburger span:nth-child(3){
	transform: translateY(1.5rem);
}
.nav__button.is-open .nav__button__hamburger span:nth-child(1),
.nav__button.is-open .nav__button__hamburger span:nth-child(3){
	width: 0;
}
.nav__button .nav__button__label{
	font-family: var(--font-london);
	text-align: center;
	height: 1rem;
	margin-top: 0.5rem;
}
.nav__button .nav__button__label::before{
	content: 'MENU';
}
.nav__button.is-open .nav__button__label::before{
	content: 'CLOSE';
}
.nav__content{
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 150;
	width: 100dvw;
	height: 100dvh;
	background-color: rgba(255,255,255,0.5);
	overflow-y: auto;
}
main.is-fade{
	filter: blur(10px);
	overflow: hidden;
}
.nav__content__wrapper{
	padding: 10vw;
}
.nav__content__wrapper h1 img{
	display: block;
	width: 30vw;
	height: auto;
}
nav .nav__content__list{
	font-size: 2rem;
	font-family: var(--font-london);
	color: var(--c-text-dark);
	margin-top: 5rem;
	line-height: 1;
}
nav .nav__content__list li + li{
	margin-top: 2rem;
}
nav .nav__content__list li a:hover{
	text-decoration: line-through;
}
@media all and (min-width:0px) and (max-width:1000px) {
	.nav__button{
		padding: 1.5rem;
	}
	.nav__button .nav__button__hamburger span{
		width: 5rem;
	}
	.nav__content__wrapper{
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		height: 100%;
	}
	.nav__content__wrapper h1 img{
		width: 75vw;
	}
}


/*
// .section
///////////////////////////////////////////////////////////////*/
main > section{
	padding: 10rem 0;
}
.section__heading + .section__content{
	margin-top: 4rem;
}
@media all and (min-width:0px) and (max-width:1000px) {
	main section{
		padding: 15vw 0;
	}
}

/*
// .button
///////////////////////////////////////////////////////////////*/
.common__button{
    box-shadow: 0px 4px 0px 0px rgba(0, 0, 0, 0.25);
    text-decoration: none;
	transition: 0.3s;
}
.common__button:hover{
    box-shadow: none;
	transform: translateY(4px);
}
.common__button--arrow{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.5rem 1.5rem;
	line-height: 1;
	border-radius: 0.25rem;
	background-color: var(--c-text-dark);
	color: var(--c-white);
	width: 300px;
	margin: 0 auto;
}
.common__button--arrow::after{
	width: 1rem;
	height: 1rem;
	background-image: url('../images/icon_arrow-right.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center right;
	content: '';
}
@media all and (min-width:0px) and (max-width:1000px) {
	.common__button--arrow{
		width: 100%;
		padding: 2rem;
	}
}

/*
// .heading
///////////////////////////////////////////////////////////////*/
.heading--01{
	height: 12vw;
	line-height: 1;
	text-align: center;
	font-family: var(--font-london);
	position: relative;
	overflow: hidden;
}
.heading--01 span{
	font-size: 12vw;
	opacity: 0.05;
}
.heading--01 h2{
	font-size: 4rem;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	color: var(--c-text-dark);
}
@media all and (min-width:0px) and (max-width:1000px) {
	.heading--01{
		height: 6rem;
	}
	.heading--01 span{
		font-size: 6rem;
	}
	.heading--01 h2{
		font-size: 3rem;
	}
}

/*
// mv
///////////////////////////////////////////////////////////////*/
#mv{
	padding: 0;
}
#mv h1{
	padding: 16rem 0 12rem 0;
	width: 75vw;
	margin: auto;
}
#mv h1 img{
	display: block;
	height: auto;
}
@media all and (min-width:0px) and (max-width:1000px) {
	#mv h1{
		padding: 16rem 0 12rem 0;
	}
}



/*
// catchcopy
///////////////////////////////////////////////////////////////*/
#catchcopy{
	text-align: center;
	padding-top: 0;
	position: relative;
}
#catchcopy .label{
	font-family: var(--font-london);
	font-size: 2rem;
	margin-bottom: 1.5rem;
	line-height: 1;
}
#catchcopy::after{
	display: block;
	height: 10rem;
	width: 1px;
	background-color: var(--c-text);
	content: '';
	position: absolute;
	bottom: -4rem;
	left: 50%;
	z-index: 1;
}
@media all and (min-width:0px) and (max-width:1000px) {
	#catchcopy::after{
		height: 7rem;
	}
}


/*
// service
///////////////////////////////////////////////////////////////*/
#service{
	padding: 0 4vw;
}
#service .wrapper{
	border-radius: 10vw;
	background-color: var(--c-bg);
	padding-top: 6rem;
	padding-bottom: 10rem;
}
#service .serviceList{
	display: flex;
	flex-wrap: wrap;
	margin: -3rem;
}
#service .serviceList .serviceList__item{
	margin: 3rem;
	width: calc( 50% - 6rem);
}
#service .serviceList__item__heading{
	display: flex;
	align-items: center;
	line-height: 1;
	color: var(--c-text-dark);
}
#service .serviceList__item__heading .num{
	font-family: var(--font-chonburi);
	font-size: 4rem;
	margin-right: 1.5rem;
}
#service .serviceList__item__heading .text{
	font-weight: 800;
	font-size: 2rem;
}
#service .serviceList__item__content{
	margin-top: 2rem;
}
#service .serviceList__list{
	margin-left: 1.5rem;
	list-style-type: disc;
}
@media all and (min-width:0px) and (max-width:1000px) {
	#service{
		padding: 0 6vw;
	}
	#service .wrapper{
		border-radius: 2rem;
		padding-top: 5rem;
		padding-bottom: 5rem;
	}
	#service .serviceList .serviceList__item{
		width: 100%;
		margin: 1.5rem;
	}
	#service .serviceList__item__heading .num{
		font-size: 3rem;
	}
	#service .serviceList__item__heading .text{
		font-size: 1.5rem;
	}
	#service .serviceList__item__content{
		margin-top: 1rem;
	}
}
@media all and (min-width:961px) and (max-width:1100px) {
	#service .serviceList{
		margin: -1.5rem;
	}
	#service .serviceList .serviceList__item{
		width: 100%;
		margin: 1.5rem;
	}
	#service .serviceList__item__heading .num{
		font-size: 3rem;
	}
	#service .serviceList__item__heading .text{
		font-size: 1.5rem;
	}
	#service .serviceList__item__content{
		margin-top: 1rem;
	}
}


/*
// works
///////////////////////////////////////////////////////////////*/
#works{
	padding: 10rem 10vw;
	display: flex;
}
#works .section__heading{
	width: 17rem;
	margin-right: 5vw;
	flex-shrink: 0;
}
#works .section__heading .heading{
	position: sticky;
	top: 3rem;
	color: var(--c-text-dark);
}
#works .section__heading .heading::before{
	position: absolute;
	left: -10vw;
	top: 50%;
	width: 8vw;
	height: 1px;
	background-color: var(--c-text-dark);
	content:'';
}
#works .section__heading h2{
	line-height: 1;
	font-family: var(--font-london);
	font-size: 4rem;
}
#works .section__content{
	flex-grow: 1;
	margin-top: 0;
	counter-reset: worksPrimaryListNumber 0;
}
#works .worksPrimaryList__list li + li{
	margin-top: 1.5rem;
}
#works .worksPrimaryList__list li{
	background-color: var(--c-bg);
}
#works .worksPrimaryList__list li .label{
	padding: 2rem 3rem;
	display: flex;
	align-items: center;
	color: var(--c-text-dark);
	font-weight: 500;
	line-height: 1;
	gap: 1.5rem;
	cursor: pointer;
}
#works .worksPrimaryList__list li .label .num{
	font-size: 3rem;
	font-family: var(--font-chonburi);
	flex-shrink: 0;
}
#works .worksPrimaryList__list li .label .num::before{
	counter-increment: worksPrimaryListNumber;
	content: counter(worksPrimaryListNumber, decimal-leading-zero) "";
}
#works .worksPrimaryList__list li .label .text{
	font-size: 1.25rem;
	flex-grow: 1;
}
#works .worksPrimaryList__list li .label .icon{
	width: 1.25rem;
	height: 1.25rem;
	position: relative;
	flex-shrink: 0;
}
#works .worksPrimaryList__list li .label .icon::before,
#works .worksPrimaryList__list li .label .icon::after{
	position: absolute;
	content: '';
	background-color: var(--c-text-dark);
}
#works .worksPrimaryList__list li .label .icon::before{
	width: 1.25rem;
	height: 2px;
	top: calc(50% - 1px);
	left: 0;
}
#works .worksPrimaryList__list li .label .icon::after{
	width: 2px;
	height: 1.25rem;
	left: calc(50% - 1px);
	top: 0;
	transition: 0.3s;
}
#works .worksPrimaryList__list li.is-open{
	box-shadow: none;
	transform: translateY(4px);
}
#works .worksPrimaryList__list li.is-open .label .icon::after{
	opacity: 0;
}
#works .worksPrimaryList__list li .content{
	display: none;
	padding: 0 3rem 2rem 3rem;
}
#works .worksMedia{
	margin-top: 8rem;
}
#works .worksMedia__item + .worksMedia__item{
	margin-top: 5rem;
}
#works .worksMedia__item .worksMedia__item__heading{
	line-height: 1;
	display: flex;
	gap: 1.5rem;
	align-items: center;
}
#works .worksMedia__item__heading h3{
	font-family: var(--font-london);
	color: var(--c-text-dark);
	font-size: 2rem;
	flex-shrink: 0;
}
#works .worksMedia__item__heading::after{
	content: '';
	height: 1px;
	width: 100%;
	background-color: var(--c-text-dark);
}
#works .worksMedia__item__content{
	margin-top: 1.5rem;
}
#works .worksMedia__list{
	display: flex;
	flex-wrap: wrap;
	margin: -0.5rem 0;
}
#works .worksMedia__list li{
	flex-shrink: 0;
	margin: 0.5rem 0 0.5rem 1.5rem;
	position: relative;
}
#works .worksMedia__list li::before{
	position: absolute;
	left: -1.5rem;
	content :'・';
	width: 1rem;
	height: 1rem;
}
#works .worksMedia__list li.col1{
	width: calc(100% - 1.5rem);
	display: flex;
}
#works .worksMedia__list li.col1 .label{
	font-weight: 800;
	width: 11rem;
	flex-shrink: 0;
}
#works .worksMedia__list li.col4{
	width: calc(25% - 1.5rem);
	font-weight: 800;
}
@media all and (min-width:0px) and (max-width:1000px) {
	#works{
		flex-direction: column;
		padding: 15vw 6vw;
	}
	#works .section__heading h2{
		font-size: 3rem;
	}
	#works .section__content{
		margin-top: 2rem;
	}
	#works .worksPrimaryList__list li .label{
		padding: 1.5rem 2rem;
	}
	#works .worksPrimaryList__list li .label .num{
		font-size: 2rem
	}
	#works .worksPrimaryList__list li .label .text{
		font-size: 1.1rem;
	}
	#works .worksMedia{
		margin-top: 5rem;
	}
	#works .worksMedia__list{
		margin: -0.25rem 0;
	}
	#works .worksMedia__list li{
		margin: 0.25rem 0 0.25rem 1.5rem;
	}
	#works .worksMedia__list li.col1{
		flex-direction: column;
	}
	#works .worksMedia__list li.col4 {
		width: calc(50% - 1.5rem);
	}
	#works .worksMedia__item + .worksMedia__item{
		margin-top: 4rem;
	}
}


/*
// profile
///////////////////////////////////////////////////////////////*/
#profile{
	padding: 10rem 0;
	background-color: var(--c-bg-light);
}
#profile .profileList__item + .profileList__item{
	margin-top: 4rem;
}
#profile .profileList__item__heading{
	line-height: 1;
	color: var(--c-text-dark);
}
#profile .profileList__item__heading .en{
	font-size: 2rem;
	font-family: var(--font-london);
}
#profile .profileList__item__heading .jp{
	font-size: 1.25rem;
	margin-top: 1rem;
	font-weight: 500;
}
#profile .profileList__item__content{
	margin-top: 1.5rem;
}
@media all and (min-width:0px) and (max-width:1000px) {
	#profile{
		padding: 15vw 0;
	}
}


/*
// contact
///////////////////////////////////////////////////////////////*/
#contact{
	background-color: var(--c-bg);
}
#contact.is-confirm,
#contact.is-send{
	background-color: var(--c-white);
}
#contact .section__heading h2{
	font-family: var(--font-london);
	font-size: 4rem;
	text-align: center;
	color: var(--c-text-dark);
	line-height: 1;
}
#contact .contact__step{
	margin-bottom: 4rem;
}
#contact .contact__step ul{
	display: flex;
	align-items: center;
}
#contact .contact__step ul li{
	position: relative;
	padding-top: 1.5rem;
	width: calc(100% / 3);
	text-align: center;
	font-weight: 500;
	color: var(--c-text);
}
#contact .contact__step ul li.is-current{
	color: var(--c-text-dark);
	font-weight: 800;
}
#contact .contact__step ul li::before{
	position: absolute;
	content: '';
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 1.25rem;
	height: 1.25rem;
	background-color: var(--c-white);
	border: 2px solid var(--c-border);
	border-radius: 50%;
	z-index: 1;
}
#contact .contact__step ul li:not(:last-of-type)::after{
	position: absolute;
	content: '';
	top: 0.625rem;
	left: 50%;
	width: 100%;
	height: 2px;
	background-color: var(--c-border);
}
#contact .contact__step ul li.is-current::before{
	background-color: var(--c-text);
	border-color: var(--c-text);
}
#contact #contact__form .form__item + .form__item{
	margin-top: 1.5rem;
}
#contact #contact__form .form__item{
	display: flex;
	gap: 2rem;
	align-items: flex-start;
}
#contact #contact__form .form__item .label{
	width: 15rem;
	flex-shrink: 0;
	display: flex;
	justify-content: space-between;
}
#contact #contact__form .form__item .label .necessary{
	border: 1px solid var(--c-text);
	border-radius: 0.25rem;
	color: var(--c-text);
	line-height: 1;
	padding: 0.5rem 1rem;
}
#contact #contact__form .form__item .label .necessary.is-required{
	background-color: var(--c-text);
	color: var(--c-white);
}
#contact #contact__form .form__item .label .necessary.is-norequired::before{
	content: '任意';
}
#contact #contact__form .form__item .label .necessary.is-required::before{
	content: '必須';
}
#contact #contact__form .form__item .input,
#contact #contact__form .form__item .input__confirm{
	flex-grow: 1;
}
#contact #contact__form .form__item .input__confirm{
	color: var(--c-text-dark);
	font-weight: 500;
}
#contact #contact__form .form__item .input input,
#contact #contact__form .form__item .input textarea{
	width: 100%;
	padding: 0.5rem 1rem;
	background-color: var(--c-white);
	border-radius: 0.25rem;
}
#contact #contact__form .form__item .input input{
}
#contact #contact__form .form__item .input textarea{
	height: 10rem;
}
#contact #contact__form .form__item .text{
	text-align: center;
	width: 100%;
	margin-top: 1rem;
}
#contact #contact__form .form__item .submit{
	width: 100%;
	text-align: center;
	margin-top: 1rem;
}
#contact #contact__form .form__item .back{
	width: 100%;
	text-align: center;
	color: var(--c-text-dark);
	font-weight: 500;
}
#contact #contact__form .form__item .note{
	width: 100%;
	background-color: var(--c-bg-light);
	padding: 1.5rem;
	font-size: 0.8rem;
	margin-top: 1rem;
}
#contact #contact__form .form__item .note a{
	text-decoration: underline;
}
#contact .contact__send{
	text-align: center;
}
#contact .contact__send a{
	margin-top: 1.5rem;
}
@media all and (min-width:0px) and (max-width:1000px) {
	#contact #contact__form .form__item{
		flex-direction: column;
		gap: 0.5rem;
	}
	#contact #contact__form .form__item + .form__item{
		margin-top: 2rem;
	}
	#contact #contact__form .form__item .label,
	#contact #contact__form .form__item .input,
	#contact #contact__form .form__item .input__confirm{
		width: 100%;
	}
	#contact #contact__form .form__item .label{
		gap: 1rem;
        justify-content: flex-end;
        flex-direction: row-reverse;
	}
	#contact #contact__form .form__item .label label{
		font-weight: 500;
	}
	#contact #contact__form .form__item .input input,
	#contact #contact__form .form__item .input textarea{
		padding: 1rem;
	}
}


/*
// general
///////////////////////////////////////////////////////////////*/
#general{
}
#general .section__heading h2{
	font-family: var(--font-london);
	font-size: 4rem;
	text-align: center;
	color: var(--c-text-dark);
	line-height: 1;
}
.entry-content h2{
	font-size: 2rem;
}
.entry-content h2 + *,
.entry-content p + *{
	margin-top: 2rem;
}
.entry-content h2 + p,
.entry-content p + p{
	margin-top: 1rem;
}
.entry-content p a{
	text-decoration: underline;
}


/*
// footer
///////////////////////////////////////////////////////////////*/
footer{
	background-color: var(--c-text-dark);
	color: var(--c-white);
	padding: 4rem 0 ;
	text-align: center;
}
.footer__logo img{
	width: 50vw;
	height: auto;
	max-width: 400px;
}
.footer__copyright{
	margin-top: 3rem;
	font-size: 0.8rem;
}
.footer__copyright ul{
	display: flex;
	justify-content: center;
	gap: 0.5rem;
}
@media all and (min-width:0px) and (max-width:1000px) {

}



/*
// recaptcha
///////////////////////////////////////////////////////////////*/
.grecaptcha-badge { visibility: hidden; }