@charset "UTF-8";

/*
28px : 1.75rem
24px : 1.5rem
20px : 1.25rem
18px : 1.125rem
16px : 1rem
14px : 0.875rem
12px : 0.75rem
11px : 0.6875rem
10px : 0.625rem
*/


article.page{ padding: 20px; min-height: calc(100vh - 120px - 113px); }

article .color-orange{ color: #e79b2e; }
article .color-pink{ color: #db71a1; }
article .color-red{ color: #dc704c; }

article .article-header.entry-header { background-image: url(../img/gentei/hd_bg.png); background-repeat: repeat; }
article .article-header.entry-header .page-title.entry-title{ max-width: 500px; margin-left: auto; margin-right: auto; }
article .article-header.entry-header .color-red{ display: block; font-size: 3rem; }
#main .article header{ padding:20px 40px; margin-top: 5px; }

.gentei-inner{ padding: 20px 20px; border: solid 5px #dfebf2; }
.entry-content p{ margin-bottom: 0px; }
.entry-content p + p{ margin-top: 1.6em; }

.article-footerfull{ display: none; }
#content #inner-content.page-full{ padding-bottom: 0px; }

.h_boader .entry-content .gentei-inner h2{ padding: 0px; margin: 0px; border: none; padding-bottom: 15px; }
.h_boader .entry-content .gentei-inner h2:before,
.h_boader .entry-content .gentei-inner h2:after{ display: none; }

.main-visual{ margin-left: -20px; margin-right: -20px; width: calc(100%  + 40px); margin-bottom: 20px; }

.entry-content p.name-text{ font-size: 14px; }
.entry-content p.price-text{ margin-top: 1em; margin-bottom: 1.5em; }

.h_boader .entry-content .gentei-inner h3{ padding: 0px; padding-bottom: 5px; border-bottom: solid 2px #dfebf2; }
.h_boader .entry-content .gentei-inner h3:before{ display: none; }
.h_boader .entry-content .gentei-inner h3:after{ display: none; }

.price{ font-size: 26px; font-weight: bold; }
.price small{ font-size: 15px; }

.row{ display: flex; flex-wrap:wrap; width: 100%; margin-bottom: 80px; }
.row .col{ width: calc((100% - 34px * 4) / 4); margin-left: 17px; margin-right: 17px; text-align: center; }
.row .col figure{ border: solid 1px #eee; padding: 20px; margin-bottom: 10px; }
.row .col img{ max-width: 100%; margin: 0px; margin-left: auto; margin-right: auto; }


.off_par_code{ border: solid 4px #388e3c; padding: 20px 30px; margin-left: auto; margin-right: auto; margin-bottom: 40px; max-width: 750px; }
.off_par_code p{ text-align: center; font-weight: bold; color: #388e3c; font-size: 18px; line-height: 1.6em; }

.off_par_code .f24{ font-size: 24px; }

.cupon_code{ background-color:#e79b2e; padding: 20px 30px; margin-left: auto; margin-right: auto; margin-bottom: 40px; max-width: 750px; }
.cupon_code p{ text-align: center; font-weight: bold; color: #fff; font-size: 24px; line-height: 1.6em; }
.cupon_code p .f20{ display: inline-block; font-size: 20px; }
.cupon_code p small{ font-size: 14px; font-weight: normal; }
.entry-content .cupon_code p + p{ margin-top: 0px; }


.btns{ max-width: 500px; margin-left: auto; margin-right: auto; padding-bottom: 100px; }
.btns .btn{ padding:25px 30px; text-decoration: none; display: block; text-align: center; font-weight: bold; color: #fff; font-size: 24px; line-height: 1.6em; background-color:#388e3c; border-radius: 100px; }

.btns .btn:hover{ opacity: .7; }

.btns.mt10{ margin-top: 60px; padding-bottom: 80px; }

.org_code{ background-color:#dfebf2; padding: 20px 30px; margin-left: auto; margin-right: auto; margin-bottom: 40px; max-width: 750px; }
.org_code p{ text-align: center; font-weight: bold; color: #339AD6; font-size: 18px; line-height: 1.6em; }

.marker{ background: linear-gradient(transparent 30%, #D7F5D9 30%); }

@media only screen and (max-width: 1024px){
  #breadcrumb{ margin-top: 20px; }
  #content #inner-content.page-full{ width: auto; margin-left: 20px; margin-right: 20px; }
  .row .col img{ width: 100%; }
}

@media only screen and (max-width: 768px){
  #breadcrumb{ margin-top: 0px; margin-bottom: 0px; }
  #content #inner-content.page-full{ margin-left: auto; margin-right: auto; }
  .page-full.wide #main{ margin-top: 0px; }
  article.page{ padding: 0px; }
  #main .article header{ margin-top: 0px; }
  #content #inner-content.page-full{ padding-bottom: 15px; }
  #main .article header{ margin-bottom: 1em; }

  .entry-content{ padding-bottom: 0px; }
}

@media only screen and (max-width: 560px){

  article.page{ padding: 0px; }
  #main .article header{ padding:10px 10px; margin-bottom: 0.5em; margin-top: 0px; }
  article .article-header.entry-header .page-title.entry-title{ margin-bottom: 0px; }

  .gentei-inner{ padding: 10px; }
  .gentei-inner p br{ display: none; }
  .h_boader .entry-content .gentei-inner h2{ font-size: 1.0rem; padding-bottom: 10px; }
  .main-visual{ margin-left: -10px; margin-right: -10px; width: calc(100% + 20px); margin-bottom: 10px; }
  .entry-content .main-visual img{ margin: 0 0 0.5em 0; }

  .row{ margin-bottom: 40px; margin-left: 0px; margin-right: 0px; width: calc(100% + 0px); }
  .row .col{ width: calc((100% - 10px * 2) / 2); margin-left: 5px; margin-right: 5px; text-align: center; }
  .row .col figure{ padding: 10px; }
  .row .col figure img{ max-width: 100%; margin: 0 0 0.0em 0; }

  .entry-content .row .col p{ font-size: 0.75rem; }
  .entry-content .row .col p .price{ font-size: 16px; }

  .entry-content p.price-text{ margin-top: 0.5em; margin-bottom: 0.75em; }

  .price small{ font-size: 12px; }

  .off_par_code{ border: solid 2px #388e3c; padding: 10px 10px; margin-left: auto; margin-right: auto; margin-bottom: 20px; max-width: 750px; }
  .off_par_code p{ text-align: center; font-weight: bold; color: #388e3c; font-size: 14px; line-height: 1.6em; }
  .off_par_code p .block{ display: block; }

  .cupon_code{ background-color:#e79b2e; padding: 10px 10px; margin-left: auto; margin-right: auto; margin-bottom: 20px; max-width: 750px; }
  .cupon_code p{ text-align: center; font-weight: bold; color: #fff; font-size: 20px; line-height: 1.6em; }
  .cupon_code p .f20{ display: inline-block; font-size: 16px; }
  .cupon_code p .block{ display: block; }
  .entry-content .off_par_code p + p{ margin-top: 15px; margin-bottom: 15px; }
  .off_par_code .f24{ font-size: 20px; line-height: 1.6em; }
  .cupon_code p small{ display: inline-block; line-height: 1.4em; font-size: 10px; font-weight: normal; }

  .btns{ max-width: 500px; margin-left: auto; margin-right: auto; padding-bottom: 20px; }
  .btns .btn{ padding:15px 15px; text-decoration: none; display: block; text-align: center; font-weight: bold; color: #fff; font-size: 16px; line-height: 1.6em; background-color:#388e3c; border-radius: 100px; }

  .btns.mt10{ margin-top: 20px; padding-bottom: 10px; }

  .h_boader .entry-content .gentei-inner h3{ font-size: 14px; padding: 0px; padding-bottom: 5px; border-bottom: solid 2px #dfebf2; }

  .org_code{ background-color:#dfebf2; padding: 20px 10px; margin-left: auto; margin-right: auto; margin-bottom: 40px; max-width: 750px; }
  .org_code p{ text-align: center; font-weight: bold; color: #339AD6; font-size: 14px; line-height: 1.6em; }
  .org_code p .block{ display: block; }

}