@charset "UTF-8";
@import url('https://use.fontawesome.com/releases/v5.6.1/css/all.css');

a:link, a:visited, a:hover, a:active {
  color: #7C5119;
  text-decoration: none;
}

*, *::before, *::after {
  box-sizing: border-box;
}



/* --------------------------------
 * header
 * -------------------------------- */
.nav-header {
  padding: 4px 0;
  border-bottom: none;
  text-align: center;
  /* float:left;*/
  visibility: visible;
  display:flex;
  /*background:linear-gradient(to top,#9ea1a3 2%, transparent 20%);*/

}

.nav-filter {
  margin:0 3px 0 2px;
  text-align: center;
  vertical-align: middle;
  background: transparent;
}
.nav-filter::before {
  font-size:1.2em;
  font-family: 'FontAwesome';
  content: '\f0b0';
  color:#c0c6c9;
  text-align: center;
  vertical-align: middle;
}

.nav {
  overflow: hidden;
  width: 100%;
  /*margin: 4px auto 4px;*/
  font-size:80%;
  /*background-color: #c0c6c9;*/

}
.nav-item {
  float: left;
  margin-top: 4px;
  margin-left: 4px;
  margin-bottom: 0px;
  padding-left: 4px;
  padding-right: 4px;
  text-align: center;
  /*letter-spacing: 2px;*/
  /*font-weight: bold;*/
  /*font-size: 1.3rem;*/
}
.nav-item a {
  display: inline-block;
}
.nav-item a::after {
  content: '';
  display: block;
  width: 0;
  /*margin: 6px auto 0;*/
  border-bottom: 1px solid #7C5119;
  transition: width 0.3s ease-in-out;
}
.nav-item a:hover::after {
  width: 100%;
}


/* --------------------------------
 * deploycontents
 * -------------------------------- */
#deploycontents {
   float:left;
   width: 100%;
}
#deploycontents p{
  padding: 0 2px 2px;	/*上、左右、下への余白*/
}





/* --------------------------------
 * item
 * -------------------------------- */
.item {
  width: 220px;
  margin-bottom: 2px;
  padding: 2px;
  /*border-left: 1px solid;*/
  border-radius: 4px;
  overflow: hidden;
  line-heigh:1;

}

.item .category {
  /*margin: 5px 9px 10px;*/
  color: #595857;
  letter-spacing: 1px;
  font-size: 80%; /* お好みで変更してください */
  line-height: 1.2;
}

.item .description {
  margin: 2px;
  line-height: 1.2;
}
/*
.item > a::before {
  content: '';
  position: absolute;
  display: block;
}
*/


.test-item{
  width: 240px;
  height: 240px;
  background-size:  cover;
  background-image: urL("./images/car.png");
  border: 1;
}


.item > a {
  display: block;
  /*border-radius: inherit;*/
  color: #000;
  transition: all 0.3s;
  line-height: 1;
}
.item > a:hover {
  /*box-shadow: 0 0 6px -1px rgba(0, 0, 0, 0.3);*/
  box-shadow: 0px 0px 0px 20px rgba(0, 0, 0, 0.4) inset;
  opacity: 0.8;
}

.a-item{
  background:#80aba9;/*#ede4cd;*/
}
.b-item{
  background:#f4dda5;
}
.c-item{
  background:#f1bf99;
}
.d-item{
  background:#efcd9a;
}
.e-item{
  background:#dbd0e6;
}
.f-item{
  background:#eefff7
}
.g-item{
  background: #eeffff;
}
/* #eef7ff #eeeeff #f7eeff #ffeeff #ffeef7*/
.fuk{
  color:#ee827c;
}

.item-m {
  width: 440px;
}
.item-m .image {
  /*height: 146px;*/
}
.item-l {
  width: 732px;
}
.item-l .image {
  /*height: 403px;*/
}


.item-m > a::before {
  /*height: 146px;*/
}
.item-l > a::before {
  /*height: 403px;*/
}
.item > a:hover::before {
  opacity: 1;
}
.item > a::after {
  content: 'MORE';
  position: absolute;
  top: 3.5px;
  left: 150%;
  display: block;
  /*width: 100px;*/
  margin-left: -20px;
  padding: 8px;
  border: 3px solid #fff;
  color: #fff;
  text-align: center;
  letter-spacing: 3px;
  font-size: 1.6rem;
  font-family: "Trebuchet MS", "Hiragino Kaku Gothic ProN",  Meiryo,  sans-serif;
  opacity: 0;
  transition: all 0.3s ease-in-out;
}
.item-m > a::after {
  top: 62px;
}
.item-l > a::after {
  top: 190.5px;
}
.item > a:hover::after {
  left: 38%;
  opacity: 1;

}
/*
section p span::before {
	content: "「";
	color: #7fb7da;
	font-size: 129%;
}
*/


.done::before{
 content: "終";
 height: 30px;
 padding: 4px 9px;
 font-size: 14px;
 color: #ffffff;
 background: #0d0015;
 /*font-weight: bold;*/
 border-radius: 6px;
 margin:2px 2px 2px 2px;
}

.head_line{
     /*background: #a3a3a2;*/
     font-size: 90%;
     margin-bottom: 1px;
     display: block;

 }
 .head_line .inner{
     /*max-width: 1276px;*/
     margin: 0 auto;
     position: relative;
 }
 .head_line .hl_title{
     /*padding: 10px 5px 10px 15px;*/
     /*color: #e95464;*/
     color:black;
     vertical-align: middle;
     background:#c8c2c6;
     border-radius: 0 10px 10px 0px;

     margi-right:10px;
     padding:0px 10px;
 }
 .head_line ul::before{
    content:"新着";
    color:black;
    background:#c8c2c6;
    border-radius: 0 10px 10px 0px;
    height: calc(1em + 20px);
    margi-right:10px;
    padding:0px 10px;

 }

 .head_line ul{
     width: 100%;
     margin: 0px;
     height: calc(1em + 20px);
     overflow: hidden;
     white-space: nowrap;
     position: relative;
 }
 .head_line ul li{
     width: 100%;
     padding-left: 120px;
     animation : headLine 24s linear infinite;  /* 1項目、8秒の設定で×3件 */
     position: absolute;  /* 表示項目を全部重ねる */
     top: 0;
     left:50px;
     /*background: white;*/
     z-index: 3;
     opacity: 0;
     visibility: hidden;  /* visibilityで要素を非表示に */
     line-height: 1;
     list-style: none;
 }

 .head_line ul li::before{
     content: '';
     width: 100px;
     height: 50px;
     position: absolute;
     top: 0;
     left: 0;
     /*background: white;*/
 }


 /* visibilityで要素の表示・非表示を切り替え */
 @keyframes headLine{
     from {
         opacity: 1;
         visibility: visible;
     }
     33% {
         opacity: 1;
         visibility: visible;
     }
     34% {
         opacity: 0;
         visibility: hidden;
     }
     99% { opacity: 0;}
     100% { opacity: 1;}
 }
 .head_line ul li:nth-of-type(2){
     animation-delay: 8s;
     z-index: 2;
 }
 .head_line ul li:nth-of-type(3){
     animation-delay: 16s;
     z-index: 1;
 }
 .head_line ul li .day{
     padding: 5px 10px;

     border-radius: 5px;
     position: absolute;
     top: 6px;
     left: 6px;
     z-index: 1;
     color: black;
     /*background: #333;*/

 }
 .head_line ul li .topic{
     padding: 10px 15px;
     display: block;
     transform: translateX(100%);
     animation : listScroll 24s linear infinite;
     text-decoration: none;
     transition: .5s;
     color: black;
 }
 .head_line ul li:nth-of-type(2) .topic{
     animation-delay: 8s;
 }
 .head_line ul li:nth-of-type(3) .topic{
     animation-delay: 16s;
 }
 @keyframes listScroll{
     from { transform: translateX(100%);}
     4% { transform: translateX(0);}
     35% { transform: translateX(0);}
     100% { transform: translateX(100%);}
 }

 @media screen and (max-width:480px){
   .nav-header {
     visibility:hidden;
     display:none;
  }
  .head_line{
    visibility:hidden;
    display:none;
  }
  .item{
    width:100%;
  }

 }