/* medium */
@font-face {
    font-family: 'rajdhani';
    src: url('../fonts/rajdhani-mediumf.eot');
    src: url('../fonts/rajdhani-medium.eot?#iefix') format('embedded-opentype'),
         url('../fonts/rajdhani-medium.woff2') format('woff2'),
         url('../fonts/rajdhani-medium.woff') format('woff'),
         url('../fonts/rajdhani-medium.ttf') format('truetype'),
         url('../fonts/rajdhani-medium.svg') format('svg');
    font-weight: 600;
    font-style: normal;

}

/* regular */
@font-face {
    font-family: 'rajdhani';
    src: url('../fonts/rajdhani-regular.eot');
    src: url('../fonts/rajdhani-regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/rajdhani-regular.woff2') format('woff2'),
         url('../fonts/rajdhani-regular.woff') format('woff'),
         url('../fonts/rajdhani-regular.ttf') format('truetype'),
         url('../fonts/rajdhani-regular.svg') format('svg');
    font-weight: 400;
    font-style: normal;

}

/* semibold */
@font-face {
    font-family: 'rajdhani';
    src: url('../fonts/rajdhani-semibold.eot');
    src: url('../fonts/rajdhani-semibold.eot?#iefix') format('embedded-opentype'),
         url('../fonts/rajdhani-semibold.woff2') format('woff2'),
         url('../fonts/rajdhani-semibold.woff') format('woff'),
         url('../fonts/rajdhani-semibold.ttf') format('truetype'),
         url('../fonts/rajdhani-semibold.svg') format('svg');
    font-weight: 800;
    font-style: normal;

}
 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}


body {
	font-family: "rajdhani", 游ゴシック体, Yu Gothic, YuGothic, ヒラギノ角ゴ Pro, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, sans-serif;
	font-size: 16px;
    line-height: 1.6;
	color: #333;
	letter-spacing: 0.05em;
	word-break: break-word;
	-ms-word-break: break-word;
	word-wrap: break-word;
	-webkit-text-size-adjust: 100%;
	 -webkit-font-smoothing: antialiased;
}
html, body {
	margin: 0;
	padding: 0;/*height: 100%;
  width: 100%*/
}
a {
	text-decoration: none;
	color: #333;
}
img {
	vertical-align: top;
	height: auto;
	max-width: 100%;
	width: auto
}
a.btn {
	display:inline-block;
	position:relative;
	/*text-decoration: underline;
	transition: all 0.2s;*/
}
/*a.btn:hover {
	text-decoration: none;
}*/
a.btn:after {
	position:absolute;
	left:0;
	bottom:0px;
	content:"";
	width:100%;
	height:1px;
	background:#000;
	/*text-decoration: underline;*/
	transition: all 0.2s ease-out;
}
a.btn:hover:after {
	width:0;
}



@media screen and (max-width: 768px) {
	body {
		font-size:3vw;
	}
}


/* common
---------------------------------------------------------- */
#main-contents {
	position: relative;
	min-height: 100%;
	margin-top:80px;
}


.page-title{
    text-align: center;
	line-height: 1;
	font-size: 300%;
	color:#b71a21;
    font-weight: 800;
	padding:20px 0 0 0;
    position: relative
}


.page-title:after{
    content:"";
    position: absolute;
    left:50%;
    top:0;
    width:20px;
    height: 2px;
	background:#b71a21;
    margin-left:-10px;
}

.section-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 30px;
	box-sizing: border-box;
}

.section-inner.full-width {
	max-width: none;
    max-width: inherit;
	padding:0;
}

.works-list{
    overflow: hidden;
    /*perspective: 10000px;*/
}
.works-list li{
    display: block;
    transform-style: preserve-3d;
    transform-origin: 50% 0%;
}

.works-list li a{
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    height:25vh;
    overflow: hidden;
    transition:all 0.3s;
    background:transparent;
}

.works-list li a .works-title{
    color:#fff;
    font-size:225%;
    line-height: 1.2;
    font-weight: 900;
    text-align: center;
    padding:1em;
    z-index: 1;
    text-shadow:0px 0px 5px rgba(0,0,0,0.5);
}

.works-list li a .works-bg{
    position: absolute;
    left:0;
    top:0;
    width:100%;
    height: 100%;
    z-index: 0;
    background-size:cover;
    background-position: 50% 50%;
    transition:all 0.5s ease-out;
    mix-blend-mode: overlay;
}

.works-list li a:hover{
    background:#b71a21;
}

.works-list li a:hover .works-bg{
    transform:scale(1.03);
    opacity:0.7;
}

.btn{
    margin:10% auto 0 auto;
    max-width:220px;
}

.btn a{
    padding:1em;
    display: block;
    color:#b71a21;
    font-weight: 600;
    text-align: center;
    font-size: 128%;
    border-radius: 10em;
    line-height: 1;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(183,26,33,0.2);
    -moz-box-shadow: 0px 0px 10px 0px rgba(183,26,33,0.2);
    box-shadow: 0px 0px 10px 0px rgba(183,26,33,0.2);
    position: relative;
}

.btn a:after{
    content:"";
    background:url("../images/common/arrow@2x.png") no-repeat 50% 50%;
    background-size:contain;
    width:9px;
    height:12px;
    position: absolute;
    right:20px;
    top:50%;
    margin-top:-6px;
    transition: all 0.3s ease-out;
}

.btn a:hover:after{
    right:15px;
}



@media screen and (max-width: 1024px) {

}

@media screen and (max-width: 768px) {
.btn a {
    font-size: 16px;
}

.btn a:after {
    width: 6px;
    height: 8px;
    margin-top: -4px;
}

}



/* header
---------------------------------------------------------- */

#header {
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	z-index: 5;
	display: block;
	min-height: auto;
	min-height: inherit;
	position:absolute;
}

#header #header-inner {
	box-sizing: border-box;
	width: 100%;
	padding: 30px 30px 0 30px;
}
#global-navi {
	float: right;
	text-align: right;
	letter-spacing: -.4em; /* 隙間埋め用 */
}
#global-navi li {
	margin-left: 45px;
	display: inline-block;
	letter-spacing: normal; /* 隙間埋め用 */
}
#global-navi li:first-child {
	margin-left: 0;
}
#global-navi li a {
	transition: all 0.2s;
	text-decoration: none;
	line-height:1;
	position: relative;
    letter-spacing: 0.1em;
	font-size:120%;
    color: #b71a21;
    font-weight:800;

}

.top #global-navi li a {
    color: #fff;
    text-shadow:0px 0px 5px rgba(183,26,33,0.50);
}

.top #global-navi li a:hover {
    color: #b71a21;
    transition:all 0.3s ease-out;
}

#global-navi li a:after{
    content:"";
    position: absolute;
    left:0;
    top:105%;
    width:0;
    height:1px;
    background: #b71a21;
    transition:all 0.3s ease-out;
}

/*.top #global-navi li a:after {
    background: #fff;
}*/

#global-navi li a:hover:after,
.about #global-navi li#global-navi-about a:after,
.works #global-navi li#global-navi-works a:after,
.creator #global-navi li#global-navi-creator a:after{
    width:100%;
}

#header #header-inner .logo {
	max-width: 50%;
	margin: 0;
	float: left;
}

header #tab{
	display: none;
}


@media screen and (max-width: 960px) {
#header #header-inner .logo {
	max-width:40%;
}
#global-navi li {
    margin-left: 30px;
}

}

@media screen and (max-width: 768px) {


#header #header-inner {
	padding: 17px 15px;
	display: block;
	background: #fff;
}
.top #header #header-inner,
.contact #header #header-inner {
    padding: 15px;
    display: block;
    background:none;
}
#header h1 {
	text-align: center;
}

#header #tab {
	position: absolute;
	top: 18px;
	right: 15px;
	z-index: 200;
	display: block;
}

#header #tab span {
	display: inline-block;
	transition: all .4s;
	box-sizing: border-box
}
#header #tab a {
	position: relative;
	width: 25px;
	height: 16px;
	display: block;
}
#header #tab a span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 1px;
	background-color: #b71a21;
}

.top #header #tab a span {
	background-color: #fff;
}

#header #header-inner .logo {
	max-width: inherit;
	max-width: none;
   	width:213px;
}



#header #tab a span:nth-of-type(1) {
	top: 0
}
#header #tab a span:nth-of-type(2) {
	top: 7px
}
#header #tab a span:nth-of-type(3) {
	bottom: 0
}

#header #tab a.active span {
	background: #b71a21;
}
#header #tab a.active span:nth-of-type(1) {
	-webkit-transform: translateY(7px) rotate(-45deg);
	transform: translateY(7px) rotate(-45deg)
}
#header #tab a.active span:nth-of-type(2) {
	/*left: 200%;*/
	opacity: 0;
	-webkit-animation: active-menu-bar02 .5s forwards;
	animation: active-menu-bar02 .5s forwards
}
@-webkit-keyframes active-menu-bar02 {
100% {
height:0
}
}
@keyframes active-menu-bar02 {
100% {
height:0
}
}
#header #tab a.active span:nth-of-type(3) {
	-webkit-transform: translateY(-7px) rotate(45deg);
	transform: translateY(-7px) rotate(45deg)
}

#header #global-navi {
	position: fixed;
	left:0;
	top:  -100%;
	width: 100%;
	height: 100%;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	background: #fff;
	transition: all .5s cubic-bezier(.9, 0, 0, 1);
	z-index: 100;
	box-sizing: border-box;
    display: table;
}

#header #global-navi ul {
    display: table-cell;
    vertical-align:middle;
}

#header #global-navi.active {
	top: 0;
	transition: all .5s cubic-bezier(.9, 0, 0, 1)
}

#header #global-navi li{
	display:block;
	margin-left:0;
}

#header #global-navi li a {
    padding: 0;
    display: block;
    text-align: center;
	font-size:300%;
	color:#000;
	height: 15vh;
    line-height: 15vh;
}

#header #global-navi li a,
.top #header #global-navi li a {
    color: #b71a21;
}

#global-navi li a:after {
	display:none;
}

}

@media screen and (max-width: 480px) {
}
/* footer
---------------------------------------------------------- */
footer {
	margin-top: 10%;
	width: 100%;
	position: relative;
}
footer #page-top {
	text-align: right;
	margin-right: 30px;
}
footer a{
	transtion:all 0.5s;
}
footer a:hover{
	opacity:0.7;
}
footer .footer-nav {
    background:#b71a21;
}
footer .footer-nav ul {
    display: flex;
    justify-content: center;
}
footer .footer-nav ul li {
    margin:1em 2em;
}
footer .footer-nav ul li a {
    color:#fff;
    font-weight: 800;
    font-size: 128%;

}

footer .footer-other{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:30px;
}

footer .footer-other .footer-icp{
    width:40%;
}

footer .footer-other .footer-icp a{
    color:#b71a21;
    font-size:71%;
}

footer .footer-other .footer-logo{
    text-align: center;
    width:20%;
    padding: 0 15px;
}

footer .footer-other .footer-copyright {
	text-align:right;
    color:#b71a21;
    width:40%;
    font-size:71%;
}

@media screen and (max-width: 960px) {

}

@media screen and (max-width: 768px) {
footer .footer-other{
    padding:30px 15px;
}

footer .footer-other .footer-logo{
    text-align: center;
    width:25%;
}


}


@media screen and (max-width: 480px) {
footer .footer-nav ul li {
    margin:1em 1.5em;
}
}

/* top
---------------------------------------------------------- */

.top #header h2 {
	display: none;
}
.top #main-contents {
    margin-top: 0;
}
.top #main-visual {
	width: 100%;
	height: 100vh;
	overflow: hidden;
    max-width: inherit;
    max-width: none;
    position: relative;
}

.top #main-visual h1 {
	position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50% , -50%);
    z-index: 1;
    
    text-shadow: -1px 0 red;
    overflow: hidden;
    /*clip: rect(0, 9999px, 0, 0);
    animation: noise-anim 2s infinite linear alternate-reverse;*/
}
.top #main-visual h1.glitch {
	position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50% , -50%);
    z-index: 1;
    margin-left:-1px;
    
    text-shadow: -1px 0 blue;
    overflow: hidden;
    clip: rect(0px, 9999px, 155px, 0);
    animation: noise-anim-2 2s infinite linear alternate-reverse;
        display: none;
}
@keyframes noise-anim {/*細かい動きを設定してノイズが走っているかのように動かす*/
  0% {
    clip: rect(0px, 9999px, 10px, 0);
  }
  5% {
    clip: rect(65px, 9999px, 70px, 0);
  }
  10% {
    clip: rect(82px, 9999px, 82px, 0);
  }
  15% {
    clip: rect(32px, 9999px, 35px, 0);
  }
  20% {
    clip: rect(31px, 9999px, 49px, 0);
  }
  25% {
    clip: rect(18px, 9999px, 46px, 0);
  }
  30% {
    clip: rect(94px, 9999px, 64px, 0);
  }
  35% {
    clip: rect(69px, 9999px, 31px, 0);
  }
  40% {
    clip: rect(6px, 9999px, 72px, 0);
  }
  45% {
    clip: rect(25px, 9999px, 35px, 0);
  }
  50% {
    clip: rect(82px, 9999px, 26px, 0);
  }
  55% {
    clip: rect(7px, 9999px, 92px, 0);
  }
  60% {
    clip: rect(54px, 9999px, 30px, 0);
  }
  65% {
    clip: rect(86px, 9999px, 155px, 0);
  }
  70% {
    clip: rect(38px, 9999px, 65px, 0);
  }
  75% {
    clip: rect(41px, 9999px, 66px, 0);
  }
  80% {
    clip: rect(31px, 9999px, 37px, 0);
  }
  85% {
    clip: rect(8px, 9999px, 12px, 0);
  }
  90% {
    clip: rect(50px, 9999px, 69px, 0);
  }
  95% {
    clip: rect(7px, 9999px, 42px, 0);
  }
  100% {
    clip: rect(14px, 9999px, 57px, 0);
  }
}
@keyframes noise-anim-2 {/*ノイズ用アニメーションその2*/
  0% {
    clip: rect(18px, 9999px, 13px, 0);
  }
  5% {
    clip: rect(74px, 9999px, 51px, 0);
  }
  10% {
    clip: rect(33px, 9999px, 65px, 0);
  }
  15% {
    clip: rect(64px, 9999px, 66px, 0);
  }
  20% {
    clip: rect(75px, 9999px, 6px, 0);
  }
  25% {
    clip: rect(40px, 9999px, 49px, 0);
  }
  30% {
    clip: rect(71px, 9999px, 1px, 0);
  }
  35% {
    clip: rect(42px, 9999px, 73px, 0);
  }
  40% {
    clip: rect(92px, 9999px, 57px, 0);
  }
  45% {
    clip: rect(4px, 9999px, 33px, 0);
  }
  50% {
    clip: rect(4px, 9999px, 34px, 0);
  }
  55% {
    clip: rect(49px, 9999px, 25px, 0);
  }
  60% {
    clip: rect(24px, 9999px, 44px, 0);
  }
  65% {
    clip: rect(31px, 9999px, 155px, 0);
  }
  70% {
    clip: rect(54px, 9999px, 83px, 0);
  }
  75% {
    clip: rect(57px, 9999px, 97px, 0);
  }
  80% {
    clip: rect(3px, 9999px, 15px, 0);
  }
  85% {
    clip: rect(84px, 9999px, 34px, 0);
  }
  90% {
    clip: rect(100px, 9999px, 88px, 0);
  }
  95% {
    clip: rect(91px, 9999px, 59px, 0);
  }
  100% {
    clip: rect(10px, 9999px, 87px, 0);
  }
}
.top #main-visual h2 {
	position: absolute;
    top:50%;
    left:40px;
    transform:translate(0% , -50%);
    writing-mode: vertical-rl;
    color:#fff;
    line-height: 1;
    font-weight: 800;
    margin: 0;
    font-size: 128%;
    z-index: 1;

}

.top #main-visual .main-visual-inner{
    position: relative;
    z-index: 0;
}
.top #main-visual video {
	position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50% , -50%);
    min-width: 100%;
    min-height:100%;
}

.top #main-visual #scroll{
    position: absolute;
    z-index: 100;
    left: 50%;
    bottom: 30px;
    transform:translate(-50% , 0%);
}

.top #main-visual #scroll p{
    color:#fff;
    font-size:12px;
    text-align: center;
    margin-bottom:0.5em;
    font-weight: 900;
    animation: srcooll-anime-2 0.2s  Infinite;
}

.top #main-visual #scroll svg{
    width:20px;
    margin:0 auto;
    display: block;
    animation: srcooll-anime-1 1s ease-in-out 0s Infinite;
}


@keyframes srcooll-anime-1 {
0% {transform:translateY(-50%);opacity:0;}
50% {transform:translateY(0%);opacity:1;}
80% {transform:translateY(0%);opacity:1;}
100% {transform:translateY(50%);opacity:0;}
}

@keyframes srcooll-anime-2 {
0% {opacity:0.8;}
50% {opacity:1;}
100% {opacity:0.8;}
}

.top #main-visual #scroll .st0{
    fill:#fff;
}

/* works */
#top-works h2 {
	text-align: center;
	line-height: 1;
	font-size: 300%;
	color:#b71a21;
    font-weight: 800;
	margin: 40px 0;
}


@media screen and (max-width: 768px) {
.top #main-visual h2 {
    left: 15px;
}
}

@media screen and (max-width: 480px) {
}

/* about
---------------------------------------------------------- */
.about #about-bg li.slick-slide{
    margin-top:80px;
	height:35vh;
    width:100%;
}
.about #about-bg li.slick-slide{
    background:url("../images/about/bg.jpg") no-repeat 50% 50%;
    background-size:cover;
}
.about #about-bg li#slick-slide01{
    background:url("../images/about/bg_tokyo.jpg") no-repeat 50% 50%;
    background-size:cover;
}

.about section{
	margin-top:80px;
}
.about section h3 {
	text-align: center;
	line-height: 1;
	font-size: 257%;
	color:#b71a21;
    font-weight: 800;
}

/* 2023.9.9 add start */
.about section#about-us {
  color: white;
  background: url("../images/about/category_top_bg.jpg") no-repeat 50% 50%;
  background-size: cover;
  text-align: center;
  padding: 2rem 4rem;
}
.about section#about-us h2 {
  font-size: 180%;
  font-weight: 800;
  margin-bottom: 2rem;
}
.about section#about-us p {
  font-weight: 800;
  margin-bottom: 2rem;
  line-height: 2.4;
}
.about section#about-categories {
  margin: 0;
  text-align: center;
}
.about section#about-categories .about-category {
  margin: 0;
  text-align: center;
  height: 37vh;
  max-height: 320px;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}
.about section#about-categories .about-category p {
  color: white;
  font-size: 480%;
  font-weight: 800;
}
.about section#about-categories .about-category p span.about-category-title {
  text-shadow: 0px 0px 5px rgba(0,0,0,0.5);
}
.about section#about-categories #about-category-digital-ip-contents {
  background: url("../images/about/category_digital_ip_contents_bg.jpg")
    no-repeat 50% 50% / cover;
}
.about section#about-categories #about-category-event-exhibition {
  background: url("../images/about/category_event_exhibition_bg.jpg") no-repeat
    50% 50% / cover;
}
.about section#about-categories #about-category-cgi-vfx {
  background: url("../images/about/category_cgi_vfx_bg.jpg") no-repeat 50% 50% / cover;
}
.about section#about-categories #about-category-motion-graphics {
  background: url("../images/about/category_motion_graphics_bg.jpg") no-repeat
    50% 50% / cover;
}
.about section#about-categories #about-category-charactor-animation {
  background: url("../images/about/category_charactor_animation_bg.jpg")
    no-repeat 50% 50% / cover;
}
/* 2023.9.9 add end */

.about #about-adress .section-inner{
    margin-top:50px;
    display: flex;
    position: relative;
    flex-wrap: wrap;
}

/* 2023.9.9 delete start */
/*
.about #about-adress .section-inner:after{
    position: absolute;
    top:0;
    left:50%;
    height:100%;
    width:1px;
    background:#d2d2d2;
    content:"";
}
*/
/* 2023.9.9 delete end */

.about #about-adress article{
    width:50%;
    padding:0 30px;
    box-sizing: border-box;
}


.about #about-adress h4{
    text-align: center;
	font-size: 150%;
	color:#b71a21;
    font-weight: 800;
}

.about #about-adress p{
    text-align: center;
    margin-top:0;
}

.about #about-adress .contact-btn{
    margin-top:2em;
}

.about #about-group .group-list{
    display: flex;
    position: relative;
    margin-top:50px;
    flex-wrap: wrap;
}

.about #about-group .group-list li{
    width:50%;
    align-items: flex-start;
    margin:0 auto;
    padding:0 30px;
    box-sizing: border-box;
    max-width: 450px;
}

/* 2023.9.9 delete start */
/*
.about #about-group .group-list:after{
    position: absolute;
    top:0;
    left:50%;
    height:100%;
    width:1px;
    background:#d2d2d2;
    content:"";
}
*/
/* 2023.9.9 delete end */


.about #about-group .group-list li .group-logo{
    text-align: center;
}

.about #about-group .group-list li .group-data{
    margin-top:50px;
    text-align: center;
}

.about #about-group .group-list li .group-data .pc{
    display: inline-block;
}

.about #about-group .group-list li .group-data a{
    color: #b71a21;
    text-decoration: underline;
}

.about #about-group .group-list li .group-data a:hover{
    text-decoration: none;
}


@media screen and (max-width: 768px) {
.about #about-bg li.slick-slide {
    height: 20vh;
    margin-top:0;
}
.about #about-group .group-list li .group-data .pc{
    display: none;
}

.about #about-bg {
    margin-top: 10%;
}

.about section {
    margin-top: 15%;
}


.about #about-adress .section-inner{
    margin-top:0;
}

.about #about-adress .section-inner:after{
    display: none;
}

.about #about-adress article{
    width:100%;
    padding:0;
    margin-top:1em;
}

.about #about-group .group-list {
    margin-top: 0;
}

.about #about-group .group-list li {
    width: 100%;
    margin-top: 10%;
    padding:0;
}

.about #about-group .group-list:after {
    display: none;
}

.about #about-group .group-list li .group-data {
    margin-top: 5%;
}

}


@media screen and (max-width: 480px) {

/* 2023.9.9 add start */
.about section#about-us p {
  text-align: left;
}
.about section#about-us {
  padding: 2rem 2rem;
}
.about section#about-us p .br-pc {
  display: none;
}
.about section#about-categories .about-category p {
  font-size: 300%;
}
.about section#about-categories .about-category {
  height: 24vh;
  max-height: 200px;
}
.about section#about-categories #about-category-digital-ip-contents {
  background: url("../images/about/category_digital_ip_contents_bg_sp.jpg")
    no-repeat 50% 50% / cover;
}
.about section#about-categories #about-category-event-exhibition {
  background: url("../images/about/category_event_exhibition_bg_sp.jpg")
    no-repeat 50% 50% / cover;
}
.about section#about-categories #about-category-cgi-vfx {
  background: url("../images/about/category_cgi_vfx_bg_sp.jpg") no-repeat 50%
    50% / cover;
}
.about section#about-categories #about-category-motion-graphics {
  background: url("../images/about/category_motion_graphics_bg_sp.jpg")
    no-repeat 50% 50% / cover;
}
.about section#about-categories #about-category-charactor-animation {
  background: url("../images/about/category_charactor_animation_bg_sp.jpg")
    no-repeat 50% 50% / cover;
}
/* 2023.9.9 add end */

}


/* work
---------------------------------------------------------- */
.works-index .works-category-list{
    text-align: center;
    margin:40px 0 60px 0;
}
.works-index .works-category-list li{
    display: inline-block;
}
.works-index .works-category-list li:after{
    content:"/";
    margin:0 1em;
    display: inline-block;
    color: #b71a21;
}
.works-index .works-category-list li:last-of-type:after{
    display: none;
}

.works-index .works-category-list a{
	transition: all 0.2s;
	text-decoration: none;
	line-height:1;
	position: relative;
    letter-spacing: 0.1em;
	font-size:120%;
    color: #b71a21;
    font-weight:800;
}

.works-index .works-category-list li a:after{
    content:"";
    position: absolute;
    left:0;
    top:105%;
    width:0;
    height:1px;
    background: #b71a21;
    transition:all 0.3s ease-out;
}

.works-index .works-category-list li a:hover:after,
.works-index .works-category-list li.current a:after{
    width:100%;
}

.works-detail .works-title{
    font-size:171%;
    text-align: center;
    color: #b71a21;
    font-weight: 800;
    margin:1.5em 1em;
}

.works-detail .works-detail-main{
    max-width:1920px;
    margin:0 auto;
    /*perspective: 10000px;*/
}

.works-detail .works-detail-main img{
    max-width: none;
    max-width: inherit;
    width:100%;
    transform-style: preserve-3d;
    transform-origin: 50% 0%;
}

.works-detail .works-detail-sub{
    margin-top:70px;
}

.works-detail .works-detail-data{
    display: flex;
    flex-wrap: wrap;
    margin-top:5%;
}

.works-detail .works-detail-data dl{
    margin-right:5%;
}

.works-detail .works-detail-data dl dt{
    color: #b71a21;
    font-weight: 600;
    font-size:128%;
    position: relative;
}

.works-detail .works-detail-data dl dt:after{
    content:"_";
    display: inline-block;
    vertical-align: baseline;
}

.works-detail .works-detail-data dl dd{
    margin-bottom:2em;
}

.works-detail .works-detail-movie{
    padding-top:56.25%;
    position: relative;
    margin-top:0;
}

.works-detail .works-detail-movie iframe{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

.works-detail .works-detail-images{
    margin-top:5%;
    text-align: center;
    /*perspective: 10000px;*/
}
.works-detail .works-detail-images li{
    margin-top:5%;
    text-align: center;
    transform-style: preserve-3d;
    transform-origin: 50% 0%;
}

.works-detail .works-detail-images li img{
    max-width: none;
    max-width: inherit;
    width:100%;
}

.works-detail .works-detail-pagenate{
    display: flex;
    justify-content: space-between;
    margin:5% 0 0 0;
    align-items: center;
}

.works-detail .works-detail-pagenate li{
    width:33%;
}

.works-detail .works-detail-pagenate li a{
    position: relative;
    color: #b71a21;
    font-weight: 600;
    font-size:128%;
}

.works-detail .works-detail-pagenate li.btn{
    margin-top:0;
}

.works-detail .works-detail-pagenate li.works-prev a:before,
.works-detail .works-detail-pagenate li.works-next a:after
{
    content: "";
    background: url(../images/common/arrow@2x.png) no-repeat 50% 50%;
    background-size: contain;
    width: 9px;
    height: 12px;
    display: inline-block;
    transition: all 0.3s ease-out;
}

.works-detail .works-detail-pagenate li.works-prev a:before
{
    transform:rotate(-180deg);
    margin-right:10px;
}

.works-detail .works-detail-pagenate li.works-prev a:hover:before
{
    transform:rotate(-180deg) translateX(5px);
    
}

.works-detail .works-detail-pagenate li.works-next{
    text-align: right;
}

.works-detail .works-detail-pagenate li.works-next a:after
{
    margin-left:10px;
}

.works-detail .works-detail-pagenate li.works-next a:hover:after
{
    transform:translateX(5px);
    
}


/*.works-detail .works-detail-data .works-detail-client-category{
    width:15%;
}

.works-detail .works-detail-data .works-detail-client-category{
    width:15%;
}*/


@media screen and (max-width: 768px) {
.works-index .works-category-list {
    margin: 10% 0;
}

.works-detail .works-detail-sub {
    margin-top: 10%;
}

.works-detail .works-detail-data dl {
    margin-right: 0;
    width: 100%;
}

.works-detail .works-detail-pagenate li.btn {
    width: 50%;
}

.works-detail .works-detail-pagenate li.works-prev a:before,
.works-detail .works-detail-pagenate li.works-next a:after {
    width: 6px;
    height: 8px;
    margin-top: -4px;
}

.works-detail .works-detail-pagenate {
    margin: 10% 0 0 0;
}

}

@media screen and (max-width: 480px) {

}


/* creator top
---------------------------------------------------------- */
.creator-index .creator-list{
    display: flex;
    flex-wrap: wrap;
    margin-top:60px;
}
.creator-index .creator-list li{
    width: 33.33333%;
    position: relative;
    transform-origin: 0 50%;
}
.creator-index .creator-list li a{
    display: block;
    padding-top:56.25%;
    overflow: hidden;
    position: relative;
    transition:all 0.3s;
}
.creator-index .creator-list li a .creator-text{
    position: absolute;
    bottom:0;
    left:0;
    z-index: 1;
    padding:30px;
    box-sizing: border-box;
    color:#fff;
    line-height: 1.2;
}
.creator-index .creator-list li a .creator-text h3 {
    font-weight: 900;
    position: relative;
    font-size: 150%;
}
.creator-index .creator-list li a .creator-text h3:before {
    content:"";
    height:1px;
    width:20px;
    background:#fff;
    position:absolute;
    left:0;
    top:-10px;
}
.creator-index .creator-list li a .creator-text p {
    font-weight: 900;
}
.creator-index .creator-list li a .creator-bg{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-size: cover;
    background-position: 50% 50%;
    transition:all 0.3s ease-out;
    mix-blend-mode: overlay;
}

.creator-index .creator-list li a:hover{
    background:#b71a21;
}

.creator-index .creator-list li a:hover .creator-bg{
    /*transform:scale(1.03);
    opacity:0.7;*/
}



@media screen and (max-width: 768px){
.creator-index .creator-list {
    margin-top: 10%;
}
.creator-index .creator-list li {
    width: 100%;
}
.creator-index .creator-list li a .creator-text {
    padding: 15px;
}
}

/* creator detail
---------------------------------------------------------- */
.creator-detail #creator-detail-data{
	display: flex;
    justify-content: space-between;
    margin-top:60px;
    flex-wrap: wrap;
}

.creator-detail #creator-detail-data .creator-bg{
	width:35%;

}

.creator-detail #creator-detail-data .creator-bg figure{
    padding-top:56.25%;
    position: relative;
}

.creator-detail #creator-detail-data .creator-bg figure span{
	position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-size: cover;
    background-position: 50% 50%;
}

.creator-detail #creator-detail-data #creator-detail-text{
	width:60%;
}

.creator-detail #creator-detail-data #creator-detail-text #creator-detail-head .creator-name{
	font-size:214%;
    font-weight: 800;
    line-height: 1;
}

.creator-detail #creator-detail-data #creator-detail-text #creator-detail-head .creator-job{
	font-size:128%;
    font-weight: 800;
    /*margin-top:0.5em;*/
}

.creator-detail #creator-detail-data #creator-detail-text #creator-detail-head{
	padding-bottom:1em;
    border-bottom:1px solid #b71a21;
    margin-bottom:1em;
}

.creator-detail #creator-detail-data #creator-detail-text #creator-detail-profile{
	position: relative;
}

.creator-detail #creator-detail-data #creator-detail-text #creator-detail-profile h4{
	font-size:128%;
    font-weight: 800;
    color:#b71a21;
}

.creator-detail #creator-detail-data #creator-detail-text #creator-detail-profile .creator-profile-lang{
	position: absolute;
    right:0;
    top:0;
    display: flex;
}

.creator-detail #creator-detail-data #creator-detail-text #creator-detail-profile .creator-profile-lang li{
}

.creator-detail #creator-detail-data #creator-detail-text #creator-detail-profile .creator-profile-lang li:after{
    content:"/";
    margin:0 0.5em;
	color:#b71a21;
}

.creator-detail #creator-detail-data #creator-detail-text #creator-detail-profile .creator-profile-lang li:last-of-type:after{
    content:"";
    margin:0
}

.creator-detail #creator-detail-data #creator-detail-text #creator-detail-profile .creator-profile-lang li a{
	color:#b71a21;
    font-weight: 800;
    position: relative;
}


.creator-detail #creator-detail-data #creator-detail-text #creator-detail-profile .creator-profile-lang a:after{
    content:"";
    position: absolute;
    left:0;
    top:49%;
    width:0;
    height:1px;
    background: #b71a21;
    transition:all 0.3s ease-out;
}

.creator-detail #creator-detail-data #creator-detail-text #creator-detail-profile .creator-profile-lang a:hover:after,
.creator-detail #creator-detail-data #creator-detail-text #creator-detail-profile .creator-profile-lang  a.current:after{
    width:100%;
}

.creator-detail #creator-detail-data #creator-detail-text #creator-detail-profile .creator-profile-text{
	margin-top:1em;
}

.creator-detail #creator-detail-data #creator-detail-text #creator-detail-profile .creator-profile-text p{
	display: none;
}

.creator-detail #creator-detail-data #creator-detail-text #creator-detail-profile .creator-profile-text p.current{
	display: block;
}

.creator-detail #creator-detail-data #creator-detail-text #creator-detail-profile .sub-btn{
	margin-top:2em;
}

.creator-detail #creator-detail-data #creator-detail-text #creator-detail-profile .sub-btn a{
	dispay:inline-block;
    border:1px solid #c9c9c9;
    padding:0.5em 1em;
    position: relative;
    border-radius: 50px;
    text-align: center;
    font-weight: 800;
    font-size: 128%;
}

.creator-detail #creator-detail-data #creator-detail-text #creator-detail-profile .sub-btn a:after{
	content:"";
    width:11px;
    height:9px;
    background:url("../images/common/ico_blank@2x.png") no-repeat 0 0;
    background-size:contain;
    display: inline-block;
    margin-left:0.51em;
    
}

/* works */
.creator-detail #creator-detail-works h3 {
	text-align: center;
	line-height: 1;
	font-size: 257%;
	color:#b71a21;
    font-weight: 800;
	margin: 60px 0 40px 0;
}



@media screen and (max-width: 768px){
.creator-detail #creator-detail-data{
    margin-top:10%;
}
.creator-detail #creator-detail-data .creator-bg {
    width: 100%;
}
.creator-detail #creator-detail-data #creator-detail-text {
    width: 100%;
    margin-top:5%;
}

.creator-detail #creator-detail-works h3 {
    margin: 15% 0 10% 0;
}


}


/* loading
---------------------------------------------------------- */

#loading {
	/*display:none;*/
	background:#b71a21;
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 10000;
	right: 0;
	top: 0;
}
#loading #loading-text {
	position: absolute;
	top: 50%;
	left: 50%;
    transform:translate(-50% , -50%);
    color:#fff;
    font-size:12px;
    font-weight: 800;
	/*width: 100px;
	height: 68px;
	margin-top: -34px;
	margin-left: -50px;*/
    animation: loading-anim 0.1s ease-in-out 0s Infinite;
    text-align: center;
}

#loading #loading-text h2{
    margin-bottom:10px;
}


@keyframes loading-anim {
0% {opacity:1;}
50% {opacity:0.8;}
100% {opacity:1;}
}


/* other
---------------------------------------------------------- */

.pc {
	display: block
}
.sp {
	display: none
}

.font-jp{
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", serif;
	text-align: justify; /* 両端揃え */
	text-justify: inter-ideograph;
}

@media screen and (max-width: 950px) {
.pc {
	display: none
}
.sp {
	display: block
}
}
.clearfix:after {
	display: block;
	clear: both;
	height: 0px;
	visibility: hidden;
	content: "."
}
.clearfix {
	min-height: 1px
}
* html .clearfix {
	height: 1px;
	height: auto;
	overflow: hidden
}