/* global stuff */

a, a:focus { text-decoration: none; }
a:hover { text-decoration: underline; }

.hidden { display: none ! important; }

body {
  background: #f6f6f8;
  padding: 0px;
  margin: 0px;
  border: 0px;
  font-family: Helvetica, sans-serif;
}

@font-face {
  font-family: 'tsukurimashoubokukkodemiBdps';
    src: url('tsukurimashoubokukkodemiboldps-webfont.woff2') format('woff2'),
         url('tsukurimashoubokukkodemiboldps-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* no-Javascript clickable dropdown hack by CalvT:
 *   https://stackoverflow.com/questions/44832572/pure-css-clickable-dropdown
 */

input.dropdown-hack, ul.dropdown-hack { display: none; }
label.dropdown-hack {
  position: relative;
  display: block;
  cursor: pointer;
}
input:checked~ul.dropdown-hack {
  display: block;
  position: absolute;
}
ul.dropdown-hack {
  list-style-type: none;
  background: #f8fcfe;
  border: 1px solid #555;
  padding: 0.25em;
  right: 0px;
  text-align: left;
  z-index: 100;
}
ul.dropdown-hack a { color: #555; }
ul.dropdown-hack a:hover { color: #111; }
ul.dropdown-hack button {
  color: #555;
  background: #f8fcfe;
  border: 0px;
  text-align: left;
  cursor: pointer;
}
ul.dropdown-hack button:hover {
  color: #111;
  text-decoration: underline;
}

/* banners */

.cookie-banner, .constr-banner {
  width: 100%;
  position: relative;
  min-height: 2.0em;
  padding: 0.25em;
  cursor: pointer;
}
.cookie-banner { background: #fdd; }
.constr-banner { background: #ffc; min-height: 52px; }
.banner-text { margin: 0px 0.5em 0px 6.5em; }
.banner-text img { float: left; margin: 0.33em; }
.banner-close button {
  position: absolute;
  width: 5.0em;
  background: #ccc;
  left: 1.5em;
  top: 0.5em;
  text-align: center;
  border-radius: 4px;
  padding: 0px;
  cursor: pointer;
}
.banner-close button:hover { background: #83e7ff; }

/* header */

h1, h2, h3 {
  font-family: "tsukurimashoubokukkodemiBdps","Gill Sans","Gill Sans MT",Calibri,sans-serif;
  clear: left;
}
h1 {
  margin-top: 0px;
}

.header-wrapper {
  background: #111;
  color: #f9fcff;
  width: 100%;
  margin-top: 0px;
  margin-left: 0px;
  margin-right: 0px;
}
.header {
  width: 100%;
  display: block;
  position: relative;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 2px;
}
.header-icons {
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0px;
  padding-bottom: 5px;
  text-align: right;
}
.header-icons a, .header-icons a:focus { color: #f9fcff; }
.header-icons a:hover { color: #f9fcff; }
.header-icon {
  position: relative;
  display: inline-block;
}
.header-icon img {
  display: inline;
  height: 1.5em;
}
span.ccbox-label, span.cart-icon-amount {
  position: relative;
  bottom: 0.4em;
  margin-left: 0.15em;
  margin-right: 0.5em;
}
.header-titlebox a, .header-titlebox a:hover, .header-titlebox a:focus {
  text-decoration: none;
  color: #f9fcff;
}
.titlebox-subtitle {
  text-align: center;
  margin-bottom: 0px;
}
.titlebox-subtitle h2 {
  display: inline-block;
  font-family: Helvetica, sans-serif;
  font-weight: normal;
  font-size: 14pt;
  margin-top: 0px;
  margin-bottom: 10px;
}
.titlebox-title {
  text-align: center;
  padding-top: 5px;
}
.titlebox-title h1 {
  margin-top: 5px;
  margin-bottom: 0px;
}

/* subheader (navigation) */

.subheader-wrapper {
  color: #555;
  width: 100%;
  margin-bottom: 12px;
  margin-top: 0px;
  margin-left: 0px;
  margin-right: 0px;
  background: #c5ccd5;
}
.subheader {
  width: 100%;
  display: block;
  position: relative;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.subheader-link {
  display: inline-block;
  width: 80px;
  text-align: center;
  padding: 0.5em 0px 0.5em 0px;
  font-weight: bold;
}
.subheader a, .subheader a:focus { color: #555; }
.subheader a:hover { color: #111; }

/* generic content */

.content {
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
  padding: 0px 1.6em 0px 1.6em;
  color: #555;
}
.content a, .content a:focus, .content a:hover { color: #111; }

/* subfooter (newsletter subscribe) */

.subfooter-wrapper {
  color: #555;
  width: 100%;
  margin: 0px;
  background: #c5ccd5;
  text-align: center;
}
.subfooter {
  display: block;
  position: relative;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  padding: 0px 1.7em 1em 1.7em;
}
.subfooter h2 {
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  margin: 0px;
}
.subfooter-email {
  width: 60%;
  min-width: 200px;
  margin-left: 0px;
  margin-right: -1.8em;
}
.subfooter-button {
  width: 120px;
  margin-left: 2.0em;
}

/* footer */

.footer-wrapper {
  background: #006;
  color: #f9fcff;
  width: 100%;
  margin-bottom: 0px;
  margin-top: 0px;
  margin-left: 0px;
  margin-right: 0px;
}
.footer {
  display: block;
  position: relative;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
  padding: 1.0em 1.7em 0.5em 1.7em;
}
.footer a, .footer a:focus { color: #f9fcff; }
.footer a:hover { color: #f9fcff; }
.footer h3 {
  font-size: 90%;
  color: #83e7ff;
  text-transform: uppercase;
  margin: 0.25em;
}
.footer-blocks {
  width: 220px;
  display: flex;
  flex-flow: column wrap;
  align-content: flex-start;
}
.footer-block {
  width: 220px;
}
.footer-block ul {
  list-style-type: none;
  padding-left: 0.25em;
  margin: 0px 0px 12px 0px;
}
.footer .social-icon {
  display: inline-block;
  margin-right: 5px;
  background-color: #f9fcff;
  color: #006;
  width: 36px;
  height: 36px;
  line-height: 32px;
  border-radius: 50%;
  text-align: center;
}
.social-icon svg {
  width: auto;
  height: 24px;
  vertical-align: middle;
}
.footer-copyright {
  text-align: right;
  margin-top: 1em;
  margin-right: 1.6em;
}

/***********************************************************************/

/* home page */

.homepage-slide {
  min-height: 120px;
  padding-top: 0.8em;
  margin-bottom: 0.8em;
}
.homepage-slide img {
  width: 100%;
}

.homepage-products {
  display: flex;
  flex-flow: row wrap;
  margin-left: -7px;
  margin-right: -7px;
}
.product-tile {
  flex-basis: 320px;
  flex-grow: 1;
  text-align: center;
  margin-top: 0.7em;
}
.product-tile img { width: 95%; }

.homepage-articles {
  display: flex;
  flex-flow: row wrap;
  margin-left: -7px;
  margin-right: -7px;
}
.homepage-article {
  flex-basis: 480px;
  flex-grow: 1;
  margin: 0.7em 0.7em 0px 0.7em;
}
.weblog-thumb-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 75%;
  margin: 0px;
}
.weblog-thumb-wrapper img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  margin: auto;
}
.readmore {
  display: inline-block;
  background: #555;
  font-size: 70%;
  padding: 0px 4px 0px 4px;
  border-radius: 4px;
}
a.readmore {
  color: #f9fcff;
}
a.readmore:hover {
  color: #83e7ff;
  text-decoration: none;
}

/***********************************************************************/

/* misc. Web pages */

.text-content { max-width: 840px; }
.text-content h1 {
  font-family: "tsukurimashoubokukkodemiBdps","Gill Sans","Gill Sans MT",Calibri,sans-serif;
  text-align: center;
  width: 100%;
  font-size: 32px;
  margin-bottom: -0.25em;
}
.text-content h2 {
  font-family: "tsukurimashoubokukkodemiBdps","Gill Sans","Gill Sans MT",Calibri,sans-serif;
  width: 100%;
  font-size: 28px;
  margin-bottom: -0.25em;
}
.text-content h3 {
  font-family: "tsukurimashoubokukkodemiBdps","Gill Sans","Gill Sans MT",Calibri,sans-serif;
  font-size: 24px;
  margin-top: 0.5em;
  margin-bottom: -0.25em;
}
.text-content h4 {
  font-family: "tsukurimashoubokukkodemiBdps","Gill Sans","Gill Sans MT",Calibri,sans-serif;
  font-size: 21px;
  margin-top: 0.5em;
  margin-bottom: -0.25em;
}
.text-content img { max-width: 100%; }
.text-content blockquote {
  padding-left: 0.5em;
  border-left: 4px solid #555;
}
.ingr-amount {
  min-width: 4em;
}

/***********************************************************************/

/* product category */

.category-title { text-align: center; }

/***********************************************************************/

/* Web log index */

.news-index-article {
  max-width: 560px;
  margin: 24px auto 36px auto;
}
.news-index-later {
  margin: 36px auto 24px auto;
  text-align: right;
}
.news-index-earlier {
  max-width: 560px;
  margin-bottom: 24px;
}
a.news-index-pager {
  display: inline-block;
  background: #555;
  font-size: 90%;
  padding: 0px 4px 2px 4px;
  border-radius: 4px;
  color: #f9fcff;
}
a.news-index-pager:hover {
  color: #83e7ff;
  text-decoration: none;
}
.news-pagelist {
  display: flex;
  justify-content: center;
  margin: 24px auto 36px auto;
}
.news-pagenum {
  padding: 4px;
}
.news-current-pagenum {
  padding: 2px;
  border: 2px solid black;
}
.news-pagespace {
  flex-grow: 1;
  text-align: center;
  max-width: 18px;
}

/***********************************************************************/

/* Web log article */

.article-tag {
  display: inline-block;
  background: #555;
  font-size: 85%;
  padding: 0px 4px 0px 4px;
  border-radius: 4px;
}
.article-tag a {
  color: #f9fcff;
}
.article-tag a:hover {
  color: #83e7ff;
  text-decoration: none;
}
.product-offer {
  width: 100%;
  margin: -6px;
  padding: 6px;
  border: 1px solid black;
  display: flex;
  flex-flow: column nowrap;
}
.offer-image {
}
.offer-wrapper {
  flex-grow: 1;
  position: relative;
  min-height: 180px;
  margin-top: -18px;
}
.offer-buttons {
  position: absolute;
  right: 0px;
  bottom: 0px;
}
.comment-form {
  margin-top: 2em;
  margin-bottom: 2em;
}
.comment-error {
  font-size: 110%;
  color: #f43;
  margin-top: 2em;
  margin-bottom: 1em;
}
.comment-text { margin-top: 1.5em; }

/***********************************************************************/

/* product */

.product-page {
  display: flex;
  flex-flow: row nowrap;
}
.product-image-column {
  width: 360px;
  flex-grow: 1;
}
.product-main-image { text-align: center; }
.product-main-image img { width: 98%; }
.product-main-video { text-align: center; }
.product-main-video video { width: 98%; }
.product-youtube-wrapper {
  position: relative;
  width: 98%;
  padding-bottom: 55.125%;
  padding-top: 25px;
  height: 0;
  text-align: center;
}
.product-youtube-wrapper iframe {
  position: absolute;
  top: 0;
  left: 5px;
  width: 100%;
  height: 100%;
}
.product-thumbs {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
}
.product-thumb-image {
  width: 33.33%;
  text-align: center;
  margin-top: 4px;
}
.product-thumb-image button {
  border: 0px;
  padding: 0px;
}
.product-thumb-image img {
  width: 94%;
}
.product-text-column {
  width: 360px;
  flex-grow: 1;
  padding-left: 0.9%;
  padding-right: 0.9%;
}
.sku-chooser {
  position: relative;
}
.highlight-sku-chooser {
  font-size: 120%;
  border-radius: 5px;
  border: 2px solid black;
  padding-left: 5px;
}
.sku-chooser ul.dropdown-hack {
  left: 0px;
  right: auto;
  max-height: 320px;
  overflow-y: auto;
}
.quantity-chooser { margin-bottom: 1em; }
.quantity-input { width: 2.5em; }
.soldout {
  padding: 6px;
  font-size: 120%;
  color: #555;
  background: #fcc;
  border-radius: 7px;
  max-width: 50%;
  text-align: center;
  font-weight: bold;
}
.buynow, .addtocart {
  padding: 6px;
  font-size: 120%;
  color: #f9fcff;
  background: #006;
  border-radius: 7px;
  max-width: 50%;
  text-align: center;
  font-weight: bold;
  border: none;
  outline: none;
  cursor: pointer;
}
.buynow a, .footer a:focus, .addtocart { color: #f9fcff; }
.buynow a:hover { color: #83e7ff; }
.addtocart:hover {
  color: #83e7ff;
  text-decoration: underline;
}
.checkout-constr-warning { margin-bottom: 3em; }

/***********************************************************************/

/* shopping cart */

.cart-table {
  margin-top: 2em;
  margin-bottom: 1.5em;
}
.cart-buttons {
  text-align: right;
  margin-bottom: 1.5em;
}
.update-qtys, .checkout {
  padding: 6px;
  font-size: 120%;
  border-radius: 7px;
  max-width: 50%;
  text-align: center;
  font-weight: bold;
  border: none;
  outline: none;
  cursor: pointer;
}
.update-qtys {
  color: #111;
  background: #c5ccd5;
  margin-right: 0.5em;
}
.update-qtys:hover {
  text-decoration: underline;
}
.checkout {
  color: #f9fcff;
  background: #006;
}
.checkout:hover {
  color: #83e7ff;
  text-decoration: underline;
}

/***********************************************************************/

/* checkout */

#billtoshipping:checked~.billing-address {
  display: none;
}

.pseudo-p {
  margin-top: 1em;
  margin-bottom: 1em;
}

.checkout-email {
  width: 60%;
  min-width: 20em;
}

#order_notes {
  width: 100%;
  max-width: 50em;
  height: 10em;
}

#shipping_country, #billing_country {
  width: 14.5em;
}

/***********************************************************************/

/* responsive/mobile design */

@media (min-width: 490px) {
  .footer-blocks {
    width: 440px;
    height: 310px;
  }
}

@media (min-width: 600px) {
  .header-icons {
    width: 30%;
    position: absolute;
    right: 0;
    bottom: 0px;
  }
  .header-titlebox {
    width: 70%;
    max-width: 640px;
    display: inline-block;
    height: 72px;
  }
  .titlebox-subtitle {
    position: relative;
    bottom: 5px;
  }
  .offer-image {
    width: 320px;
  }
  .product-offer {
    flex-flow: row nowrap;
  }
  .offer-wrapper {
    margin-left: 12px;
  }
  .offer-buttons {
    right: 6px;
    bottom: 6px;
  }
}

@media (min-width: 690px) {
  .product-tile { max-width: 50%; }
}

@media (min-width: 710px) {
  .footer-blocks {
    width: 660px;
    height: 220px;
  }
  .homepage-article {
    flex-basis: 100px;
  }
}

@media (min-width: 960px) {
  .subheader-link {
    width: 11%;
  }
  .footer-blocks {
    width: 880px;
    height: 170px;
  }
  .homepage-product {
    flex-grow: 0;
    flex-basis: 33.33%;
  }
  .product-tile { max-width: 33.33%; }
}