@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);

body {
    font-family: 'Noto Sans JP', sans-serif;
}

/*===============================================
画面の横幅が769px以上（パソコン用）
===============================================*/
@media screen and (min-width: 769px){
  .body {
    width:1000px;
    margin: auto;
    background-color: #fff33b;
  }

  .logo {
    width:300px;
    margin: auto;
  }
  .logo img {
    width:300px;
    padding-top: 15px;
    padding-bottom: 10px;
    text-align: left;
  }

  .top {
    width:800px;
    margin: auto;
  }
  .top img {
    width:800px;
  }

  .thankyou_banner_pc {
    width:500px;
    margin: auto;
    margin-top: 20px;
  }
  .thankyou_banner_pc img {
    width:500px;
  }
  .thankyou_banner_pc img:hover {
  	opacity: 0.8 ;
  }
  .thankyou_banner_smp {
    display:none;
  }

  .thankyou_text {
    width:640px;
    margin: auto;
    margin-top: 10px;
    margin-bottom: 30px;
  }
  .thankyou_text p {
    width:650px;
  }

  .kikan {
    width: 800px;
    padding: 5px;
    margin: auto;
  }
  .kikan span {
    font-size: 30px;
    color: #fff;
    font-weight: normal;
  }
  .kikan img {
    width: 800px;
    height: 44px;
  }

  /*=====　目次の位置決め　======*/
  .absolute {
      position: absolute;
      left: 300px;
      top: 3px;
  }
  .relative {
      position: relative;
      width: 800px;
  }
  .absolute2 {
      position: absolute;
      left: 250px;
      top: 3px;
  }
  .relative2 {
      position: relative;
      width: 800px;
  }
  .absolute3 {
      position: absolute;
      left: 250px;
      top: 3px;
  }
  .relative3 {
      position: relative;
      width: 800px;
  }
  .absolute4 {
      position: absolute;
      left: 250px;
      top: 3px;
  }
  .relative4 {
      position: relative;
      width: 800px;
      margin-top: 50px;
  }
  .absolute5 {
      position: absolute;
      left: 250px;
      top: 3px;
  }
  .relative5 {
      position: relative;
      width: 800px;
      margin-top: 50px;
  }
  /*=====　目次の位置決め end ======*/

  .week {
    width:800px;
    margin: auto;
    padding-top: 10px;
    padding-bottom: 30px;
  }
  .week li{
    width:258px;
    display: inline-block;
  }
  .li_L {
    margin-right: 13px;
  }
  .li_C {
    margin-right: 13px;
  }
  .li_R {
  }
  .week img {
    width:258px;
  }

  .itemlist_img {
    width: 800px;
    margin: auto;
    padding-top: 10px;
    padding-bottom: 5px;
  }
  .itemlist_img_L {
    width: 393px;
    display: inline-block;
    margin-right: 14px;
  }
  .itemlist_img_R {
    width: 393px;
    display: inline-block;
  }
  .itemlist_img img{
    width: 393px;
  }

  .itemlist_text {
    width: 800px;
    margin: auto;
  }
  .itemlist_text_L {
    width: 370px;
    display: inline-block;
    margin-left: 12px;
    vertical-align:top;
  }
  .itemlist_text_L p{
    width: 370px;
  }
  .itemlist_text_R {
    width: 370px;
    display: inline-block;
    margin-left: 33px;
    vertical-align:top;
  }
  .itemlist_text_R p{
    width: 370px;
  }

  .itemname {
    font-size: 25px;
  }
  .itemdetail {
    font-size: 16px;
  }
  .itemprice {
  }

  .itemlist_others {
    width: 800px;
    margin: auto;
  }
  .itemlist_others img {
    width: 250px;
  }
  .itemlist_others_L {
    width: 400px;
    display: inline-block;
    text-align: right;
  }
  .itemlist_others_L img{
    padding-right: 10px;
  }
  .itemlist_others_R {
    width: 400px;
    display: inline-block;
    text-align: right;
  }

  .itemlist_price {
    width: 800px;
  }

  /*=====　価格の位置調整 start======*/
  .relative_text_L {
    position: relative;
  }
  .absolute_text_L {
    width:270px !important;
    position: absolute;
    bottom:0px;
    left:420px;
  }
  .relative_text_R {
    position: relative;
  }
  .absolute_text_R {
    width:270px !important;
    position: absolute;
    bottom:0px;
    left:415px;
  }
  /*=====　価格の位置調整 end======*/

  .banner_pc {
    width: 800px;
    margin: auto;
    padding-top: 10px;
  }
  .banner_pc li {
    width: 393px;
    display: inline-block;
  }
  .banner_L {
    margin-right: 14px;
    margin-top: 10px;
  }
  .banner_R {
    margin-top: 10px;
  }
  .banner_pc img{
    width: 393px;
  }

  .banner_smp {
    display: none;
  }

  .footer {
    width:800px;
    height: 70px;
    margin: auto;
    margin-top: 20px;
  }
  .footer li {
    display: inline-block;
  }
  .footer_p {
    margin-left: 20px;
    margin-right: 20px;
  }
  .footerlink {
    text-align: center;
  }
  .copyright {
    text-align: right;
    margin-top: 10px;
    margin-right: 15px;
  }

}

/*===============================================
画面の横幅が768pxまで（スマホ用、ipad含まない）
===============================================*/
@media screen and (max-width:768px){
  html {
    font-size: 62.5%;
  }

  .body {
    width:100%;
    background-color: #fff33b;
  }

  .logo {
    width: 50%;
    margin: auto;
  }
  .logo img{
    width: 100%;
    padding-top: 5%;
    padding-bottom: 4%;
  }

  .top {
    width: 96%;
    margin: auto;
  }
  .top img{
    width: 100%;
  }

  .thankyou_banner_smp {
    width:100%;
    text-align:center;
    margin-top: 2%;
  }
  .thankyou_banner_smp img {
    width:70%;
  }
  .thankyou_banner_pc {
    display: none;
  }

  .thankyou_text {
    width: 90%;
    margin: auto;
    padding-top: 1%;
    padding-bottom: 2%;
  }
  .thankyou_text p {
    font-size: 1.5em;
    margin: 1%;
  }

  .kikan {
    width: 100%;
    margin: auto;
  }
  .kikan span {
    font-size: 2.0em;
    color: #fff;
  }
  .kikan img {
    width: 100%;
  }

  /*=====　目次の位置決め　======*/
  .absolute {
    position: absolute;
    top: 41%;
    left: 50%;
    margin-right: -50%;
    -webkit-transform: translate(-50%, -50%); /* Safari用 */
    transform: translate(-50%, -50%);
  }
  .relative {
      position: relative;
      width:96%;
  }
  .absolute2 {
    position: absolute;
    top: 41%;
    left: 50%;
    margin-right: -50%;
    -webkit-transform: translate(-50%, -50%); /* Safari用 */
    transform: translate(-50%, -50%);
  }
  .relative2 {
      position: relative;
      width: 96%;
  }
  .absolute3 {
    position: absolute;
    top: 41%;
    left: 50%;
    margin-right: -50%;
    -webkit-transform: translate(-50%, -50%); /* Safari用 */
    transform: translate(-50%, -50%);
  }
  .relative3 {
      position: relative;
      width: 96%;
  }
  .absolute4 {
    position: absolute;
    top: 41%;
    left: 50%;
    margin-right: -50%;
    -webkit-transform: translate(-50%, -50%); /* Safari用 */
    transform: translate(-50%, -50%);
  }
  .relative4 {
    position: relative;
    width: 96%;
    margin-top: 3%;
  }
  .absolute5 {
    position: absolute;
    top: 41%;
    left: 50%;
    margin-right: -50%;
    -webkit-transform: translate(-50%, -50%); /* Safari用 */
    transform: translate(-50%, -50%);
  }
  .relative5 {
      position: relative;
      width: 96%;
      margin-top: 10px;
  }
  /*=====　目次の位置決め end ======*/

  .week {
    width:96%;
    margin: auto;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .week li {
    width:32%;
    display: inline-block;
  }
  .li_L {
    margin-right: 2%;
  }
  .li_C {
    margin-right: 2%;
  }
  .li_R {
  }
  .week img {
    width:100%;
  }

  .itemlist_img {
    width: 96%;
    margin: auto;
    padding-top: 8px;
  }
  .itemlist_img_L {
    width: 49%;
    display: inline-block;
    margin-right: 2%;
  }
  .itemlist_img_R {
    width: 49%;
    display: inline-block;
  }
  .itemlist_img img{
    width: 100%;
  }

  .itemlist_text {
    width: 96%;
    margin: auto;
  }
  .itemlist_text_L {
    width: 48%;
    display: inline-block;
    vertical-align:top;
  }
  .itemlist_text_L p{
    width: 100%;
    margin-left: 1%;
  }
  .itemlist_text_R {
    width: 48%;
    display: inline-block;
    vertical-align:top;
  }
  .itemlist_text_R p{
    width: 96%;
    margin-left: 9%;
  }
  .itemname {
    font-size: 1.1em;
  }
  .itemdetail{
    font-size: 0.8em;
  }

  .itemlist_price {
    width: 96%;
    margin: auto;
  }
  .itemprice {
    text-align:right;
  }

  .itemlist_others {
    width: 96%;
    margin: auto;
  }
  .itemlist_others_L {
    width: 50%;
    display: inline-block;
    text-align: right;
  }
  .itemlist_others_R {
    width: 50%;
    display: inline-block;
    text-align: right;
  }
  .itemlist_others img {
    width: 70%;
    margin-right: 5%;
  }

/*=====　目次の位置決め start ======*/
  .relative_text_L {
    position: relative;
  }
  .relative_text_R {
    position: relative;
  }
  .absolute_text_L {
    position: absolute;
    bottom:0%;
    right: 0%;
  }
  .absolute_text_R {
    position: absolute;
    bottom:0%;
    right: 0%;
  }
/*=====　目次の位置決め end ======*/

  .banner_smp {
    width: 96%;
    margin: auto;
    padding-top: 1%;
  }
  .banner_smp li{
    width: 49%;
    display: inline-block;
  }
  .banner_L {
    margin-right: 2%;
    margin-top: 1%;
  }
  .banner_R {
  }
  .banner_smp img{
    width:100%;
  }
  .banner_pc {
    display: none;
  }

  .footer {
    width:100%;
    height: 45px;
    margin-top: 5%;
  }
  .footer li {
    display: inline-block;
  }
  .footer_p {
    margin-left: 20px;
    margin-right: 20px;
  }
  .footerlink {
    text-align: center;
  }
  .copyright {
    text-align: center;
    margin-top: 2%;
  }

}