@charset "utf-8";
/* CSS Document */


/* ----------------------------------------------------
   Basic setting:
------------------------------------------------------- */

main a {text-decoration: underline;}
main a:hover {text-decoration: none;}

main h2 {
	margin-bottom: 2rem;
	font-size: 2rem;
	line-height: 1.2;
}
@media screen and (max-width: 767px){
	main h2 {
		font-size: 1.8rem;
	}
}

main h2::before {
	white-space: pre;
    display: inline;
    background: linear-gradient(157deg, rgba(220, 105, 228, 1), rgba(76, 88, 207, 1));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
    font-size: 80%;
	line-height: 1;
	font-family: var(--font-family_en);
}

main h3 {
	padding: .5rem 0;
	margin: 2rem 0 1.5rem;
	font-size: 1.7rem;
	line-height: 1.4;
	border-bottom: var(--border);
}

main h3 span.cate{
	background: var(--black);
	color: var(--white);
	display: inline-block;
	padding: .5rem .7rem .7rem .7rem;
	font-size: 1.2rem;
	margin-left: 1rem;
	font-weight: 500;
	line-height: 1;
	margin-bottom: .2rem;
}
@media screen and (max-width: 767px){
	main h3 {
		font-size: 1.6rem;
		margin: 1.5rem 0;
	}
	main h3 span.cate{
		font-size: 1rem;
	}
}

main p, main ol, main dl, main iframe, main figure, main .grid {
    margin-bottom: 1.5rem;
}

main p.copy {
    font-weight: 500;
	font-size: 1.2rem;
}

@media screen and (max-width: 767px){
	main dl {
		grid-template-columns: 1fr;
		grid-gap: .5rem;
	}
	
	main dl > dd{
		margin-bottom: 1rem;
	}
	
	main p.copy {
		font-size: 1.1rem;
	}
}


/* main_v:
--------------------------------------------*/

.main_v {
	background: #020927 url("../img/main_v_back.png") center bottom no-repeat;
	background-size: 100%;
	padding: var(--pa);
}
@media screen and (max-width: 767px){
	.main_v {
		background: #020927 url("../img/main_v_back_sp.png") center bottom no-repeat;
		background-size: 100%;
		padding: 1.5rem var(--pa);
	}
}

.main_v h1{
	margin: 0 auto;
	max-width: var(--outline2);
}

.main_v h1 img {
	width: 100%;
}


/* about:
--------------------------------------------*/

#about {
	background: var(--white);
	max-width: 1100px;
	margin: 0 auto;
	border-radius: var(--maru);
	margin-top: 3rem;
	padding: 4% 0 2%;
}

#about h2 {
	background: var(--black);
	color: var(--white);
	display: inline-block;
	padding: .3rem;
	font-size: 1.7rem;
}
#about h2.anm::before {
	background: var(--black);
}

@media screen and (max-width: 959px){
	#about {
		padding: 6% 0 2%;
	}
	#about h2 {
		font-size: 1.4rem;
		margin-bottom: 1.5rem;
	}
}
@media screen and (max-width: 767px){
	#about {
		margin-top: 1.5rem;
		padding: 8% 0 2%;
	}
}

/* profile:
--------------------------------------------*/

#profile {
	padding: 3rem 0;
}

#profile img {
	border: var(--border);
	border-radius: var(--maru);
	width: 100%;
}

#profile h2::before {
	content: 'Profile\A';
}

#profile dl{
	margin-top: 4rem;
}

@media screen and (max-width: 767px){
	#profile {
		padding: 2rem 0;
	}
	
	#profile dl  {
		margin-top: 2rem;
	}
}


/* ircam:
--------------------------------------------*/

#ircam {
	padding: 4rem 0 3rem;
	background: var(--gray-back);
}

#ircam h2::before {
	content: 'IRCAM\A';
}

@media screen and (max-width: 767px){
	#ircam {
		padding: 3rem 0 2rem;
	}
}


/* アニメーション:
--------------------------------------------*/
.anm {
  overflow: hidden;
  position: relative;
}

.anm::before {
  animation: anm 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
	background: var(--white);
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

@keyframes anm {
  100% {
    transform: translateX(100%);
  }
} 

.fadein {
    opacity: 0;
    transform: translate(0,0);
    transition: all 1.5s;
  &.fadein-left{
      transform: translate(-30px,0);
  }
  &.fadein-right{
      transform: translate(30px,0);
  }
  &.fadein-up{
      transform: translate(0,-30px);
  }
  &.fadein-bottom{
      transform: translate(0,30px);
  }
  &.scrollin{
    opacity: 1 !important;
    transform: translate(0, 0) !important;
  }
}