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

.type {position: relative; margin-bottom: 4rem;}
.type .cateNav {display: block; text-align: center; font-family: 'Futura', sans-serif; font-weight: 300; font-size: 1.4rem;}
.type .cateNav li {display: inline-block; margin-right: 2rem;}
.type .cateNav li a {position: relative; padding-bottom: 2px;}
.type .cateNav li a:hover {border-bottom: 1px solid #000;}
.type .cateNav li a.active {border-bottom: 1px solid #000;}
.type .cateNav li a.active:hover {opacity: 1;}
.type .material {width: 290px; position: absolute; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); right: 0;}
.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;}

.menuChild {margin-bottom: 4rem;}
.menuChild ul {justify-content: flex-start; align-items: stretch;}
.menuChild ul li a {display: block;}
.menuChild ul li a:hover {text-decoration: underline;}
.menuChild ul li {margin-right: 30px; text-align: left;}
.menuChild ul li:nth-of-type(1) {font-size: 2.8rem; margin-right: 100px;}

#box01 {text-align: center;}
#box01 > ul {justify-content: flex-start;}
#box01 > ul > li {width: 19.5%; margin-right: 0.625%; margin-bottom: 2rem;}
#box01 > ul > li:nth-of-type(5n) {margin-right: 0;}
#box01 > ul > li > a > span {margin-bottom: 0.5rem; display: block; text-align: left;}
/*#box01 > ul > li > a > span img {height: 15px;}*/
#box01 > ul > li > a .txt {text-align: center; line-height: 1.4;}
#box01 > ul > li > a .txt .name {font-family: 'Futura', sans-serif; font-weight: 300; padding: 0.5rem 0; margin-bottom: 0.5rem; border-bottom: 1px solid #9d9d9d;}
#box01 > ul > li > a .txt .name p:nth-of-type(1) {font-size: 1.6rem;}
#box01 > ul > li > a .txt .name p:nth-of-type(2) {}
#box01 > ul > li > a .txt .desc {font-size: 1.2rem;}

/*search*/
.search-box {max-width: 500px; width: 100%; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between;}
.search-box input[type=text] {border: 1px solid #d9d9d3; padding: 0.8rem 0.5rem; width: 70%; font-family: "游ゴシック体", "YuGothic", "游ゴシック Regular", "Yu Gothic Regular", "游ゴシック", "Yu Gothic", sans-serif; font-weight: 600;}
.search-box input[type=submit] {display: block; width: 25%; margin: 0 auto; text-align: center; border: 1px solid #000; padding: 1rem 1rem; font-family: "游ゴシック体", "YuGothic", "游ゴシック Regular", "Yu Gothic Regular", "游ゴシック", "Yu Gothic", sans-serif; font-weight: 600; background: transparent; cursor: pointer; }
.search-box input[type=submit]:hover {background: #d0c2ab;}
#box01 > ul > .w100 {width: 100%; text-align: center;}

/*Responsive*/
@media only screen and (max-width: 1600px){
  #box01 > ul > li > a .txt .name p:nth-of-type(1) {font-size: 2rem;}
}

@media only screen and (max-width: 1500px){
  .type .material {position: static; transform: translateY(0); -webkit-transform: translateY(0); margin: 1rem auto 0;}
}

@media only screen and (max-width: 960px){
  .menuChild ul li:nth-of-type(1) {width: 100%;}
  .menuChild ul li {margin-bottom: 10px;}
}

@media only screen and (max-width: 768px){
  #box01 > ul {justify-content: space-between;}
  #box01 > ul > li {width: 49%;}  
  #box01 > ul > li:nth-of-type(5n) {margin-right: 2%;}
  #box01 > ul > li:nth-of-type(2n) {margin-right: 0;}
}


@media only screen and (max-width: 767px){
  .type {margin-bottom: 3rem;}
  .type .cateNav {text-align: left;}
  .type .cateNav li {width: 32%; margin-right: 0; text-align: left; margin-bottom: 0.5rem;}

  .menuChild {margin-bottom: 2rem;}
  .menuChild ul li {width: 49%; margin: 0 0 10px;}
  .menuChild ul li:nth-of-type(1) {font-size: 2rem;}

  /*search*/
  .search-box input[type=text] {width: 100%; margin-bottom: 1rem;}
  .search-box input[type=submit] {width: 120px; padding: 1rem 0; appearance: none; -moz-appearance: none; -webkit-appearance: none; -ms-appearance: none; -o-appearance: none; background: #fff; color: #000;}
}

@media only screen and (max-width: 480px){
  #box01 > ul > li {width: 100%;}
}