* {
  margin: 0;
  padding: 0;
  list-style-type: none;
  border: none;
  box-sizing: border-box;
}

h1,h2,h3,h4,h5,h6 {
font-weight: normal;
}

a:link {
  color: #fff;
  text-decoration: none; }

a:hover {
  color: #fff;
  text-decoration: none; }

a:action {
  color: #fff;
  text-decoration: none; }

a:visited {
  color: #fff;
  text-decoration: none; }

::selection {
  color: #000;
  background: #fff; }

@font-face {
font-family: 'Noto-Regular';
src: url("../fonts/Noto-Regular.woff") format("woff"),
		   url("../fonts/Noto-Regular.ttf") format("truetype");
}

@font-face {
font-family: 'Gibson-Bold';
src: url("../fonts/Gibson-Bold.woff") format("woff"),
		   url("../fonts/Gibson-Bold.ttf") format("truetype");
}
		
body {
font-size: 13px;
font-family: 'Noto-Regular';
color: #fff;
line-height: 1.7;
letter-spacing: 0.1em;
background-color: #000;
}


video {
width: auto;
height: auto;
min-width: 100%;
min-height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: -1;
opacity: 0.5;
transition-delay: 4s;
}

#hero {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}

#logo {
width: 350px;
}

#logo h1:last-child {
display: none;
}


.logo {
  stroke: #FFF;
  stroke-width: 1;
  fill: transparent;
  stroke-dasharray: 3000;
  animation: dash 3s ease-in 0s forwards;
}

@keyframes dash {
0% {
stroke-dashoffset: 3000;
fill: transparent;
}

100% {
stroke-dashoffset: 0;
fill: #FFF;}
}


h2 {
font-family: 'Gibson-Bold';
font-size: 70px;
line-height: 1;
text-transform: uppercase;
margin: 0 0 50px 0;
}


#works {
padding: 0 0 300px 50px;
}

#category_1 {
margin: 0 0 200px 0;
}

#category_1,
#category_2 {
width: 100%;
overflow: hidden;
position: relative;
}

#category_1 h3,
#category_2 h3 {
font-size: 26px;
line-height: 1;
padding: 0 5px 10px 5px;
display: inline-block;
border-bottom: 1px solid #fff;
position: absolute;
left: 0;
top: 0;
}

.slider {
padding: 0 0 0 300px;
}


#profile {
padding: 0 50px 300px 50px;
}



#block {
display: flex;
padding: 0 60px;
}

#block div:first-child {
max-width: 400px;
margin: 0 60px 0 0;
}

#block div:last-child h3 {
font-family: 'Gibson-Bold';
font-size: 20px;
line-height: 1;
text-transform: uppercase;
margin: 0 0 10px 0;
}

#block div:last-child p {
line-height: 1.5;
margin: 0 0 20px 0;
}

#block div:last-child p:last-child {
margin: 0;
}


#block2 {
display: flex;
padding: 60px 60px 0;
}

#block2 div:first-child {
max-width: 280px;
margin: 0 60px 0 0;
}

#block2 div:last-child h3 {
font-family: 'Gibson-Bold';
font-size: 18px;
line-height: 1;
text-transform: uppercase;
margin: 10px 0 0 0;
}

#block2 div:last-child p {
line-height: 1.5;
margin: 0 0 10px 0;
}

#block2 div:last-child p:last-child {
margin: 0 0 40px 0;
}

/* 親要素 */
#block2 ul { 
    display: flex;
    flex-wrap: wrap; /* 折返し可 */ 
    justify-content: space-between;
}

/* 子要素 */
#block2 li { 
    width: 23% ; /* 親要素の1/4より小さい値 */
}

/* 親要素の疑似要素 */
#block2 ul::after {
    content: "";
    display:block;
    width:23%; /* 子要素と同じ幅 */
}
#block2 ul::before { 
    content: ""; 
    display:block; 
    width:23%; /* 子要素と同じ幅 */
    order: 1; /* アイテムの並び順 */
}






#company {
display: flex;
flex-direction: column;
justify-content: center;
margin: 0 0 250px 0;
}

#info {
margin: 0 auto 50px auto;
}

#info dl {
margin: 0 0 20px 0;
display: flex;
}

#info dl:last-child {
margin: 0;
}

#info dl dt {
width: 7em;
font-size: 90%;
}

#link a {
max-width: 400px;
padding: 15px 0;
margin: 0 auto;
border: 1px solid #fff;
display: block;
text-align: center;
transition: 0.3s;
}

#link a:hover {
color: #16b9ed;
border: 1px solid #16B9ED;
}


footer {
padding: 0 0 10px 0;
font-size: 80%;
text-align: center;
}




@media screen and (max-width: 1000px) {
video {
display: none;
}

#logo h1:first-child {
display: none;
}

#logo h1:last-child {
max-width: 200px;
margin: 0 auto;
display: block;
}

h2 {
font-family: 'Gibson-Bold';
font-size: 50px;
margin: 0 0 25px 0;
}


#works {
padding: 0 20px 100px 20px;
}

#category_1 {
margin: 0 0 50px 0;
}

#category_1,
#category_2 {
overflow: auto;
position: relative;
}

#category_1 h3,
#category_2 h3 {
font-size: 20px;
margin: 0 0 20px 0;
position: relative;
}

.slider {
padding: 0;
}


#profile {
padding: 0 20px 100px 20px;
}

#block {
flex-direction: column;
padding: 0;
}

#block div:first-child {
max-width: 100%;
margin: 0 0 20px 0;
}

#block div:last-child h3 {
font-family: 'Gibson-Bold';
line-height: 1;
text-transform: uppercase;
margin: 0 0 10px 0;
}

#block div:last-child p {
line-height: 1.5;
margin: 0 0 20px 0;
}

#block div:last-child p:last-child {
margin: 0;
}





#block2 {
display: flex;
padding: 40px 10px 0;
}

#block2 div:first-child {
max-width: 280px;
margin: 0 20px 0 0;
}

#block2 div:last-child h3 {
font-family: 'Gibson-Bold';
font-size: 18px;
line-height: 1;
text-transform: uppercase;
margin: 10px 0 0 0;
}

#block2 div:last-child p {
line-height: 1.5;
margin: 0 0 10px 0;
}

#block2 div:last-child p:last-child {
margin: 0 0 40px 0;
}

/* 親要素 */
#block2 ul { 
    display: flex;
    flex-wrap: wrap; /* 折返し可 */ 
    justify-content: space-between;
}

/* 子要素 */
#block2 li { 
    width: 46% ; /* 親要素の1/4より小さい値 */
}

/* 親要素の疑似要素 */
#block2 ul::after {
    content: "";
    display:block;
    width:46%; /* 子要素と同じ幅 */
}
#block2 ul::before { 
    content: ""; 
    display:block; 
    width:46%; /* 子要素と同じ幅 */
    order: 1; /* アイテムの並び順 */
}
	
	
#company {
margin: 0 0 100px 0;
padding: 0 20px;
}

#info {
margin: 0 0 50px 0;
}

#info dl {
flex-direction: column;
}

#info dl dt {
width: auto;
}

#link a {
max-width: 100%;
width: 100%;
}
}