@charset "utf-8";

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ● [県産品ラインナップ]専用CSS                          */
/*    ・ページ固有の処理を記述                             */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

.PageContentsArea{
}

    /* - - ページ全体の背景 - - */
    .PageBgDecoration{
      /*background: none;*/
    }






/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ● [シーンから探す]専用CSS                              */
/*    ・ページ固有の処理を記述                             */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++ */


/* パンくずの位置を調整 */
.SceneExamplePage .BreadCrumb{
  margin: 1em auto 0;
}
.SceneExamplePage .BreadCrumb p{
  border: none;
}




/* --------------------------------------------------- */
/* 各種エリアと背景                                    */
/* --------------------------------------------------- */

/* SceneExampleArea
--------------------------------------------------- */
.SceneExampleArea{
/*
  background: #eee;
  background-image: linear-gradient( to bottom, rgba(235,235,245,0), rgba(235,235,245,1) );
*/
  background: rgba(235,235,245);
  padding:  50px 0 75px;
  
  
}



/* --------------------------------------------------- */
/* SceneExampleBlock                                   */
/* シーン別活用事例 用ブロック                         */
/* --------------------------------------------------- */
.SceneExampleBlock{
  
}
    .SceneExampleBlock .BlockHeader{
      
    }
    .SceneExampleBlock .BlockHeader .Heading{
      margin-bottom: 0.5em;
      padding-bottom: 0.5em;
    }
    .SceneExampleBlock .BlockHeader .Heading::after{
      display: none;
    }
    /* タブ（タブメニュー部） */
    .SceneExampleBlock .TabMenu{
      margin-bottom: 1.5em;
    }
    .SceneExampleBlock .TabMenu ul{
    }
    /* タブ（本体部） */
    .SceneExampleBlock .Tab{
      background: #fff;
      margin: 0px auto;
      width: 95%;
      position: relative;
    }
        .SceneExampleBlock .Tab::before,
        .SceneExampleBlock .Tab::after {
          content: "";
          display: block;
          position: absolute;
          bottom: -8px;
          width: 105px;
          height: 90px;
          background: url(../img/common/decoration/shadow_h.png) no-repeat 50% 50%;
        }
        .SceneExampleBlock .Tab::before{
          background-position: 0% 50%;
          right: 100%;
        }
        .SceneExampleBlock .Tab::after{
          background-position: 100% 50%;
          left: 100%;
        }




    /* - - シーン選択用イラスト - - */
    .SceneSelector{
    }


    .SceneSelector .ImageItem{
      float: right;
      width: 65%;
      position: relative;
    }
    .SceneSelector .TextItem{
        }
        .SceneSelector .TextItem > .Heading{
          position: absolute;
          left: 0%;
          top: 50%;
          margin-top: -2em;
          width: 35%;
        }
        .SceneSelector .TextItem > .Heading .Sub{
          margin-top: 1em;
        }
        /* イラスト上のピン */
        .SceneSelector .CategoryList{
          display: none;  /* jsでクラス名が付加されるまでは隠しておく */
        }
        .SceneSelector .CategoryList.ul-level-1{
          display: block;
        }
            .SceneSelector .CategoryList .li-level-1{
              position: absolute;
              text-align: center;
              border-radius: 0.5em;
            }
                    /* 住宅工事系のピンの位置 */
                    
                        /* 建具など */
                        .SceneSelector .CategoryList #SceneHouse_Category01{
                          top:  42.5%;
                          left: 24.0%;
                        }
                        /* 石工事など */
                        .SceneSelector .CategoryList #SceneHouse_Category02{
                          top:  90.0%;
                          left: 22.5%;
                        }
                        /*  */
                        .SceneSelector .CategoryList #SceneHouse_Category03{
                          top:  42.0%;
                          left: 55.0%;
                        }
                        /* 防水・屋根とい */
                        .SceneSelector .CategoryList #SceneHouse_Category04{
                          top:  25.0%;
                          left: 72.5%;
                        }
                        /*  */
                        .SceneSelector .CategoryList #SceneHouse_Category05{
                          top:  47.5%;
                          left: 80.0%;
                        }
                        /*  */
                        .SceneSelector .CategoryList #SceneHouse_Category06{
                          top:  85%;
                          left: 76%;
                        }
                        /*  */
                        .SceneSelector .CategoryList #SceneHouse_Category07{
                          top:  100%;
                          left: 50.0%;
                        }
                    /* 「住宅以外の建築工事」のピンの位置 */
                        .SceneSelector .CategoryList #SceneBuilding_Category01{
                          top:  25.0%;
                          left: 75.0%;
                        }


                    /* 「土木・農林水産工事」のピンの位置 - - - - - - - -  */
                    
                        /* 築堤・護岸 */
                        .SceneSelector .CategoryList #SceneLand_Category01{
                          top:  40.0%;
                          left: 85.0%;
                        }
                        /* 道路改良 */
                        .SceneSelector .CategoryList #SceneLand_Category02{
                          top:  95.0%;
                          left: 57.5%;
                        }
                        /* 舗装 */
                        .SceneSelector .CategoryList #SceneLand_Category03{
                          top:  82.5%;
                          left: 42.5%;
                        }
                        /* 道路維持 */
                        .SceneSelector .CategoryList #SceneLand_Category04{
                          top:  30.0%;
                          left: 12.5%;
                        }
                        /* トンネル */
                        .SceneSelector .CategoryList #SceneLand_Category05{
                          top:  67.5%;
                          left: 27.5%;
                        }
                        /* 公園緑地基盤整備 */
                        .SceneSelector .CategoryList #SceneLand_Category06{
                          top:  70.0%;
                          left: 72.5%;
                        }
                        /* 公園緑地植栽 */
                        .SceneSelector .CategoryList #SceneLand_Category07{
                          top:  50.0%;
                          left: 45.0%;
                        }
                        /* 公園緑地施設整備 */
                        .SceneSelector .CategoryList #SceneLand_Category08{
                          top:  82.5%;
                          left: 87.5%;
                        }
                        /* 公園緑地自然育成 */
                        .SceneSelector .CategoryList #SceneLand_Category09{
                          top:  52.5%;
                          left: 65.0%;
                        }

            .SceneSelector .CategoryList a.Pin > .Label{
              display: block;
              text-align: center;
              vertical-align: middle;
              color: #fff;
              background: #000;
              border: 2px solid #fff;
              margin: -0.25em auto 0;
              padding: 0.25em 0;
              line-height: 1.25em;
              font-size:   112.5%;
              border-radius: 0.5em;
            }
                    /* hover */
                    .SceneSelector .CategoryList  a.Pin[href]:hover > .Label{
                      background: #335;
                    }

            .SceneSelector .CategoryList .Pin .Icon{
              color: #1450b4;
              background: none;
            }
            .SceneSelector .CategoryList .Pin .Icon svg{
              width:  4em;
              height: 4em;
              margin-top: -2em;
              fill: rgb(0,180,255);
              stroke-width: 6;
              stroke: #fff;
            }

            .SceneSelector .CategoryList .li-level-1{
            }
            .SceneSelector .CategoryList .ul-level-2{
              font-size: 75%;
              position: static;
              background: none;
              padding: 0;
              padding-top: 1em;
            }
            .SceneSelector .CategoryList .ul-level-2,
            .SceneSelector .CategoryList .li-level-2,
            .SceneSelector .CategoryList  .a-level-2{
              width: auto;
            }
            .SceneSelector .CategoryList  .a-level-2{
              padding: 0.375em 0;
              margin: 0 5px;
            }


            /* Active効果 */
            .SceneSelector .CategoryList .li-level-1{
              background: rgba(0,0,0,0);
              padding: 0px 0;
              margin-left: -5.5em;
              width: 11em;
              -webkit-transition: all .2s;
                      transition: all .2s;
              -webkit-transform-origin: 50% 0em;
                      transform-origin: 50% 0em;
              -webkit-transform: scale(.6875);
                      transform: scale(.6875);
            }
            .SceneSelector .CategoryList .li-level-1.Active{
              z-index: 500;
              padding: 10px;
              margin-left: -10em;
              margin-top:   -2em;
              width: 20em;
              background: rgba(20,80,180,0.875);
              -webkit-transform: scale(1);
                      transform: scale(1);
            }
                    /* リンクが無い場合の処理 */
                    .SceneSelector .CategoryList .li-level-1.Active a:not([href]).Pin        > .Label,
                    .SceneSelector .CategoryList .li-level-1.Active a:not([href]).Pin:hover  > .Label{
                      background: none;
                      border:     none;
                    }
                    /* wideバージョンの特殊処理 */
                    .SceneSelector .CategoryList .li-level-1.wide.Active{
                      padding: 10px;
                      margin-left: -15em;
                      width: 30em;
                    }
                    .SceneSelector .CategoryList .li-level-1.wide         .li-level-2{
                      float: left;
                      width: 50%;
                    }
                    
                    
                    
                    


            /* 不要な効果を上書き */
            .SceneSelector .CategoryList .Active .Pin{
              background: none;
            }
            .SceneSelector .CategoryList .Pin:hover .Icon{
              background: none;
            }








/* --------------------------------------------------- */
/* 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(230,230,230,0.875);
      background: #e6e6e6;
      background-image: linear-gradient( to bottom,  #e6e6e6, #eee );
      border-bottom: 4px solid #ccc;
      text-align: center;
      text-align: left;
      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;
          background-image: linear-gradient( to bottom, #fafafa, #e6e6e6, #e6e6e6 );
        }
        .ProductBlock.Search .CategoryList .Active .a-level-1{
          background-image: none;
        }
        .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 .BlockContents{
      padding: 0;
    }

    /* コンテンツ部分 */
    .ProductBlock.List .BlockContents{
      padding: 0;
    }
    
    /* SknTplThumbnailListを上書き */
    .ProductBlock.List .ThumbnailList{
      padding: 5px;
      background: rgba(0,0,0,0.1);
    }
        .ProductBlock.List .ThumbnailList > li{
          background: #fff;
        }
        .ProductBlock.List .ThumbnailList > li:nth-child(4n-2),
        .ProductBlock.List .ThumbnailList > li:nth-child(4n-1){
          background: #f7f7f7;
        }