@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 : #fff;
	--c-text : #555;
	--c-border :#ddd;
	--c-red : rgb(212, 76, 71);
	--c-link : #beaf79;
	--c-link-l : rgba(190, 175, 121, 0.25);
	--c-accent : #ff385d;

	--c-blue: rgb(231, 243, 248);
}



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

/*
// body
///////////////////////////////////////////////////////////////*/
body{
	font-family: 'Poppins', 'Noto Sans JP',  sans-serif;
	color: var(--c-text);
	line-height: 1.7;
	background: var(--c-bg);
}
@media all and (min-width:0px) and (max-width:960px) {
}


/*
// wrap
///////////////////////////////////////////////////////////////*/
.wrap{
	width: 100%;
	height: auto;
	margin: 0 auto;
	padding: 0 6vw;
}
@media all and (min-width:0px) and (max-width:960px) {
}


/*
// header
///////////////////////////////////////////////////////////////*/
header{
	width: 100%;
	padding: 2rem 0;
	background-color: var(--c-white);
}
header .headerColumn{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
header #headerBio{
	display: flex;
}
header #headerBio__image{
	width: 5rem;
	height: 5rem;
	overflow: hidden;
	border-radius: 50%;
	margin-right: 1rem;
	flex-shrink: 0;
}
header #headerBio__image img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
header #headerBio__name{
	padding-top: 1rem;
}
header #headerBio__name h1{
	line-height: 1;
	font-size: 1.2rem;
	font-weight: 900;
}
header #headerBio__name span{
	display: block;
	line-height: 1.5;
	font-size: 0.9rem;
	opacity: 0.5;
	margin-top: 0.5rem;
}
header #headerBio__link{
	margin-top: 0.5rem;
}
header #headerBio__link ul{
	margin: -0.25rem;
	display: flex;
}
header #headerBio__link ul li{
	margin: 0.25rem;
}
header #headerBio__link ul li a{
	display: flex;
	width: 2rem;
	height: 2rem;
	border-radius: 100rem;
	background-color: var(--c-text);
	justify-content: center;
	align-items: center;
}
header #headerBio__link ul li a img{
	width: 1rem;
	height: 1rem;
}
header #headerNav ul{
	display: flex;
	align-items: center;
	margin: -0.25rem;
}
header #headerNav ul li{
	margin: 0.25rem;
}
header #headerNav ul li span{
	border-radius: 100rem;
	display: block;
	padding: 0.75rem 1.5rem;
	line-height: 1;
	background-color: var(--c-link-l);
	font-weight: 700;
}
header #headerNav ul li.is-current span{
	background-color: var(--c-link);
	color: var(--c-white);
}
header #headerNav ul li span:hover{
	opacity: 0.75;
}
@media all and (min-width:0px) and (max-width:960px) {
	header .headerColumn{
		flex-direction: column;
	}
	header #headerNav{
		margin-top: 2rem;
		width: 100%;
	}
	header #headerNav ul{
		flex-wrap: wrap;
	}
	header #headerNav ul li span{
		font-size: 0.85rem;
	}
}
@media all and (min-width:961px)  {
	header{
		position: fixed;
		top:0;
		left: 0;
		z-index: 11;
	}
}


/*
// main
///////////////////////////////////////////////////////////////*/
main{
	padding: calc(7rem + 4rem) 0 ;
}
main .block + .block{
	margin-top: 1.5rem;
}
main a{
	text-decoration: underline;
	color: var(--c-link);
}
main a:hover{
	text-decoration: none;
}
@media all and (min-width:0px) and (max-width:960px) {
	main{
		padding: 0 0 4rem 0;
	}
}

/*
// .section
///////////////////////////////////////////////////////////////*/
.section__heading{
	padding: 4rem 0;
	font-weight: 900;
	font-size: 2rem;
}
@media all and (min-width:0px) and (max-width:960px) {
	.section__heading{
		padding: 2rem 0;
	}
}

/*
// .entry-content
///////////////////////////////////////////////////////////////*/
.entry-content > *{
	margin-bottom: 1rem;
	line-height: 2;
}
.entry-content  h3{
	font-size: 1.5rem;
	font-weight: 700;
	margin-top: 3rem;
	border-bottom: 1px solid var(--c-border);
}
.entry-content  h4{
	font-size: 1.15rem;
	font-weight: 700;
	margin-top: 3rem;
}
.entry-content  a{
	color: var(--c-accent);
}
.entry-content ul{
	padding-left: 1.5rem;
	list-style: disc;
}
@media all and (min-width:0px) and (max-width:960px) {

}

/*
// worksTab
///////////////////////////////////////////////////////////////*/
#worksTab .wrap{
	width: 100%;
}
#worksTab__label{
	position: sticky;
	top: 10.5rem;
	background-color: var(--c-white);
	z-index: 10;
}
#worksTab__label ul{
	display: flex;
	margin: 0 -0.5rem;
}
#worksTab__label ul li{
	margin: 0 0.5rem;
	padding: 0.5rem;
	line-height: 1;
	opacity: 0.5;
	font-weight: 900;

}
#worksTab__label ul li.is-current{
	opacity: 1;
	border-bottom: 4px solid var(--c-link);
}
#worksTab__content{
	margin-top: 1.5rem;
	min-height: 50vh;
}
#worksTab__content ul{
	display: flex;
	margin: -0.5rem;
	flex-wrap: wrap;
}
#worksTab__content ul li{
	width: calc( (100% / 4 ) - 1rem );
	margin: 0.5rem;
	overflow: hidden;
	border-radius: 6px;
	aspect-ratio: 3/2;
}
#worksTab__content ul li div,
#worksTab__content ul li a{
	display: block;
	width: 100%;
	height: 100%;
}
#worksTab__content ul li div img,
#worksTab__content ul li a img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: 0.3s;
}
#worksTab__content ul li div:hover img,
#worksTab__content ul li a:hover img{
	transform: scale(1.1);
}
#worksTab__content ul li{
	width: calc( (100% / 4 ) - 1rem );
	margin: 0.5rem;
	aspect-ratio: 3/2;
}
#worksTab__content .content__item[data-tab-works-content=film] ul li{
	width: calc( (100% / 3 ) - 1rem );
	aspect-ratio: 16/9;
}
#worksTab__content .content__item[data-tab-works-content=design] ul li{
	width: calc( (100% / 4 ) - 1rem );
	aspect-ratio: 1/1;
}

.js-modal-photo__bg{
	position: fixed;
	top: 0;
	left: 0;
	width: 100dvw;
	height: 100dvh;
	z-index: 100;
	background-color: var(--c-text);
	opacity: 0.75;
}
.js-modal-photo__content{
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 110;
	width: 60dvw;
	height: 80dvh;
}
.js-modal-photo__content img{
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.historyTable tr th{
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 400;
	padding-right: 1rem;
}

@media all and (min-width:0px) and (max-width:960px) {
	#worksTab__label{
		overflow-x: auto;
		top: 0rem;
		padding-top: 1rem;
		margin-right: -6vw;
	}
	#worksTab__label ul{
		white-space: pre;
	}
	#worksTab__content ul li{
		width: calc( (100% / 2) - 1rem );
	}
	#worksTab__content .content__item[data-tab-works-content=film] ul li{
		width: calc( (100% / 1 ) - 1rem );
	}
	#worksTab__content .content__item[data-tab-works-content=design] ul li{
		width: calc( (100% / 2 ) - 1rem );
	}
	.js-modal-photo__content{
		width: 80dvw;
		height: 80dvh;
	}
}


/*
// profile
///////////////////////////////////////////////////////////////*/
@media all and (min-width:961px)  {
	#profile .wrap{
		width: 860px;
	}
}

/*
// contact
///////////////////////////////////////////////////////////////*/
@media all and (min-width:961px)  {
	#contact .wrap{
		width: 860px;
	}
}

/*
// footer
///////////////////////////////////////////////////////////////*/
footer{
	padding: 1.5rem 0;
	text-align: center;
}