@charset "utf-8";



/* --------------------------------------------------- */
/* DefaultBlock                                        */
/* 汎用Block                                           */
/* --------------------------------------------------- */

/* DefaultBlock (common style)
--------------------------------------------------- */
.DefaultBlock{
  margin: 75px auto;
  margin: 50px auto;
  position: relative;
  z-index: 10;
}
.DefaultBlock:first-child{
  margin-top: 25px;
}
    /* ヘッダ部分 */
    .DefaultBlock .BlockHeader{
      margin: 0 0 0.5em;
    }
    /* コンテンツ部分 */
    .DefaultBlock .BlockContents{
    }
    
    
        /* - - Tab - - */
        .DefaultBlock .Tab{
          padding: 30px;
          margin: 0 auto;
          position: relative;
        }
        
        
        /* - - Paragraph - - */
        .DefaultBlock .Paragraph{
          background:  rgba(235,235,235,0.875);
          background: #fafafa;
          padding: 50px 75px;
          margin: 50px auto;
          position: relative;
        }
        .DefaultBlock .Paragraph:first-child{
          margin-top: 25px;
        }
        .DefaultBlock .Paragraph::before,
        .DefaultBlock .Paragraph::after{
          position: absolute;
          left: 0%;
          width: 100%;
          height: 25px;
          content: "";
          display: block;
          background-image:  url(../img/common/decoration/shadow_v.png);
          background-repeat: no-repeat;
          opacity: 0.05;
        }
        .DefaultBlock .Paragraph::before{
          bottom: 100%;
          background-position: 50% 0%;
        }
        .DefaultBlock .Paragraph::after{
          top: 100%;
          background-position: 50% 100%;
        }
            .DefaultBlock .Paragraph .ParagraphHeader {
              margin: 0 0 1.5em;
            }
            .DefaultBlock .Paragraph .ParagraphFooter{
              padding: 1em 0;
            }
            /* ヘッダ用 フルサイズ画像 表示の特殊処理 */
            .ParagraphHeader .SknTplImageParagraph.FullImage{
              margin: -50px -75px 50px;
            }
            /* 見出しスタイルの特殊処理 */
            .Paragraph .Heading.Type5{
              margin-left:  -12.5px;
              margin-right: -12.5px;
            }
            
        
        /* - - SubParagraph - - */
        .DefaultBlock .SubParagraph{
          margin: 50px auto;
          position: relative;
        }
        .DefaultBlock .SubParagraph:first-child{
          margin-top: 0px;
        }
        .DefaultBlock .SubParagraph:last-child{
          margin-bottom: 0px;
        }
            
            .DefaultBlock .Paragraph .ParagraphHeader {
              margin: 0 0 1.5em;
            }
            






/* --------------------------------------------------- */
/* ProductBlock                                        */
/* 商品リスト                                          */
/* --------------------------------------------------- */


/* ProductBlock 検索用
--------------------------------------------------- */
.ProductBlock.Search{
  margin: 0 0 2em;
}
    /* ヘッダ部分 */
    .ProductBlock.Search .BlockHeader{
      
    }
    .ProductBlock.Search .BlockHeader .Heading{
      margin-bottom: 1em;
    }
    /* コンテンツ部分 */
    .ProductBlock.Search .BlockContents{
      padding: 0;
      background: rgba(128,128,128,0.15);
      background: rgba(230,230,230,0.875);
      text-align: center;
      margin: 0 auto;
    }
        /* 検索ボックス部の補足CSS */
        .ProductBlock.Search .BlockContents .SearchBox{
          margin: 0;
          display: inline-block;
        }
        .ProductBlock.Search .BlockContents .CategorySearchBox{
          line-height: 4.5;
        }
        .ProductBlock.Search .BlockContents .FreeWordSearchBox{
          line-height: 4.5;
          padding: 0 1.5em;
        }
        .ProductBlock.Search .BlockContents .FreeWordSearchBox .InputText{
          background: #fff;
          border: 1px solid #ccc;
        }
        /* カテゴリリスト部の補足CSS */
        .ProductBlock.Search .CategoryList{
        }
        .ProductBlock.Search .CategoryList > li{
          display: inline-block; /* 初期値 */
        }
        .ProductBlock.Search .CategoryList .li-level-1{
          border-left: 1px solid rgba(128,128,128,0.125);
        }
        .ProductBlock.Search .CategoryList .li-level-1:last-child{
          border-right: 1px solid rgba(128,128,128,0.125);
        }
        .ProductBlock.Search .CategoryList .a-level-1{
          display: block;
          padding: 0 1em;
          position: relative;
        }
        .ProductBlock.Search .CategoryList .a-level-1 .Icon{
          position: absolute;
          left: 0%;
          bottom: 0%;
          line-height: 1.5;
          text-align: center;
          width: 100%;
          opacity: 0.25;
        }






/* ProductBlock 一覧表示用
--------------------------------------------------- */
.ProductBlock.List{
  
}
    /* 現在の検索条件表示用テキスト */
    .ProductBlock.List .SearchConditions{
      text-align: center;
      padding-bottom: 1em;
    }
        .ProductBlock.List .SearchConditions .Main{
          color: rgb(22,119,203);
        }
        .ProductBlock.List .SearchConditions .Sub{
          margin-left: 0.75em;
        }


    /* タイトル部分 */
    .ProductBlock.List .BlockHeader{
      
    }
        .ProductBlock.List .BlockHeader .Heading{
          display: inline-block;
        }


    /* コンテンツ部分 */
    .ProductBlock.List .BlockContents{
      padding: 2em 0;
      background: #fff;
    }
    .ProductBlock.List .BlockContents.NotFound{
      background: none;
    }
    


    /* フッタ部分 */
    .ProductBlock.List .BlockFooter{
      padding: 1em 0;
    }

    /* SknTplThumbnailListを上書き */
    .ProductBlock.List .ThumbnailList{
      list-style: none;
    }
        .ProductBlock.List .ThumbnailList > li{
        }
        .ProductBlock.List .ThumbnailList > li a{
          padding: 20px;
        }
            .ProductBlock.List .ThumbnailList > li .ImageItem{
            }
            .ProductBlock.List .ThumbnailList > li .ImageItem .Image{
            }
            .ProductBlock.List .ThumbnailList > li .ImageItem .Image img{
              width: 100%!important;
              height: auto!important;
            }
            .ProductBlock.List .ThumbnailList > li .TextItem{
              line-height: 1.5;
            }
            .ProductBlock.List .ThumbnailList > li .TextItem .Title{
              margin-bottom: 0.5em;
            }
            .ProductBlock.List .ThumbnailList > li .TextItem .DefaultText.Info{
              margin: 0 0 0;
            }
            .ProductBlock.List .ThumbnailList > li .TextItem .CategoryList{
              margin: 0;
              line-height: 1.25;
              font-size: 75%;
            }
            .ProductBlock.List .ThumbnailList > li .TextItem .CategoryList li{
              display: inline;
            }
            .ProductBlock.List .ThumbnailList > li .TextItem .CategoryList li span{
              margin-right: 0.75em;
            }
            .ProductBlock.List .ThumbnailList > li .TextItem .CategoryList li span:last-child{
              margin-right: 0em;
            }
            .ProductBlock.List .ThumbnailList > li .TextItem .CategoryList li::after{
              content: "/";
            }
    /* ColumnGroupを上書き */
    .ProductBlock.List .ColumnGroup{
    }
            .ProductBlock.List .ColumnGroup > .Column > .inner{
              padding: 0;
            }





/* ProductBlock 詳細表示用
--------------------------------------------------- */
.ProductBlock.Detail{
  position: relative;
  margin: 0 auto 6em;
  background: #fff;
}

    /* ヘッダ部分 */
    .ProductBlock.Detail .BlockHeader{
      margin: 0 0;
    }
        /* 商品名 */
        .ProductBlock.Detail .BlockHeader .Heading{
          position: relative;
          margin: 0;
          color: #fff;
          background: #444a59;
          font-weight: 400;
        }
        .ProductBlock.Detail .BlockHeader .Heading .Main{
          font-size: 150%;
          padding: 0.75em 1em;
          display: block;
        }
        .ProductBlock.Detail .BlockHeader .Heading .Date{
          font-size: small;
          font-size: 0.75rem;
          position: absolute;
          right:  20px;
          top: 50%;
          margin-top: -0.75rem;
          z-index: 10;
        }
        
        /* メタ情報 */
        .ProductBlock.Detail .BlockHeader table.Meta{
          width: 100%;
          border-collapse: collapse;
          margin: 0 auto;
          font-size: 87.5%;
        }
        .ProductBlock.Detail .BlockHeader table.Meta thead th,
        .ProductBlock.Detail .BlockHeader table.Meta tbody td{
          text-align: center;
          padding: 0.375em 0;
          border: 1px solid #ddd;
          border: 1px solid rgba(10,120,200,0.375);
        }
        .ProductBlock.Detail .BlockHeader table.Meta thead th{
          font-weight: normal;
          font-size: smaller;
          color: rgba(10,60,100,0.75);
          background: #fff;
          background-image: linear-gradient( to bottom, rgba(10,120,200,0.25), rgba(10,120,200,0.1) );
        }
        .ProductBlock.Detail .BlockHeader table.Meta thead th.LargeCategory,
        .ProductBlock.Detail .BlockHeader table.Meta thead th.MediumCategory,
        .ProductBlock.Detail .BlockHeader table.Meta thead th.SmallCategory{
          width: 20%;
        }
        .ProductBlock.Detail .BlockHeader table.Meta thead th.CompanyName{
          width: 40%;
        }
        
        .ProductBlock.Detail .BlockHeader table.Meta tbody td{
        }



    /* コンテンツ部分 */
    .ProductBlock.Detail .BlockContents{
      padding: 50px;
      border: 1px solid  #ccf;
      border-top: none;
    }
        /* - - Column - - */
        .ProductBlock.Detail .BlockContents  .TextColumn{
          width: 67.5%;
          float: left;
        }
        .ProductBlock.Detail .BlockContents .ImageColumn{
          width: 27.5%;
          float: right;
        }
        
        
        /* - - 画像 ＆ キャプション - - */
        .ProductBlock.Detail .BlockContents .ImageItem{
          color: rgba(10,120,200,1);
          margin: 0 0 1.5em;
          border: 1px solid;
        }
        .ProductBlock.Detail .BlockContents .ImageItem .Heading{
          margin: 0;
          padding: 0.5em 0;
          text-align: center;
          border-bottom: 1px solid;
          font-weight: 400;
          font-size: 87.5%;
          letter-spacing: 0.05em;
        }
        .ProductBlock.Detail .BlockContents .ImageItem .Image{
          display: block;
          margin: 0;
          padding: 4px;
        }
        .ProductBlock.Detail .BlockContents .ImageItem .Image a{
          display: block;
          overflow: hidden;
        }
        .ProductBlock.Detail .BlockContents .ImageItem .AdditionalText{
          font-size: 75%;
          display: block;
          border-top: 1px solid;
          margin: 0;
          padding: 0.5em;
        }
        
        /*
        .ProductBlock.Detail .BlockContents .ImageItem .CaptionText{
          font-size: ;
          display: block;
          border-top: 1px solid;
          margin: 0;
          padding: 0.5em 0;
        }
        */
        
        
        
        
        /* - - Paragraphs - - */
        .ProductBlock.Detail .BlockContents .Paragraph{
          font-size: 87.5%;
          margin-bottom: 2em;
        }
        .ProductBlock.Detail .BlockContents .Paragraph .DefaultText{
          margin-bottom: 0;
        }
        
        
        /* - - 企業情報（テーブル） - - */
        .ProductBlock.Detail .BlockContents .CompanyInfoTable{
        }
        .ProductBlock.Detail .BlockContents .CompanyInfoTable .CompanyName{
          font-weight: 600;
        }
        
        /* - - 料金表（テーブル） - - */
        .ProductBlock.Detail .BlockContents .PriceTable,
        .ProductBlock.Detail #PriceParagraph table{
          width: 100%;
          border-collapse: collapse;
          margin: 1em auto;
        }
        .ProductBlock.Detail .BlockContents  .PriceTable th,
        .ProductBlock.Detail .BlockContents  .PriceTable td,
        .ProductBlock.Detail #PriceParagraph table th,
        .ProductBlock.Detail #PriceParagraph table td{
          text-align: center;
          padding: 0.375em 0.25em;
          padding: 0.375em 0.5em;
          border: 1px solid #ccf;
          font-weight: normal;
        }
        .ProductBlock.Detail .BlockContents  .PriceTable thead th,
        .ProductBlock.Detail #PriceParagraph table .ListName,
        .ProductBlock.Detail #PriceParagraph table .ListHeader{
          font-size: 75%;
          color: rgba(10,60,100,0.75);
          background: #fff;
          background-image: linear-gradient( to bottom, rgba(10,120,200,0.25), rgba(10,120,200,0.1) );
          white-space: nowrap;
        }
        .ProductBlock.Detail .BlockContents .PriceTable tbody th{
          background: #f7f7f7;
        }
        .ProductBlock.Detail .BlockContents .PriceTable td{
        }
                .ProductBlock.Detail #PriceParagraph table th[align="right"],
                .ProductBlock.Detail #PriceParagraph table td[align="right"]{
                  text-align: right;
                }

        /* - - 商品補足情報 （グリーン購入・認定リサイクルなど表記） - - */
        .ProductBlock.Detail .ProductAttributes{
          margin-top: 1em;
          list-style: none;
        }
        .ProductBlock.Detail .ProductAttributes li{
          display: inline-block;
        }
        .ProductBlock.Detail .ProductAttributes li .Label{
          color: #36a;
          border: 1px solid;
          padding: 0 .5em;
          display: inline-block;
          line-height: 2;
          font-size: 75%;
          vertical-align: middle;
        }




        /* - - その他 アイコン微調整 - - */
        
            /* メールアイコン微調整 */
            .ProductBlock.Detail .icon-mail::before{
              -webkit-transform: scale(1.5);
                      transform: scale(1.5);
            }
            /* 情報アイコン微調整 */
            .ProductBlock.Detail .icon-info::before{
              -webkit-transform: scale(1.5);
                      transform: scale(1.5);
            }



    /* - - フッタ部分 - - */
    .ProductBlock.Detail .BlockFooter{
      padding: 0;
      position: absolute;
      top: 100%;
      left: 0px;
      width: 100%;
      padding: 1em 0;
    }




/* --------------------------------------------------- */
/* InformationBlock                                    */
/* インフォメーション 用ブロック(汎用)                 */
/* --------------------------------------------------- */
.InformationBlock{
}
    /* - - フッタ部分 - - */
    .InformationBlock .BlockFooter{
      padding: 2em 0 0;
    }
    /* - - 記事一覧 - - */
    .InformationBlock .NewsList{
      max-width: 700px;
      margin: 1em auto;
      list-style: none;
    }
        .InformationBlock .NewsList li{
          border-bottom: 1px solid #f0f0f0;
        }
        .InformationBlock .NewsList li{
        }
        .InformationBlock .NewsList li > a,
        .InformationBlock .NewsList li > span{
          display: block;
          padding: 0.75em 0.5em;
          border-radius: 0.25em;
        }
        .InformationBlock .NewsList li  .Date,
        .InformationBlock .NewsList li  .Title{
          display: block;
          line-height: 1.5rem;
        }
        .InformationBlock .NewsList li  .Date{
          width: 10em;
          color: #e93737;
          float: left;
        }
        .InformationBlock .NewsList li  .Title{
          margin: 0;
          margin-left: 10em;
          text-align: left;
        }
        /* hover */
        .InformationBlock .NewsList li a:hover{
          background: rgba(20,120,200,0.1);
          background-color: #444a59;
        }
        .InformationBlock .NewsList li a:hover,
        .InformationBlock .NewsList li a:hover *{
          color: #fff;
        }