@charset "UTF-8";
/* グラデーション共通
   ============================================ */
.wrap-gradient,
.wrap-gradient-free,
.wrap-gradient-free-yamapoint,
.wrap-gradient-free-yamaview,
.wrap-gradient-free-camppoint,
.wrap-gradient-free-kamnpoint,
.wrap-gradient-free-kankopoint,
.wrap-gradient-free-umipoint,
.wrap-gradient-free-umi,
.wrap-gradient-free-bosai,
.wrap-gradient-free-hoshi,
.wrap-gradient-sakura,
.wrap-gradient-free-yama,
.wrap-gradient-camp {
  position: relative; }
  .wrap-gradient:before,
  .wrap-gradient-free:before,
  .wrap-gradient-free-yamapoint:before,
  .wrap-gradient-free-camppoint:before,
  .wrap-gradient-free-yamaview:before,
  .wrap-gradient-free-kamnpoint:before,
  .wrap-gradient-free-kankopoint:before,
  .wrap-gradient-free-umipoint:before,
  .wrap-gradient-free-umi:before,
  .wrap-gradient-free-bosai:before,
  .wrap-gradient-free-hoshi:before,
  .wrap-gradient-sakura:before,
  .wrap-gradient-free-yama:before,
  .wrap-gradient-free-camp:before {
    /*beforeでグラデーションを表示*/
    display: block;
    position: absolute;
    bottom: -1px;
    left: -1%;
    content: "";
    width: 102%;
    z-index: 1; }

/* ①通常パターン（SP→水色 PC→水色）
   ============================================ */
.wrap-gradient:before {
  /*グラデーションで隠す範囲*/
  height: 240px;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(159, 225, 255, 0)), color-stop(20%, rgba(159, 225, 255, 0.9)), color-stop(45%, rgba(159, 225, 255, 0.9)), color-stop(100%, #9FE1FF));
  background: -ms-linear-gradient(top, rgba(159, 225, 255, 0) 0%, rgba(159, 225, 255, 0.9) 20%, rgba(159, 225, 255, 0.9) 45%, #9FE1FF 100%);
  background: linear-gradient(top, rgba(159, 225, 255, 0) 0%, rgba(159, 225, 255, 0.9) 20%, rgba(159, 225, 255, 0.9) 45%, #9FE1FF 100%); }

/* ②ポイント天気パターン（SP→水色 PC→白）
   ============================================ */
.wrap-gradient-free:before {
  /*グラデーションで隠す範囲*/
  height: 240px;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(20%, rgba(255, 255, 255, 0.9)), color-stop(45%, rgba(255, 255, 255, 0.9)), color-stop(100%, #fff));
  background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 20%, rgba(255, 255, 255, 0.9) 45%, #fff 100%);
  background: linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 20%, rgba(255, 255, 255, 0.9) 45%, #fff 100%); }

/* ②-2 山ポイント天気パターン（SP→山の緑色 PC→白）
   ============================================ */
.wrap-gradient-free-yamapoint:before {
  /*グラデーションで隠す範囲*/
  height: 240px;
  height: 240px;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(20%, rgba(255, 255, 255, 0.9)), color-stop(45%, rgba(255, 255, 255, 0.9)), color-stop(100%, #fff));
  background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 20%, rgba(255, 255, 255, 0.9) 45%, #fff 100%);
  background: linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 20%, rgba(255, 255, 255, 0.9) 45%, #fff 100%); }

/* ②-2 キャンプポイント天気パターン（SP→地面の茶色 PC→白）
   ============================================ */
.wrap-gradient-free-camppoint:before {
  /*グラデーションで隠す範囲*/
  height: 240px;
  height: 240px;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(20%, rgba(255, 255, 255, 0.9)), color-stop(45%, rgba(255, 255, 255, 0.9)), color-stop(100%, #fff));
  background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 20%, rgba(255, 255, 255, 0.9) 45%, #fff 100%);
  background: linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 20%, rgba(255, 255, 255, 0.9) 45%, #fff 100%); }

  /* ②-2 見晴らし天気パターン（SP→山の緑色 PC→白）
   ============================================ */
.wrap-gradient-free-yamaview:before {
  /*グラデーションで隠す範囲*/
  height: 240px;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(110, 179, 46, 0)), color-stop(20%, rgba(110, 179, 46, 0.8)), color-stop(45%, rgba(110, 179, 46, 0.9)), color-stop(90%, #6eb32e));
  background: -ms-linear-gradient(top, rgba(110, 179, 46, 0) 0%, rgba(110, 179, 46, 0.8) 20%, rgba(110, 179, 46, 0.9) 45%, #6eb32e 90%);
  background: linear-gradient(top, rgba(110, 179, 46, 0) 0%, rgba(110, 179, 46, 0.8) 20%, rgba(110, 179, 46, 0.9) 45%, #6eb32e 90%); }

/*⑧発雷確率パターン（SP→白 PC→白）
   ============================================ */
   .wrap-gradient-free-kamnpoint:before {
  /*グラデーションで隠す範囲*/
  height: 240px;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(20%, rgba(255, 255, 255, 0.9)), color-stop(45%, rgba(255, 255, 255, 0.9)), color-stop(100%, #fff));
  background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 20%, rgba(255, 255, 255, 0.9) 45%, #fff 100%);
  background: linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 20%, rgba(255, 255, 255, 0.9) 45%, #fff 100%); }

/* ②-3 行楽ポイント天気パターン（SP→行楽の緑色 PC→白）
   ============================================ */
.wrap-gradient-free-kankopoint:before {
  /*グラデーションで隠す範囲*/
  height: 240px;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(20%, rgba(255, 255, 255, 0.9)), color-stop(45%, rgba(255, 255, 255, 0.9)), color-stop(100%, #fff));
  background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 20%, rgba(255, 255, 255, 0.9) 45%, #fff 100%);
  background: linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 20%, rgba(255, 255, 255, 0.9) 45%, #fff 100%); }

/* ②-4 海ポイント天気パターン（SP→青 PC→白）
   ============================================ */
.wrap-gradient-free-umipoint:before {
  /*グラデーションで隠す範囲*/
  height: 240px;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(20%, rgba(255, 255, 255, 0.9)), color-stop(45%, rgba(255, 255, 255, 0.9)), color-stop(100%, #fff));
  background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 20%, rgba(255, 255, 255, 0.9) 45%, #fff 100%);
  background: linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 20%, rgba(255, 255, 255, 0.9) 45%, #fff 100%); }

/* ③海パターン（SP→青 PC→青）
   ============================================ */
.wrap-gradient-free-umi:before {
  /*グラデーションで隠す範囲*/
  height: 240px;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(24, 120, 207, 0)), color-stop(20%, rgba(24, 120, 207, 0.8)), color-stop(45%, rgba(24, 120, 207, 0.9)), color-stop(90%, #1878cf));
  background: -ms-linear-gradient(top, rgba(24, 120, 207, 0) 0%, rgba(24, 120, 207, 0.8) 20%, rgba(24, 120, 207, 0.9) 45%, #1878cf 90%);
  background: linear-gradient(top, rgba(24, 120, 207, 0) 0%, rgba(24, 120, 207, 0.8) 20%, rgba(24, 120, 207, 0.9) 45%, #1878cf 90%); }

/* ④防災パターン（SP→くすんだ水色 PC→くすんだ水色）
   ============================================ */
.wrap-gradient-free-bosai:before {
  /*グラデーションで隠す範囲*/
  height: 240px;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(189, 225, 241, 0)), color-stop(20%, rgba(189, 225, 241, 0.8)), color-stop(45%, rgba(189, 225, 241, 0.9)), color-stop(90%, #bde1f1));
  background: -ms-linear-gradient(top, rgba(189, 225, 241, 0) 0%, rgba(189, 225, 241, 0.8) 20%, rgba(189, 225, 241, 0.9) 45%, #bde1f1 90%);
  background: linear-gradient(top, rgba(189, 225, 241, 0) 0%, rgba(189, 225, 241, 0.8) 20%, rgba(189, 225, 241, 0.9) 45%, #bde1f1 90%); }

/* ⑤星パターン（SP→濃い青 PC→濃い青）
   ============================================ */
.wrap-gradient-free-hoshi:before {
  /*グラデーションで隠す範囲*/
  height: 240px;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(14, 35, 105, 0)), color-stop(20%, rgba(14, 35, 105, 0.8)), color-stop(45%, rgba(14, 35, 105, 0.9)), color-stop(90%, #0e2369));
  background: -ms-linear-gradient(top, rgba(14, 35, 105, 0) 0%, rgba(14, 35, 105, 0.8) 20%, rgba(14, 35, 105, 0.9) 45%, #0e2369 90%);
  background: linear-gradient(top, rgba(14, 35, 105, 0) 0%, rgba(14, 35, 105, 0.8) 20%, rgba(14, 35, 105, 0.9) 45%, #0e2369 90%); }

/* ⑥山パターン（SP→黄緑 PC→黄緑）
   ============================================ */
.wrap-gradient-free-yama:before {
  /*グラデーションで隠す範囲*/
  height: 240px;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(110, 179, 46, 0)), color-stop(20%, rgba(110, 179, 46, 0.8)), color-stop(45%, rgba(110, 179, 46, 0.9)), color-stop(90%, #6eb32e));
  background: -ms-linear-gradient(top, rgba(110, 179, 46, 0) 0%, rgba(110, 179, 46, 0.8) 20%, rgba(110, 179, 46, 0.9) 45%, #6eb32e 90%);
  background: linear-gradient(top, rgba(110, 179, 46, 0) 0%, rgba(110, 179, 46, 0.8) 20%, rgba(110, 179, 46, 0.9) 45%, #6eb32e 90%); }

/* ⑦桜ナビパターン（SP→薄黄色 PC→薄黄色）
   ============================================ */
.wrap-gradient-sakura:before {
  /*グラデーションで隠す範囲*/
  height: 180px;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(249, 239, 184, 0)), color-stop(20%, rgba(249, 239, 184, 0.8)), color-stop(45%, rgba(249, 239, 184, 0.9)), color-stop(90%, #f9efb8));
  background: -ms-linear-gradient(top, rgba(249, 239, 184, 0) 0%, rgba(249, 239, 184, 0.8) 20%, rgba(249, 239, 184, 0.9) 45%, #6eb32e 90%);
  background: linear-gradient(top, rgba(249, 239, 184, 0) 0%, rgba(249, 239, 184, 0.8) 20%, rgba(249, 239, 184, 0.9) 45%, #6eb32e 90%);
}
/* ⑧キャンプパターン（SP→茶 PC→茶）
   ============================================ */
   .wrap-gradient-free-camp:before {
  /*グラデーションで隠す範囲*/
  height: 200px;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(197, 122, 41, 0)), color-stop(20%, rgba(197, 122, 41, 0.9)), color-stop(45%, rgba(197, 122, 41, 0.9)), color-stop(100%, #c57a29));
  background: -ms-linear-gradient(top, rgba(197, 122, 41, 0) 0%, rgba(197, 122, 41, 0.9) 20%, rgba(197, 122, 41, 0.9) 45%, #c57a29 100%);
  background: linear-gradient(top, rgba(197, 122, 41, 0) 0%, rgba(197, 122, 41, 0.9) 20%, rgba(197, 122, 41, 0.9) 45%, #c57a29 100%); }


/* PC用
     ============================================ */
@media screen and (min-width: 751px) {
  /*①通常パターン */
  .wrap-gradient:before {
    height: 140px; }
  /*②ポイント天気パターン */
  .wrap-gradient-free:before {
    height: 140px;
    /*グラデーションで隠す範囲*/
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(159, 225, 255, 0)), color-stop(20%, rgba(159, 225, 255, 0.9)), color-stop(45%, rgba(159, 225, 255, 0.9)), color-stop(100%, #9FE1FF));
    background: -ms-linear-gradient(top, rgba(159, 225, 255, 0) 0%, rgba(159, 225, 255, 0.9) 20%, rgba(159, 225, 255, 0.9) 45%, #9FE1FF 100%);
    background: linear-gradient(top, rgba(159, 225, 255, 0) 0%, rgba(159, 225, 255, 0.9) 20%, rgba(159, 225, 255, 0.9) 45%, #9FE1FF 100%); }
  /*②-2 山ポイント天気パターン */
  .wrap-gradient-free-yamapoint:before {
    height: 140px;
    /*グラデーションで隠す範囲*/
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(109, 179, 46, 0)), color-stop(20%, rgba(109, 179, 46, 0.9)), color-stop(45%, rgba(109, 179, 46, 0.9)), color-stop(100%, #6db32e));
    background: -ms-linear-gradient(top, rgba(109, 179, 46, 0) 0%, rgba(109, 179, 46, 0.9) 20%, rgba(109, 179, 46, 0.9) 45%, #6db32e 100%);
    background: linear-gradient(top, rgba(109, 179, 46, 0) 0%, rgba(109, 179, 46, 0.9) 20%, rgba(109, 179, 46, 0.9) 45%, #6db32e 100%); }
    /*②-2 キャンプポイント天気パターン */
  .wrap-gradient-free-camppoint:before {
    height: 140px;
    /*グラデーションで隠す範囲*/
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(109, 179, 46, 0)), color-stop(20%, rgb(197, 122, 41)), color-stop(45%, rgb(197, 122, 41)), color-stop(100%, #c57a29));
    background: -ms-linear-gradient(top, rgba(109, 179, 46, 0) 0%, rgb(197, 122, 41) 20%, rgb(197, 122, 41) 45%, #c57a29 100%);
    background: linear-gradient(top, rgba(109, 179, 46, 0) 0%, rgb(197, 122, 41) 20%, rgb(197, 122, 41) 45%, #c57a29 100%); }  
      /*②-2 山ポイント天気パターン */
  .wrap-gradient-free-yamaview:before {
    height: 140px;
    /*グラデーションで隠す範囲*/
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(109, 179, 46, 0)), color-stop(20%, rgba(109, 179, 46, 0.9)), color-stop(45%, rgba(109, 179, 46, 0.9)), color-stop(100%, #6db32e));
    background: -ms-linear-gradient(top, rgba(109, 179, 46, 0) 0%, rgba(109, 179, 46, 0.9) 20%, rgba(109, 179, 46, 0.9) 45%, #6db32e 100%);
    background: linear-gradient(top, rgba(109, 179, 46, 0) 0%, rgba(109, 179, 46, 0.9) 20%, rgba(109, 179, 46, 0.9) 45%, #6db32e 100%); }
  /*⑧発雷確率パターン（SP→白 PC→白）
  ============================================ */
  .wrap-gradient-free-kamnpoint:before {
    /*グラデーションで隠す範囲*/
    height: 140px;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(20%, rgba(255, 255, 255, 0.9)), color-stop(45%, rgba(255, 255, 255, 0.9)), color-stop(100%, #fff));
    background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 20%, rgba(255, 255, 255, 0.9) 45%, #fff 100%);
    background: linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 20%, rgba(255, 255, 255, 0.9) 45%, #fff 100%); }

  /*②-3 行楽ポイント天気パターン */
  .wrap-gradient-free-kankopoint:before {
    height: 140px;
    /*グラデーションで隠す範囲*/
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(127, 207, 89, 0)), color-stop(20%, rgba(127, 207, 89, 0.9)), color-stop(45%, rgba(127, 207, 89, 0.9)), color-stop(100%, #7fcf59));
    background: -ms-linear-gradient(top, rgba(127, 207, 89, 0) 0%, rgba(127, 207, 89, 0.9) 20%, rgba(127, 207, 89, 0.9) 45%, #7fcf59 100%);
    background: linear-gradient(top, rgba(127, 207, 89, 0) 0%, rgba(127, 207, 89, 0.9) 20%, rgba(127, 207, 89, 0.9) 45%, #7fcf59 100%); }
  /*②-4 海ポイント天気パターン */
  .wrap-gradient-free-umipoint:before {
    height: 140px;
    /*グラデーションで隠す範囲*/
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(24, 120, 207, 0)), color-stop(20%, rgba(24, 120, 207, 0.9)), color-stop(45%, rgba(24, 120, 207, 0.9)), color-stop(100%, #1878cf));
    background: -ms-linear-gradient(top, rgba(24, 120, 207, 0) 0%, rgba(24, 120, 207, 0.9) 20%, rgba(24, 120, 207, 0.9) 45%, #1878cf 100%);
    background: linear-gradient(top, rgba(24, 120, 207, 0) 0%, rgba(24, 120, 207, 0.9) 20%, rgba(24, 120, 207, 0.9) 45%, #1878cf 100%); }

  /*③海パターン */
  .wrap-gradient-free-umi:before {
    height: 140px; }
  /*④防災パターン */
  .wrap-gradient-free-bosai:before {
    height: 140px; }
  /*⑤星パターン */
  .wrap-gradient-free-hoshi:before {
    height: 140px; }
  /*⑥山パターン */
  .wrap-gradient-free-yama:before {
    height: 140px; }
  /*⑦桜パターン */
  .wrap-gradient-sakura:before {
    height: 100px; }
  /*⑧キャンプパターン */
  .wrap-gradient-free-camp:before {
    height: 140px; }
}