@charset "utf-8";

/* material common ----------*/
#material-slide .tag  , #material .tag { display:flex; justify-content:center; }
#material-slide .tag p , #material .tag li , #material .tag p { 
  max-width:12rem;
  width:100%;
  color:#fff;
  font-weight:bold;
  text-align:center;
  border-radius:10px;
  margin-right:2rem;
}
#material-slide .tag p:last-child ,#material .tag li:last-child { margin-right:0; }
#material-slide .tag .aging , #material .tag .aging { background:#95501B; }
#material-slide .tag .hard , #material .tag .hard{ background:#869CA7; }
#material-slide .tag .soft , #material .tag .soft { background:#519D3F; }
#material-slide .tag .hibiya , #material .tag .hibiya { background:#858585; }
#material-slide .ttl , #material .ttl { font-size:2.4rem; text-align:center; margin:2rem 0; font-weight:bold; letter-spacing:0.3em; }
#material-slide .ttl span , #material .ttl span { display:block; font-size:70%; line-height:1; letter-spacing:normal; }
#material-slide .btn , #material .btn { max-width:90%; width:100%; margin:2rem auto 0; border:solid 1px #737373; }
#material-slide .mate-slide { margin-top:3rem; }
#material-slide .mate-slide li .btn a , #material .btn a { display:block; text-align:center; font-size:1.8rem; font-weight:bold; color:#333; padding:5px 0; }
#material-slide .big-btn , #material .big-btn { max-width:38rem; width:100%; margin:5rem auto 0; }
#material-slide .big-btn a , #material .big-btn a { padding:1rem 0; font-size:2rem; text-align:center; display:block; border:solid 1px #737373; color:#333; font-weight: bold; }

.list-hide { display:none!important; }
.list-active { display:block!important; }
.list-active a { opacity:1!important; }
.active { display:block!important; }
.mincho { font-family:"游明朝", YuMincho, "ヒラギノ明朝 ProN W6", "Hiragino Mincho ProN", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", "Times New Roman", Meiryo, serif; }
.goth { font-family: YuGothic,"游ゴシック","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif; }

.crm { background:#DEDCA0; }
.blk { background:#000; }
.red { background:#DF3642; }
.l-brn { background:#BE933F; }
.brn { background:#7F5204; }
.gry { background:#CCCCCC; }
.org { background:#EF7945; }
.blue { background:#15258F; }
.grn { background:#1B7F32; }
.sky { background:#2894A1; }
.wine { background:#AC0E68; }
.pink { background:#FBB6E4; }
.ple { background:#C867BE; }
.ylw { background:#FFFF00; }

/* material-slide ----------*/
#material-slide * { padding:0; margin:0; }
#material-slide { margin:5rem 0; }
#material-slide .inner { max-width:110rem; padding:0 2rem; margin:0 auto; }
/* slide css */
#material-slide .mate-slide .slick-slide { margin-right: 1vw!important; margin-left: 1vw!important; }
#material-slide .mate-slide .slick-prev , #material-slide .mate-slide .slick-next { z-index:1; width:2rem; height:2rem; }
#material-slide .mate-slide .slick-prev:before , #material-slide .mate-slide .slick-next:before { 
  content:"";
  display: inline-block;
  width:100%;
  height:100%;
  border-top:none;
  border-right:none;
  border-left:5px solid #fff;
  border-bottom:5px solid #fff;
  transform: rotate(45deg);
}
#material-slide .mate-slide .slick-next:before {
  border-top:5px solid #fff;
  border-right:5px solid #fff;
  border-left:none;
  border-bottom:none;
}
#material-slide .mate-slide .slick-prev { left:2rem; }
#material-slide .mate-slide .slick-next { right:2rem; }



#material {}
#material * { margin:0; padding:0; }
#material *:after { display:none; }
#material .inner { max-width:114rem; padding:0 2rem; margin:0 auto; }
#material .sp-only { display:none; }

#material #tag-list { margin-top:3rem; }
#material #tag-list h2 { text-align:center; font-size:2.4rem; margin-bottom:1rem; }
#material #tag-list p { text-align:center; }
#material #tag-list ul { display:flex; justify-content:center; margin:1rem 0 2rem; }
#material #tag-list ul li { }
#material #tag-list ul li a { display:block; color:#fff; border-radius:10px; opacity:.5; }
#material #tag-list ul li a.all { background:#333; }

#material #material-item { border-top:solid 2px #CFCFCF; padding-top:5rem; }
#material #material-item .list { display:flex; flex-wrap:wrap; justify-content:space-between; max-width:90%; width:100%; margin:0 auto; }
#material #material-item .list .list-item { width:48%; margin-bottom:5rem; display:flex; flex-direction:column; }
#material #material-item .list .list-item .text { border-top:solid 1px #333; padding-top:1rem; margin:2rem 0; }
#material #material-item .list .list-item .color { display:flex; justify-content:center; line-height:2rem; align-items:center; margin-top:auto; }
#material #material-item .list .list-item .color div { width:2rem; height:2rem; border-radius:50%; margin-right:1rem; }
#material #material-item .list .list-item .color div:last-child { margin-right:0; }
#material #material-item .list .list-item .btn { margin-top:1rem; }

#material #material-limited { margin:5rem 0 10rem; }
#material #material-limited p.ttl { text-align:center; font-size:1.8rem; margin-bottom:3rem; font-weight:normal; }
#material #material-limited ul { display:flex; }
#material #material-limited ul li { width:calc(100% / 5 - 4rem / 5); margin-right:1rem; }
#material #material-limited ul li:last-child { margin-right:0; }
#material #material-limited ul li a { position:relative; display:block; }
#material #material-limited ul li a p { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100%; text-align:center; color:#fff; font-weight: bold; }
#material #material-limited .big-btn:last-child { margin-top:2rem; }

@media screen and (max-width:600px){
  
  .slick-prev, .slick-next { top:27.5%; }
  
  #material .sp-only { display:block; }
  #material .sp-max { width:100vw; margin:0 calc(50% - 50vw); }
  
  #material #tag-list ul { flex-wrap:wrap; }
  #material #tag-list ul li:nth-of-type(n+4) { margin-top:1rem; }
  
  #material #material-item .list { max-width:100%; }
  #material #material-item .list .list-item { width:100%; }
  
  #material #material-limited ul { flex-wrap:wrap; justify-content:center; }
  #material #material-limited ul li { width:calc(100% / 3 - 2rem / 3); }
  #material #material-limited ul li:nth-of-type(3n) { margin-right:0; }
  #material #material-limited ul li:nth-of-type(n+4) { margin-top:1rem; }
  
}
@media screen and (max-width:390px){
  #material #material-limited ul li a p { font-size:1.4rem; }
}