@charset "utf-8";

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ● トップページ専用CSS                                  */
/*    ・ページ固有の処理を記述                             */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* HeaderDivision
--------------------------------------------------- */
header,
header:hover{
  background: rgba(255,255,255,1);
}
header:hover{
  /*border-bottom: 1px solid rgba(20,80,180,1);*/
}

/* ContentsDivision
--------------------------------------------------- */
#ContentsDivision {
}
    /* - - ページ全体の背景 - - */
    .PageBgDecoration{
      background-image: linear-gradient( to bottom, rgba(255,255,255,0), rgba(255,255,255,0) ), url(../img/common/decoration/woman.jpg);
      background-repeat: no-repeat;
      background-position: 50% -150px;
    }



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

/* MainImageArea
--------------------------------------------------- */
.MainImageArea{
  margin: 0 auto;
  /*max-width: 1920px;*/
  /*background: #f5f5f5 url(../img/main_image/bg.jpg) no-repeat 50% 50%;*/
  /*background-size: cover;*/
  position: relative;
}


/* ProductSceneArea
--------------------------------------------------- */
.ProductSceneArea{
  padding: 5em 0;
}

/* NewProductArea
--------------------------------------------------- */
.NewProductArea{
  padding: 5em 0;
  background: #f5f5f5 url(../img/common/decoration/forest.jpg) 50% 50%;
  background-size: cover;
}
/* InformationArea
--------------------------------------------------- */
.InformationArea{
  padding: 5em 0;
  text-align: center;
}




/* --------------------------------------------------- */
/* MainImage                                           */
/* メイン画像用ブロック                                */
/* --------------------------------------------------- */

/* MainImageBlock
--------------------------------------------------- */
.MainImageBlock{
  position: relative;
  background:  url(../img/main_image/fr.png) no-repeat 65% 55%;
}
    /* - - 左側 - - */
    .MainImageBlock .BlockHeader{
      color: #1677cb;
      padding: 150px 0 0;
      min-height: 575px;
    }
    .MainImageBlock .BlockHeader .Heading{
      font-size: 300%;
      font-weight: 300;
      margin: 0 0 0.5em;
    }
    /* - - 右側 - - */
    .MainImageBlock .BlockContents{
      position: absolute;
      top: 0px;
      right: 0px;
      height: 100%;
      width: 27.5%;
      min-width: 350px;
      padding: 0 2.75%;
      color: #fff;
      background: #1677cb;
    }
    .MainImageBlock .BlockContents > .inner{
      position: relative;
    }
    .MainImageBlock .BlockContents > .inner::before{
      content: "";
      display: block;
      margin: 0 auto;
      padding: 20px 0;
      width: 80%;
      height: 175px;
      background: url(../img/common/decoration/fukui_shape.png) no-repeat 50% 100%;
      background-size: contain;
    }
    .MainImageBlock .BlockContents > .inner .Heading{
      margin: 0 0 1em;
    }
        /* - - TextButton のデフォ値を上書き - - */
        .MainImageBlock .BlockContents .Button{
          color: #fff;
          width: 80%;
          color: #fff;
          background: rgba(20,80,180,0);
          border: 2px solid;
        }
        /* hover */
        .MainImageBlock .BlockContents .Button:hover{
          background: rgba(20,80,180,0.25);
          border-color: #fff;
        }




/* --------------------------------------------------- */
/* LineUpBlock                                         */
/* 県産品ラインナップ 用ブロック（上書き）             */
/* --------------------------------------------------- */
.LineUpBlock{
  margin-top: 1px;
}
    /* 検索ボックス */
    .LineUpBlock .SearchBox{
      display: inline-block;
      margin: 0 2.5em;
    }
    .LineUpBlock .SearchBox .InputText{
      width: 15em;
    }
    
    /* 掲載申込ボックス */
    .LineUpBlock .RequestPublishBox{
      display: inline-block;
    }
    .LineUpBlock .RequestPublishBox .Button{
      background: #e93755;
    }
    .LineUpBlock .RequestPublishBox .Button:hover{
      background: #ef4a66;
    }


/* LineUpBlock カテゴリ一覧
--------------------------------------------------- */
.LineUpBlock.Category{
  position: relative;
}
    /* タイトル部分 */
    .LineUpBlock.Category .BlockHeader{
      color: #fff;
      background: rgba(0,0,0,0.8);
      padding: 1.5em 0;
      position: absolute;
      left: 0px;
      top:  0px;
      z-index: 100;
      width: 100%;
      -webkit-transition: background 1s;
              transition: background 1s;
    }
    .LineUpBlock.Category .BlockHeader:hover{
      background: rgba(0,0,0,1);
    }
    .LineUpBlock.Category .BlockHeader .Heading{
      font-size: 150%;
      font-weight: 400;
      vertical-align: middle;
      letter-spacing: 0.125em;
      display: inline-block;
      text-align: center;
      margin: 0;
    }
    
    /* コンテンツ部分 */
    .LineUpBlock.Category .Category .TextItem{
      padding: 2em 12.5%;
      color: #fff;
      background-color: #222;
      position: relative;
      z-index: 5;
    }
    .LineUpBlock.Category .Category01 .TextItem{
      background-color: #6f5624;
    }
    .LineUpBlock.Category .Category02 .TextItem{
      background-color: #1b5786;
    }
    .LineUpBlock.Category .Category03 .TextItem{
      background-color: #2a2d33;
    }
    .LineUpBlock.Category .ThumbnailList .TextItem .Heading{
      padding: 0.5rem 0;
      padding-right: 1.5em;
      border-bottom: 1px solid rgba(255,255,255,.1);
      margin: 0 0 0.5rem;
      font-size: 150%;
      line-height: 1.125;
      position: relative;
    }
    .LineUpBlock.Category .ThumbnailList .TextItem .Heading .Icon{
      font-size: 150%;
      right: 0;
    }
    .LineUpBlock.Category .ThumbnailList .TextItem .Heading .Icon::before{
      -webkit-transition: all .2s;
              transition: all .2s;
    }
    .LineUpBlock.Category .ThumbnailList .TextItem .DefaultText{
      height: 3.5em;
    }
        /* hover */
        .LineUpBlock.Category .ThumbnailList a       .TextItem {
      -webkit-transition: filter .2s;
              transition: filter .2s;
          filter: brightness(1);
        }
        .LineUpBlock.Category .ThumbnailList a:hover .TextItem {
          filter: brightness(1.2);
        }
        .LineUpBlock.Category .ThumbnailList a:hover .TextItem .Heading .Icon::before{
          right: -0.25em;
        }



    /* SknTplThumbnailListを上書き */
    .LineUpBlock.Category .SknTplThumbnailList .ThumbnailList > li > .inner,
    .LineUpBlock.Category .SknTplThumbnailList .ThumbnailList > li a{
      padding: 0;
    }
            .SknTplThumbnailList .ThumbnailList.Type2 > li .ImageItem,
            .SknTplThumbnailList .ThumbnailList.Type2 > li .ImageItem > p,
            .SknTplThumbnailList .ThumbnailList.Type2 > li .ImageItem .Image{
              display: block;
            }




/* --------------------------------------------------- */
/* SceneExampleBlock                                   */
/* シーン別活用事例 用ブロック                         */
/* --------------------------------------------------- */
.SceneExampleBlock{
}
    /* - - フッタ - - */
    .SceneExampleBlock .BlockFooter{
      padding-top: 1em;
    }


    /* - - ThumbnailList のデフォ値を上書き - - */
    .SceneExampleBlock .ThumbnailList.Type2 > li > .inner a{
      padding: 20px 30px;
    }
    .SceneExampleBlock .ThumbnailList.Type2 > li > .inner .TextItem{
      padding-bottom: 0;
    }
    .SceneExampleBlock .ThumbnailList.Type2 > li > .inner .TextItem .Title{
      font-size: 125%;
      font-weight: 400;
    }
    .SceneExampleBlock .ThumbnailList.Type2 > li > .inner .TextItem .DefaultText{
      min-height: 4.5em;
    }
    .SceneExampleBlock .ThumbnailList.Type2 > li > .inner .ReadMore{
      font-size: 87.5%;
    }



        /* - - TextButton のデフォ値を上書き - - */
        .SceneExampleBlock .SknTplTextButton {
          margin: 0 auto 0.5em;
        }
        .SceneExampleBlock .SknTplTextButton .Button {
          min-width: 45%;
          border-width: 2px;
        }
        /* hover */
        .SceneExampleBlock .SknTplTextButton .Button:hover {
          min-width: 47.5%;
          border-color: #444a59;
        }






/* --------------------------------------------------- */
/* ProductBlock                                        */
/* 製品紹介(新規掲載案内) 用ブロック                   */
/* --------------------------------------------------- */

/* ProductBlock（カテゴリー）
--------------------------------------------------- */
.ProductBlock.Category{
  color: #fff;
  background-color: #222;
  width: 270px;
  width: 25%;
  float: left;
  position: relative;
  z-index: 50;
}
    /* - - 見出し - - */
    .ProductBlock.Category .BlockHeader{
      padding: 2.5em 0 1.5em;
    }
    .ProductBlock.Category .BlockHeader .Heading{
      margin: 0;
    }
    .ProductBlock.Category .BlockHeader .Heading .Main{
      font-size: 150%;
      letter-spacing: 0.125em;
    }
    .ProductBlock.Category .BlockHeader .Heading .Sub{
      color: #e93737;
      
    }
    /* - - コンテンツ - - */
    .ProductBlock.Category .BlockContents{
      padding-bottom: 2.5em;
    }
        /* リスト */
        .ProductBlock.Category .BlockContents .CategoryList{
          list-style: none;
        }
        .ProductBlock.Category .BlockContents .CategoryList li{
          
        }
        .ProductBlock.Category .BlockContents .CategoryList li a{
          text-align: center;
          display: block;
          padding: 1em 0;
          position: relative;
        }
        .ProductBlock.Category .BlockContents .CategoryList li a::before{
          content: "";
          display: block;
          position: absolute;
          top: 0px;
          left: 40%;
          width: 20%;
          height: 1px;
          background: rgba(255,255,255,0.125);
        }
            /* hover */
            .ProductBlock.Category .BlockContents .CategoryList li a:hover{
              background: rgba(255,255,255,0.125);
            }
            
            
            /* current 装飾 */
            .ProductBlock.Category .BlockContents .CategoryList li a.current{
              background-color: #e93737;
            }
            .ProductBlock.Category .BlockContents .CategoryList li a.current::after{
              content: "";
              position: absolute;
              top: 50%;
              left: 100%;
              border-top: 0.75em solid transparent;
              border-left: 0.5em solid #e93737;
              border-bottom: 0.75em solid transparent;
              margin-top: -0.75em;
            }




/* ProductBlock（リスト本体）
--------------------------------------------------- */
.ProductBlock.List{
  margin:  0;
  padding: 0;
  width: 75%;
  float: right;
}
    /* - - コンテンツ - - */
    .ProductBlock.List .BlockContents{
      padding: 0;
      position: relative;
    }
        .ProductBlock.List .BlockContents .ThumbnailList li.NotFound{
          padding: 30px 0;
          
        }
    
    /* - - フッタ - - */
    .ProductBlock.List .BlockFooter{
      border: none;
      background: rgba(128,128,128,0.875);
    }
        /* ボタン部分を上書き */
        .ProductBlock.List .BlockFooter a.Button{
          border-width: 2px;
        }
        .ProductBlock.List .BlockFooter a.Button:hover{
          padding: 0.875em 2.5em;
          border-color: inherit;
        }
    
    /* SknTplThumbnailListを上書き */
    .ProductBlock.List .ThumbnailList{
      list-style: none;
    }
        .ProductBlock.List .ThumbnailList > li:nth-child(odd){
          background: #f7f7f7;
        }
        .ProductBlock.List .ThumbnailList > li:nth-child(even){
          background: #fff;
        }
        .ProductBlock.List .ThumbnailList > li a{
          padding: 20px 75px;
        }






/* --------------------------------------------------- */
/* InformationBlock                                    */
/* インフォメーション 用ブロック                       */
/* --------------------------------------------------- */
.InformationBlock{

}
    /* - - ヘッダ - - */
    .InformationBlock .BlockHeader{
      
    }
    .InformationBlock .BlockHeader .Heading .Main{
      font-size: 175%;
      letter-spacing: 0.1875em;
    }

    /* - - フッタ - - */
    .InformationBlock .BlockFooter{
    }
        .InformationBlock .BlockFooter a{
          color: rgba(20,120,200,1);
        }