@charset "UTF-8";

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: #aaa;
  font-size: 0.875rem;
  min-height: 100vh;
  position: relative;
  font-family: "futura", "ヒラギノ丸ゴ Pro W4", "Hiragino Maru Gothic Pro", sans-serif;
}

hr {
  margin-top: 0px;
  margin-bottom: 16px;
}

a {
  color: #666;
  text-decoration: none;
  transition: all 0.5s;
}

img {
  max-width: 100%;
  border: 0px;
}

li {
  list-style: none;
}

.youtube {
  width: 100%;
  aspect-ratio: 16 / 9;
  vertical-align: middle;
}

.pictframe {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center ; 
}

dl {
  display: inline-block;
  width: auto;
  margin-top: 10px;
  margin-bottom: 10px;
}

dt {
  /* /左に寄せる/ */
  float: left ;
  /* /後続の左寄せを解除/ */
  clear: left ;
  margin-right: 0.5em ;
  width: 130px;
}

dd {
  float: left ;
  margin-left: 1em ;
}

.flow {
  display: flex;
  justify-content: center;
}

.list-wrapper {
  display: inline-block;
  max-width: 750px;
}

#lede{
  color: #444;
}
.msg {
      /* margin: 10px auto; */
      padding-top:10px;
      /* text-align: center; */
      line-height:150%;
      /* font-style: italic */
    }

    .msg h3 {
      text-align: center;
      margin-top: 0;
      margin-bottom: 0;
    }


    .msg ul{
      margin-top: 6px;
      margin-bottom: 6px;
      display: inline-block;
      max-width: 750px;    
    }
    .msg li {
      list-style-type: disc;
      /* line-height: 160%; */
    }

    em {
      color: #dd0000;
      font-weight: bold;
      font-style: normal;
    }

    .ref li{ 
      list-style:none; 
    }
    /* .ref :before {
      content:"※ "; 
    } */

    /* ページTOPに戻る */
      .pagetop {
        display: none;
        position: fixed;
        z-index: 10;
        /* 重なり指定 */
        right: 25px;
        bottom: 60px;
      }

      .pagetop a {
        display: block;
        font-size: 0;
        width: 50px;
        height: 50px;
        text-align: center;
        background: #ccc;
        border-radius: 50%;
        line-height: 50px;
      }

      /* コンテンツ幅を設定するための共通クラス */
      .wrapper {
        width: 100%;
        max-width: 1080px;
        margin: 0 auto;
        /* position:relative;
        z-index:-1; */
        /* 重なり指定 */
      }

      .wrapper a:hover {
        opacity: 0.6;
      }

      .product-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        /*text-align: centers;*/
        padding-left: 0px;
      }
      
      .product-list::before {
      	display: block;
      	content: "";
      	width: 23%;
        order: 1;
      }

      .product-list::after {
      	display: block;
      	content: "";
      	width: 23%;
      }

      .product-list li {
        width: 23%;
        padding: 10px 0;
        margin-bottom: 20px;
        /*border: 1px solid #ccc;*/
        background-color: #f3f3f3;
      }

      .product-list li.none {
        border: 1px solid white;
      }
      
      .product-link {
      	position: relative;
      	width: 100%;     
      }

      .product-link .link {
      	display: block;
      	position: absolute;
      	top: 0;
      	left: 0;
      	width: 100%;
      	height: 100%
      }

      /* vertical-align: top;画像の下にできる隙間を消す */
      .product-list img {
        width: 100%;
        height: auto;
            aspect-ratio: 4 / 3;
        object-fit: contain;
        vertical-align: top;
        margin-bottom: 10px;
      }

      .product-list h3 {
        font-weight: bold;
        padding: 0 7px;
        margin-bottom:  0.2em;
        color: #333;
        line-height: 1.1;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden; 
        text-align: center;
      }

      .product-list h3 .new{
        color: red;
        font-weight: bold;
        font-style: italic;
      }


      .product-list .supplier {
        font-size: 12px;
        font-style: italic;
        font-weight: normal;
        text-align: center;
        vertical-align: bottom;
        color: #888;
      }

      .product-list .price {
        font-size: 1.1em;
        font-style: normal;
        font-weight: normal;
        text-align: right;
        vertical-align: bottom;
        color: #888;
      }

      .product-list span {
        font-size: 12px;
        font-weight: normal;
        bottom: 0;
        text-align: right;
        vertical-align: baseline;
        color: #888;
      }

      .product-list p {
        /*font-size: .9rem;*/
        font-size: 13px;
        line-height: 1.0rem;
        margin:  0.5rem 0;
        /*padding: 0 10px;*/
        font-weight: normal;
        /*text-align:  left;*/
      }
      
      .info {
      	padding: 10px 10px 0px;
      }
      
      .product-list .samplelink {
      	text-align: right;
      	margin-right: 10px;
      	padding-top: 0px;
      	padding-bottom: 10px;

      }

      .samplelink img{
      	width: 20px;
      	height: 15px;
      	display: inline-block;
      	margin-left: 1px;
      	margin-right: 3px;
      	margin-top: 2px;
      	}

      .line-clamp {
        /* display: -webkit-box; */
        display: none;
        -webkit-line-clamp: 6;
        -webkit-box-orient: vertical;
        overflow: hidden; 
      }


      /* 画像の拡大 */
      .zoomIn a img {
        transform: scale(1);
        transition: .3s ease-in-out;
        /*移り変わる速さを変更したい場合はこの数値を変更*/
      }

      .zoomIn a:hover img {
        transform: scale(1.1);
      }
        
      /* 出し分け */
      .search-container {
        display: block;
        /* justify-content: space-between; */
      }
      .search-item {
        display: inline-block;
        padding: 2px 7px;
        cursor: pointer;
        font-size: 160%;
        border:2px solid;
        border-radius: 20px;
        margin: 5px;
        vertical-align: middle;
      }
      .search-item.is-active {
        color: white;
        background-color: #444;
        font-size: 160%;
      }
      .is-hide {
        display: none;
      }

      /* #processed-food {
        position: relative;
        display: inline-block;
      } */

      .sub {
        display: none;
        z-index: 10;
        padding-left: 0;
        width: 600px;
        text-align: left;
      }

      .sub ul {
        padding-left: 0;
      }

      .sub li{
        display: inline-block;
        font-size: 80%;
      }

      /* #processed-food:hover {
        color: red;
      }       */
 
      #processed-food:hover .sub {
        display: inline-block;
        /* position: absolute;
        top: 1.7em;
        left: 0; */
      }




      .space-02 {
        border: 1px solid white;
        display: none;
      } 
      .space-03 {
        border: 1px solid white;
        display: none;
      }
      .space-04 {
        border: 1px solid white;
        display: none;
      }
      .space-05 {
        border: 1px solid white;
        display: none;
      }
      .space-06 {
        border: 1px solid white;
        display: none;
      }
      .space-07 {
        border: 1px solid white;
        display: none;
      }
      .space-08 {
        border: 1px solid white;
        display: none;
      }
      .space-09 {
        border: 1px solid white;
        display: none;
      }
      .space-10 {
        border: 1px solid white;
        display: none;
      }
      .space-11 {
        border: 1px solid white;
        display: none;
      }
      .space-12 {
        border: 1px solid white;
        display: none;
      }
      .space-13 {
        border: 1px solid white;
        display: none;
      }
      .space-14 {
        border: 1px solid white;
        display: none;
      }
      
      #language {
        text-align: right;
      }
    
      #language a{
        color: #aaaaaa;
      }
    
      .selected {
        color: #666666;
        font-weight: bold;
      }

      /* 出し分けここまで */
      @media only screen and (max-width: 900px) {
        .product-list li {
          width: 47%;
        }

        .product-list img {
          width: 150px;
          height: 150px;
          object-fit: contain;
        }
      .product-list p {
        font: size 14px;
        font-weight: 600;
      }

      .product-list span {
        font-size: .12px;
      }

      div.msg {
        margin: 3px;
        font-size: 11px;
      }

  .youtube {
    width: 100%;
    aspect-ratio: 16 / 9;
    vertical-align: middle;
  }
  
  .pictframe {
    width: 100%;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center ; 
  }

  #language {
    text-align: right;
  }

  #language a{
    color: #aaaaaa;
  }

  .selected {
    color: #666666;
    font-weight: bold;
  }
}