@charset "utf-8";
body,div,dl,dt,dd,ul,ol,li,p,h1,h2,h3,h4,h5,h6,th,td,pre,code,blockquote,form,fieldset,legend,input,textarea,figcaption,figure{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:normal}
li{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:''}
abbr,acronym{border:0;font-variant:normal}
sup{vertical-align:text-top}
sub{vertical-align:text-bottom}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}
input,textarea,select{font-size:100%;}
legend{color:#FFF}
hr{display:none}
img{max-width: 100%;vertical-align: middle;}
select,input,button,textarea{font-size:99%}
table{font-size:inherit;font:100%;border-collapse:collapse;border-spacing:0}
pre,code,kbd,samp,tt{font-family:monospace;font-size:108%;line-height:100%}
article,aside,details,figcaption,figure,footer,header,hgroup,hr,menu,nav,section,main{display:block}*{margin:0;padding:0;box-sizing:border-box;max-height:999999px;outline:none;}*:focus{outline: none;}
button{background-color:transparent;border:none;cursor:pointer;outline:none;padding:0;}
* {box-sizing: border-box;}
/*-----------------------------------------------
 * Bace
 * Modal
 * Header
 * Parts
-------------------------------------------------*/
/*-----------------------------------------------
 * Bace
-------------------------------------------------*/
:root{
	/* color */
	--txtColor: #1e1e1e;
	--mainColor: #1e1e1e; /* 見出しカラー */
	--btnTxtColor: #fff; /* ボタンテキストカラー */
	--bgColor: #FFFFFF; /* ローディングアニメちらつき防止用 com_bg.jpgに近い色を設定 */
  --gradient: linear-gradient(45deg,rgba(12, 152, 216, 1) 0%, rgba(228, 0, 127, 1) 100%);

	/* font */
	--mainFont: "Noto Sans JP", sans-serif;

	/* 変化速度 */
	--speed: all, .3s, ease, .3s;

}
html {
	font-size: 62.5%; /* 基準を10pxに */
	scroll-behavior: smooth;
}
body {
	text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	font-family: var(--mainFont);
	font-feature-settings: "palt";
	font-weight: 500;
	font-size: 1.6em; /* 16px ここだけem指定 */
  color: var(--txtColor);
  line-height: 1.6;
	word-wrap: break-word;
	/*overflow-x: hidden;*/
	position: relative;
}

.pc {
	display: block;
}
.sp {
	display: none;
}
a {
	color: var(--subColor);
	transition: var(--speed);
}
a:hover {
	opacity: .7;
}
/* ScrollBar Setting */
::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}
::-webkit-scrollbar-track {
  border-radius: 4px;
  background: #fff;
}
::-webkit-scrollbar-thumb {
	background: var(--mainColor);
	border-radius: 4px;
	margin: 2px;
	box-shadow: none;
}
html{
	scrollbar-color: var(--mainColor) #fff;
	scrollbar-width: thin;
}
/*loading時のちらつき sliderの計算に不具合が出るので保留*/
/*#top,#top-en,#top-fr,footer {
	display: none;
}*/
li {
  list-style: none;
}

/*-----------------------------------------------
 * 共通
-------------------------------------------------*/
.cont-h2 {
	font-size: 6.6rem;
	font-family: var(--mainFont);
  line-height: 1.0;
	color: var(--mainColor);
	text-align: center;
  font-weight: 900;
  display: flex;
  justify-content: center;
  align-items: baseline;
  font-style: oblique;
}

.cont-h2 span {
  background: linear-gradient(to right, #89CAEA 0%, #EE82C0 100%);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 28%;
}


/*-----------------------------------------------
 * header
-------------------------------------------------*/
header {
  width: 100%;
}
.header-inner {
  padding: 5px 50px;
  box-sizing: border-box;
  position: fixed;
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
  z-index: 2;
}
.h-wh {
  background-color: rgba(255, 255, 255, 0.7);
}
.h-bk {
  background-color: rgba(30, 30, 30, 0.5);
}
/* 暗いヘッダーの時のアイコン表示 */
.h-bk .icon-w { display: block; }
.h-bk .icon-b { display: none; }

/* 明るいヘッダーの時のアイコン表示 */
.h-wh .icon-w { display: none; }
.h-wh .icon-b { display: block; }
.menu-logo {
  max-width: 300px;
}
ul.menu-list{
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
ul.menu-list li {
  width: 60px;
  margin: 0 0 0 20px;
}
ul.menu-list li:first-child {
  width: 32px;
}
/*-----------------------------------------------
 * TOP
-------------------------------------------------*/
/*KV*/
.kvArea {
	position: relative;
  width: 100%;
  overflow: hidden;
}

.kv-img,
.kv-img img {
  width: 100%;
}

.kv-txt {
  position: absolute;
  max-width: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.glitch{
  position:relative;
  display:flex;
  justify-content:center;
  align-content:center;
  width:0%;
}

.glitch .text{
  -webkit-animation: jerkwhole 2.5s infinite;
  position:relative;
  padding:0;
  margin:0;
  align-content:center;
}

.glitch span{
  position:absolute;
  text-align:center;
  -webkit-filter: blur(1px);
  -webkit-animation: blur 30ms infinite, jerk 50ms infinite;
  top:50%;
  left:50%;
  transform:translate(50%,-250%);
  width:50vw;
}

.glitch span:nth-child(1) path{
  fill:red;
  margin-left:8px;
  margin-top:-2px;
  -webkit-filter: blur(1px);
}
.glitch span:nth-child(2) path{
  fill:green;
  margin-left:7px;
  -webkit-filter: blur(1px);
}
.glitch span:nth-child(3) path{
  fill:blue;
  margin-left:-7px;
  margin-top:4px;
  -webkit-filter: blur(1px);
  -webkit-animation: jerkblue .5s infinite;
}
.glitch span:nth-child(4) path{
  fill:white;
  -webkit-filter: blur(1px);
   text-shadow:0 0 50px rgba(255,255,255,0.4);
}
.glitch span:nth-child(5) path{
  -webkit-filter: blur(1px);
}


@-webkit-keyframes blur {
  0%   { -webkit-filter: blur(1px); opacity:0.8;}
  50% { -webkit-filter: blur(1px); opacity:1; }
  100%{ -webkit-filter: blur(1px); opacity:0.6; }
}
@-webkit-keyframes jerk {
  50% { left:2px; }
  51% { left:0; }
}
@-webkit-keyframes jerkup {
  50% { top:2px; }
  51% { top:0; }
}

@-webkit-keyframes jerkblue {
  0% { left:0; }
  30% { left:0; }
  31% { left:-10px; }
  32% { left:0; }
  98% { left:0; }
  100% { left:10px; }
}

@-webkit-keyframes jerkgreen {
  0% { left:0; }
  30% { left:0; }
  31% { left:-20px; }
  32% { left:0; }
  98% { left:0; }
  100% { left:15px; }
}

@-webkit-keyframes jerkwhole {
  30% {  }
  40% { opacity:1; top:0; left:0px;  -webkit-transform:scale(1,1);  -webkit-transform:skew(0,0);}
  41% { opacity:0.8; top:0px; left:-100px; -webkit-transform:scale(1,1.2);  -webkit-transform:skew(20deg,0);}
  42% { opacity:0.8; top:0px; left:50px; -webkit-transform:scale(1,1.2);  -webkit-transform:skew(-40deg,0);}
  43% { opacity:1; top:0; left:0; -webkit-transform:scale(1,1);  -webkit-transform:skew(0,0);}
  65% { }
}


/*deregula*/
#introduction {
  background: #000;
  color: #fff;
  font-size: 1.8rem;
  text-align: center;
  line-height: 2.2;
  font-weight: 500;
  position: relative;
  padding: 12rem 20px 18rem;
  box-sizing: border-box;
}
.introduction-innr {
  max-width: 850px;
  margin: 0 auto;
}
.cont-h2-la {
  font-size: 3.6rem;
  font-weight: 800;
  padding: 0 0 40px 0;
  box-sizing: border-box;
}

.ink-bg01,.ink-bg02,
.ink-bg03,.ink-bg04 {
  position: absolute;
}
.ink-bg01,.ink-bg04 {
  width: 26%;
}
.ink-bg02,.ink-bg03 {
  width: 13%;
}
.ink-bg01 {
  top: 0;
  left: 0;
}
.ink-bg02 {
  top: 0;
  right: 0;
}
.ink-bg03 {
  bottom: 0;
  left: 0;
}
.ink-bg04 {
  bottom: 0;
  right: 0;
}

/*WORK*/
#works {
 padding: 8rem 0 10rem;
}
.works-conts,
#works-detail {
	width: min(calc(100% - 40px), 1080px);
	margin: auto;
  padding: 60px 0;
}
.works-conts h2 {
  padding-bottom: 20px;
}
.works-list {
	display: flex;
	flex-wrap: wrap;
  justify-content: flex-start;
  padding: 0 20px;
}
li.works-list-item {
  width: calc(100% / 3.1);
  margin: 0 2px 10px;
}
li.works-list-item a {
	display: block;
	height: calc(100% - 1em);/* margin分を引く */
	text-decoration: none;
	margin: .5em;
}
.works-list-img img  {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.works-list-date {
	color: var(--txtColor);
  font-weight: 600;
	padding: .5em 0;
	border-top: none;
}

/*-----------------------------------------------
 * footer
-------------------------------------------------*/
footer {
	padding: 60px 50px 35px;
	text-align: center;
	position: relative;
  background-color: var(--mainColor);
  color: #FFF;
}
footer a {
  text-decoration: none;
}
.fooetr-innr {
  display: flex;
  justify-content: space-between;
}
.footer-right ul {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 15px;
}
.footer-right ul li {
  width: 42px;
  margin: 0 5px;
}
.footer-right ul li:first-child {
  width: 24px;
}
.footer-link {
  margin-bottom: 12px;
  font-size: 1.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.first-link::after {
  content: "｜";
  padding: 0 5px;
}
.footer-link span {
  margin: 0 0 5px 5px;
}
.copyright {
	font-size: 1.2rem;
  text-align: right;
}

/*-----------------------------------------------
 * WORkS
-------------------------------------------------*/
.works-detail-inner {
	display: flex;
	flex-wrap: wrap;
  justify-content: space-between;
  padding: 10rem 0 12rem;
}
#works-detail .works-list-img {
  width: 45%;
}
#works-detail .works-list-img img {
  width: 100%;
}
.works-txt-list {
  margin: 0 10px 0 20px;
  color: var(--txtColor);
  text-align: left;
  width: 50%;
}
.works-title {
  font-size: 3.2rem;
  font-weight: 800;
  padding-bottom: 8px;
  box-sizing: border-box;
}
.onair-txt {
  font-size: 1.8rem;
  font-weight: 700;
  padding-bottom: 40px;
  box-sizing: border-box;
}
.copy-txt {
  font-size: 1.4rem;
  padding-bottom: 50px;
  box-sizing: border-box;
}
.link-btn a,
.sns-btn a,
.more-btn a {
	display: block;
	align-items: center;
  padding: 12px 0;
  box-sizing: border-box;
	text-align: center;
  font-size: 18px;
  font-weight: 600;
	border-radius: 100px;
	text-decoration: none;
  margin: 0 0 25px;
}
.link-btn a,
.sns-btn a {
  max-width: 420px;
}
.more-btn a {
	width: 420px;
}
.link-btn a {
	background: linear-gradient(45deg,rgba(12, 152, 216, 1) 0%, rgba(228, 0, 127, 1) 100%);
	color: #fff;
}
.sns-btn a {
 background-color: #1e1e1e;
	color: #fff;
}
.more-btn {
  margin: 0 auto;
  text-align: center;
}
.more-btn a {
  position: relative;
  display: inline-block;
  text-decoration: none;
  z-index: 1;
  background-image: linear-gradient(45deg,rgba(12, 152, 216, 1) 0%, rgba(228, 0, 127, 1) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.more-btn a::before {
  content: "";
  position: absolute;
  inset: 0; /* 上下左右に広げる */
  border-radius: inherit;
  padding: 2px; 
  background: linear-gradient(45deg,rgba(12, 152, 216, 1) 0%, rgba(228, 0, 127, 1) 100%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  z-index: -1;
}

	/*-----------------------------------------------
	 * スマホ用
	-------------------------------------------------*/
@media screen and (max-width:767px){
	html {
		font-size: 52%;
	}
	.body-fix {
		overflow: hidden;
	}
	.sp { display: block; }
	.pc { display: none; }
	/* ScrollBar Setting */
	::-webkit-scrollbar {
		width: 3px;
		height: 3px;
	}
	/*-----------------------------------------------
	 * header
	-------------------------------------------------*/

  .header-inner {
    top: 0;
    box-sizing: border-box;
    padding: 5px 10px;
  }
	.menu-logo {
		width: 45vw;
	}
  ul.menu-list li {
    max-width: 38px;
    margin: 0 0 0 10px;
  }
  ul.menu-list li:first-child {
    max-width: 22px;
  }
  .h-bk {
    background-color: #000;
  }

	/*-----------------------------------------------
	 * TOP
	-------------------------------------------------*/
	.loading-logo picture {
		width: 90vw;
	}
  .cont-h2 {
    font-size: 5.0rem;;
  }
	.kv {
		width: 100%;
	}
  .kv-txt {
    max-width: inherit;
    width: 85%;
  }
  .glitch span{
    transform:translate(27%,-166%);
    width:64vw;
  }
  .ink-bg01, .ink-bg04 {
    width: 42%;
  }
  .ink-bg02, .ink-bg03 {
    width: 30%;
  }
  .introduction-innr {
    position: relative;
    z-index: 1;
  }
  .works-conts,
  #works-detail {
    padding: 40px 0 60px;
  }
  .works-list {
    padding: 0;
  }
  li.works-list-item {
    width: calc(100% / 2);
    margin: 0;
  }
	/*-----------------------------------------------
	 * footer
	-------------------------------------------------*/
  footer {
    padding: 40px 20px;
  }
  footer .menu-logo {
		width: 52vw;
    margin: 0 auto 25px;
	}
  .fooetr-innr {
    display: block;
    margin: 0 auto;
    text-align: center;
  }
  .footer-right ul {
    justify-content: center;
    margin-bottom: 25px;
  }
  .footer-link {
    margin-bottom: 40px;
    font-size: 1.4rem;
    display: block;
  }
  .first-link::after {
    content: none;
    padding: 0;
  }
  .footer-link p{
    margin-bottom: 10px;
    font-size: 14px;
  }
  .copyright {
    text-align: center;
  }
  	/*-----------------------------------------------
	 * WORKS
	-------------------------------------------------*/
  .works-detail-inner {
    display: block;
    padding: 4rem 0 6rem;
  }
  #works-detail .works-list-img {
    width: 100%;
  }
  .works-txt-list {
    margin: 0;
    padding-top: 20px;
    width: 100%;
  }
  .onair-txt {
    padding-bottom: 40px;
  }
  .copy-txt {
    padding-bottom: 50px;
    font-size: 1.6rem;
  }
  .link-btn a, .sns-btn a, .more-btn a {
    width: 100%;
    max-width: inherit;
  }
}

video.kv-media {
  width: 100%;
  height: auto;
  vertical-align: bottom;
  aspect-ratio: 800 / 450;
}