@charset "utf-8";
@font-face {font-family: Futura; src: url(../fonts/FuturaPTMedium.otf);}

.type {margin-bottom: 3rem;}
.type .material {width: 290px; margin-right: 0; margin-left: auto;}
.type .material li {width: 50%; border: 1px solid #000;}
.type .material li:nth-of-type(1) {border-right: 0;}
.type .material li a {text-align: center; display: block;}
.type .material li a:hover {box-shadow: inset 400px 0 0 0 #d0c2ab;}

#box01 {text-align: center; padding: 0;}
#box01 > ul {justify-content: flex-start;}
#box01 > ul > li {width: 16.36%; text-align: left; margin-right: 4.55%; margin-bottom: 0;}
#box01 > ul > li:nth-of-type(5n) {margin-right: 0;}
#box01 > ul > li .txt {text-align: left;}
#box01 > ul > li .txt .name {padding-bottom: 0.5rem; margin-bottom: 1rem; border-bottom: 2px solid #b6b6b6; font-size: 1.6rem; font-family: 'Futura', sans-serif; font-weight: 300px;}
#box01 > ul > li .txt a:hover {text-decoration: underline;}


/*Responsive*/
@media only screen and (max-width: 1600px){  
}

@media only screen and (max-width: 960px){	
  #box01 > ul > li {width: 31.33%; margin-right: 3%;}
  #box01 > ul > li:nth-of-type(5n) {margin-right: 3%;}
  #box01 > ul > li:nth-of-type(3n) {margin-right: 0;}
}

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


@media only screen and (max-width: 767px){
  .type .material {margin: 0 auto 50px;}
  #box01 > ul > li {width: 100%; margin: 0 auto 20px;}
  #box01 > ul > li figure {text-align: center;}
}

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