@charset "utf-8";
/*------------------------------------------------------------------*/
/*     トップページ用CSS                                            */
/*------------------------------------------------------------------*/

/* 包括
-------------------------------------------------- */
#rootWrap {
  padding:0;
}
  #parentWrap {
    width:950px;
    margin: 0 auto;
    background: #fff;
  }

/* ヘッダ領域
-------------------------------------------------- */
#headerField {
  width: 100%;
  height: 540px;
  margin: 0 auto;
  text-align: center;
}

/* YouTube、第二階層リンク領域
-------------------------------------------------- */
#otherContField {
  width: 100%;
  margin: 0 auto 25px auto;
  text-align: center;
  background:url("../images/bg_mainvisual.png") no-repeat center top;
}

  #youtubeArea {
    width: 473px;
    padding: 30px 58px 0 0;
    float: right;
  }

  #secContArea {
    width: 362px;
    float: left;
    padding: 70px 0 0 46px;
  }
    #secContArea li {
    }
      #secContArea a {
        display:block;
      }
        #secContArea a img {
        }

      #secContArea a:hover img {
        background: #fff;
        opacity: 0.7;
        filter: alpha(opacity=70);
        -ms-filter: "alpha(opacity=70)";
      }

/* SNSシェア領域
-------------------------------------------------- */
#snsShareField {
  width: 833px;
  margin: 0 auto 30px 59px;
}
  #snsShareField dt {
    width: 336px;
    text-align: left;
    float:left;
  }
  #snsShareField dd {
    width: 440px;
    text-align: center;
    float:right;
  }
    #snsShareField dd h2 {
      margin: 0 auto 10px;
    }
      #snsShareField dd h2 span {
        font-weight:bold;
        color: #e95371;
      }
    #snsShareField dd ul {
      margin: 0 auto;
    }
      #snsShareField dd ul li {
        width: 110px;
        float:left;
      }




/* トップページナビ領域
-------------------------------------------------- */
#topNaviField {
  width: 100%;
  margin: 0 auto 26px auto;
  text-align: center;
}

  #topNaviField ul {
    width: 100%;
    height: 82px;
    margin: 0 auto;
  }

    #topNaviField ul li {
      width: auto;
      text-align: center;
      float: left;
    }

      #topNaviField ul li a:hover img {
        background: #fff;
        opacity: 0.7;
        filter: alpha(opacity=70);
        -ms-filter: "alpha(opacity=70)";
      }





/* コンテンツ領域
-------------------------------------------------- */
#contentsField {
  width: 100%;
  text-align: center;
}


  #contentsField .sectionArea {
    width: 100%;
  }

    #contentsField .sectionArea h2 {
      width: 100%;
      margin: 0 auto;
      position: relative;
    }
    
    /* 食べきりげんまんプロジェクトって何？ */
    #section01Area {
      margin: 0 0 23px;
      min-height: 300px;
      background: url("../images/title_bg_sec01.png") no-repeat 0 0;
    }
      #section01Area h2 {
        height: 300px;
      }
        #section01Area h2 img.title {
          position: absolute;
          top: 32px;
          left: 61px;
        }
        #section01Area h2 a {
          position: absolute;
          top: 184px;
          left: 61px;
        }

    /* 日本の食品廃棄の驚くべき現状とは？ */
    #section02Area {
      margin: 0 0 10px;
      min-height: 380px;
      background: url("../images/title_bg_sec02.png") no-repeat 0 0;
    }
      #section02Area h2 {
        height: 337px;
      }
        #section02Area h2 img.title {
          position: absolute;
          top: 10px;
          left: 370px;
        }

    /* 日本の食品廃棄の驚くべき現状とは？ */
    #section03Area {
      margin: 0 0 23px;
      min-height: 550px;
      background: url("../images/title_bg_sec03.png") no-repeat 0 0;
    }
      #section03Area h2 {
        height: 200px;
      }
        #section03Area h2 img.title {
          position: absolute;
          top: 75px;
          left: 330px;
        }



    #contentsField .sectionArea .textBase {
      width: 840px;
      margin: 0 auto;
      text-align: left;
    }

      #contentsField .sectionArea .textBase p,
      #contentsField .sectionArea .textBase span,
      #contentsField .sectionArea .textBase small {
        line-height: 1.8em;
      }

        #contentsField .sectionArea .textBase span { font-weight: bold; }

          #section01Area .textBase span { color: #e95371; }
          #section02Area .textBase span { color: #90c31f; }
          #section03Area .textBase span { color: #f18d00; }

        #contentsField .sectionArea .textBase small {
          color: #aaa;
          font-size: 0.9em;
        }

      #section02Area h3 img {
       margin: 0 0 10px 0;
      }

      #section02Area #dataImgBox {
        margin: 30px 0 10px 0;
      }


      #section03Area h3 {
        margin: 30px 0 10px 0;
      }

      #section03Area ul {
        margin: 0 0 0 20px;
      }

      #section03Area ul li {
        margin: 0 0 5px 0;
        padding: 0 0 0 20px;
        line-height: 1.8em;
        background: url("../images/icon_circle_orange.png") no-repeat 0 4px;
      }


  #contentsField #section04Area.sectionArea {
    width: 840px;
    margin: 0 auto 0 auto;
    padding: 0 0 10px 0;
    background: url("../images/line_purple_bottom.png") no-repeat center bottom;
  }

    #contentsField #section04Area.sectionArea h2 {
      width: 840px;
      height: 20px;
      margin: 0 auto 20px auto;
    }

      #contentsField #section04Area.sectionArea h2 img {
        top: 0;
        left: 0;
      }

    #contentsField #section04Area.sectionArea dl {
      width: 840px;
      margin: 0 0 0 15px;
    }

      #contentsField #section04Area.sectionArea dl dt,
      #contentsField #section04Area.sectionArea dl dd {
        text-align: left;
        line-height: 1.4em;
      }

        #contentsField #section04Area.sectionArea dl dt {
          padding: 0 0 0 13px;
          background: url("../images/icon_circle_purple.png") no-repeat 0 4px;
        }

        #contentsField #section04Area.sectionArea dl dd {
          margin: 0 0 15px 0;
        }

          #contentsField #section04Area.sectionArea dl dd a {
            margin: 0 0 0 15px;
            padding: 0 18px 0 0;
            background: url("../images/icon_outside.png") no-repeat right 3px;
          }


/* PC
--------------------------------------------
-------------------------------------------- */
@media screen and (min-width: 769px) {
  #snsShareField ul {
    width: 440px;
  }
  #snsShareField ul .col05 {}
}

/* SmartPhone
--------------------------------------------
-------------------------------------------- */
@media screen and (max-width: 768px) {
  #snsShareField ul {
    width: 440px;
  }
  #snsShareField ul .col05 {}
}