@charset "UTF-8";
/*==================
 ▼ブレイクポイントのルール▼
 -スマホを基本設計にする-
 *〜479px：SP縦 = sp portlait
 *480px〜：SP横 = sp landscape
 *600px〜タブレット = tb portlait
 *960px〜小型PC = tb landscape laptop desktop
 *1280px〜大型PC = large-screen monitor
==================*/
/* 全体 */
/* line 41, main.scss */
* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-box-shadow: none;
  box-shadow: none;
  outline: none;
  border: none;
  text-decoration: none; }

/* line 49, main.scss */
.hidden {
  display: none; }

@media screen and (min-width: 600px) and (max-width: 960px) {
  /* line 52, main.scss */
  .tb-hidden {
    display: none; } }
@media screen and (max-width: 600px) {
  /* line 52, main.scss */
  .tb-hidden {
    display: none; } }

@media screen and (min-width: 1280px) {
  /* line 60, main.scss */
  .pc-hidden {
    display: none; } }
@media screen and (min-width: 960px) and (max-width: 1280px) {
  /* line 60, main.scss */
  .pc-hidden {
    display: none; } }

/* line 68, main.scss */
body {
  font-family: "Yu Gothic", 'Noto Sans JP', "ヒラギノ角ゴ ProN","Hiragino Kaku Gothic ProN","HGゴシックE","メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic","ＭＳ ゴシック","MS Gothic", sans-serif;
  color: #000;
  text-align: left;
  letter-spacing: .1rem;
  padding: 0;
  margin: 0;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 100%; }

/* line 81, main.scss */
.center-logo {
  -webkit-filter: drop-shadow(0px 1px 2px black);
  filter: drop-shadow(0px 1px 2px black); }

/* ローディング */
/* line 86, main.scss */
#loader-bg {
  transition: none;
  background: #000;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  position: relative;
  z-index: 1500; }
  /* line 99, main.scss */
  #loader-bg #loader {
    transition: none;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column wrap;
    width: 100vw;
    height: 100vh; }
    @media screen and (max-width: 600px) {
      /* line 99, main.scss */
      #loader-bg #loader {
        width: 90%;
        margin: 0 auto; } }
    /* line 112, main.scss */
    #loader-bg #loader h1 {
      font-size: 2rem;
      color: #fff;
      font-weight: bold;
      text-shadow: 0px 4px 2px black; }
    /* line 118, main.scss */
    #loader-bg #loader h2 {
      font-size: 1.4rem;
      color: #fff;
      font-weight: bold;
      text-shadow: 0px 4px 2px black; }
      @media screen and (max-width: 600px) {
        /* line 118, main.scss */
        #loader-bg #loader h2 {
          font-size: 1rem; } }
    /* line 127, main.scss */
    #loader-bg #loader p {
      color: #fff;
      font-weight: bold;
      text-shadow: 0px 4px 2px black;
      padding-top: 3rem; }

/* ラッパー */
/* line 136, main.scss */
#wrapall {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: 100%;
  display: block;
  overflow: hidden;
  position: relative;
  z-index: 1; }

/* 古いIE対策 */
/* line 149, main.scss */
#wrapall {
  height: 100%;
  overflow: visible; }

/* line 153, main.scss */
html > body #wrapall {
  height: auto;
  overflow: hidden; }

/* line 157, main.scss */
header {
  position: absolute;
  top: 3vh;
  left: 3vw;
  z-index: 1000;
  width: 15vw; }
  /* line 163, main.scss */
  header #main-title {
    width: 400px;
    -webkit-filter: drop-shadow(0px 4px 2px black);
    filter: drop-shadow(0px 4px 2px black); }
    @media screen and (max-width: 600px) {
      /* line 163, main.scss */
      header #main-title {
        width: 94vw; } }
  /* line 171, main.scss */
  header #main-title2 {
    width: 400px;
    -webkit-filter: drop-shadow(0px 4px 2px rgba(255, 255, 255, 0.2));
    filter: drop-shadow(0px 4px 2px rgba(255, 255, 255, 0.2)); }
    @media screen and (max-width: 600px) {
      /* line 171, main.scss */
      header #main-title2 {
        width: 94vw; } }
  /* line 179, main.scss */
  header nav {
    padding-top: 1rem; }
    /* line 181, main.scss */
    header nav ul {
      margin: 3rem 0 1rem;
      line-height: 1.875rem; }
      /* line 184, main.scss */
      header nav ul li {
        margin-bottom: 3rem; }
      /* line 187, main.scss */
      header nav ul a.change p.front {
        display: inline; }
      /* line 190, main.scss */
      header nav ul a.change:hover p.front {
        display: none; }
      /* line 193, main.scss */
      header nav ul a.change p.back {
        display: none; }
      /* line 196, main.scss */
      header nav ul a.change:hover p.back {
        display: inline; }
      /* line 199, main.scss */
      header nav ul p {
        color: #fff;
        font-weight: bold;
        text-shadow: 0px 4px 2px black; }
        @media screen and (min-width: 960px) and (max-width: 1280px) {
          /* line 199, main.scss */
          header nav ul p {
            font-size: 0.8rem; } }
  @media screen and (min-width: 960px) and (max-width: 1280px) {
    /* line 157, main.scss */
    header {
      width: 20vw; } }
  @media screen and (min-width: 600px) and (max-width: 960px) {
    /* line 213, main.scss */
    header nav ul {
      position: absolute;
      top: 76vh;
      display: flex;
      width: 100vw;
      flex-flow: row wrap;
      justify-content: space-around;
      margin: 0;
      left: -3vw; }
      /* line 222, main.scss */
      header nav ul li {
        flex-basis: 30%;
        text-align: center; } }
  @media screen and (max-width: 600px) {
    /* line 229, main.scss */
    header nav ul {
      width: 100vw;
      margin: 0 0 0 -3vw;
      height: auto;
      border: 1px solid #aaa;
      box-sizing: border-box;
      padding: 20px;
      box-shadow: 0 0px 0px #000;
      background: rgba(0, 0, 0, 0.9);
      position: relative;
      transition: 1s; }
      /* line 240, main.scss */
      header nav ul.close {
        transform: translate(7vw, -87vh) rotate(45deg); }
      /* line 243, main.scss */
      header nav ul.open {
        transform: none; }
      /* line 246, main.scss */
      header nav ul li {
        margin: 2rem 0; }
      /* line 249, main.scss */
      header nav ul #switch {
        width: 40px;
        height: 40px;
        background: url(../img/fin.png) center/cover;
        position: absolute;
        bottom: 10px;
        right: 5px; } }

/* line 260, main.scss */
main {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative; }
  /* line 265, main.scss */
  main #fadebg {
    position: absolute;
    width: 100%;
    height: 100%; }
    /* line 269, main.scss */
    main #fadebg li img {
      width: 100%;
      height: 100%;
      object-fit: cover; }
      @media screen and (min-width: 960px) and (max-width: 1280px) {
        /* line 269, main.scss */
        main #fadebg li img {
          height: 100vh; } }
      @media screen and (max-width: 600px) {
        /* line 269, main.scss */
        main #fadebg li img {
          height: 100vh; } }
  /* line 281, main.scss */
  main #fadebg2 {
    position: absolute;
    width: 100%;
    height: 100%; }
    /* line 285, main.scss */
    main #fadebg2 li img {
      width: 100%;
      height: 100%;
      object-fit: cover; }
      @media screen and (max-width: 600px) {
        /* line 285, main.scss */
        main #fadebg2 li img {
          height: 100vh; } }
  /* line 294, main.scss */
  main #overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(rgba(0, 0, 0, 0.6) 20%, rgba(0, 0, 0, 0.2) 60%);
    z-index: 0; }
  /* line 303, main.scss */
  main #centering {
    position: absolute;
    transition: none;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column wrap;
    width: 100vw;
    height: 100vh; }
    /* line 313, main.scss */
    main #centering h2 {
      color: #fff;
      font-weight: bold;
      text-shadow: 0px 4px 2px black;
      font-size: 2rem;
      margin-top: -3rem;
      text-align: center; }
    /* line 321, main.scss */
    main #centering p {
      color: #fff;
      font-weight: bold;
      text-shadow: 0px 4px 2px black;
      padding-top: 1rem;
      line-height: 2rem;
      letter-spacing: .2rem; }
      @media screen and (min-width: 960px) and (max-width: 1280px) {
        /* line 321, main.scss */
        main #centering p {
          font-size: 0.8rem;
          line-height: 1.6rem; } }
  /* line 334, main.scss */
  main .prevbox {
    position: absolute;
    bottom: 10vh;
    left: 10vw;
    z-index: 3; }
    /* line 339, main.scss */
    main .prevbox span.change p.front {
      display: inline; }
    /* line 342, main.scss */
    main .prevbox span.change:hover p.front {
      display: none; }
    /* line 345, main.scss */
    main .prevbox span.change p.back {
      display: none; }
    /* line 348, main.scss */
    main .prevbox span.change:hover p.back {
      display: inline; }
    /* line 351, main.scss */
    main .prevbox p {
      color: #fff;
      font-weight: bold;
      text-shadow: 0px 4px 2px black;
      font-size: 2rem;
      cursor: pointer; }
    @media screen and (min-width: 600px) and (max-width: 960px) {
      /* line 334, main.scss */
      main .prevbox {
        bottom: 27vh; }
        /* line 360, main.scss */
        main .prevbox p {
          font-size: 1.6rem; } }
    @media screen and (max-width: 600px) {
      /* line 334, main.scss */
      main .prevbox {
        bottom: 14vh; }
        /* line 366, main.scss */
        main .prevbox p {
          font-size: 1.2rem; } }
  /* line 371, main.scss */
  main .nextbox {
    position: absolute;
    bottom: 10vh;
    right: 10vw;
    z-index: 3; }
    /* line 376, main.scss */
    main .nextbox span.change p.front {
      display: inline; }
    /* line 379, main.scss */
    main .nextbox span.change:hover p.front {
      display: none; }
    /* line 382, main.scss */
    main .nextbox span.change p.back {
      display: none; }
    /* line 385, main.scss */
    main .nextbox span.change:hover p.back {
      display: inline; }
    /* line 388, main.scss */
    main .nextbox p {
      color: #fff;
      font-weight: bold;
      text-shadow: 0px 4px 2px black;
      font-size: 2rem;
      cursor: pointer; }
    @media screen and (min-width: 600px) and (max-width: 960px) {
      /* line 371, main.scss */
      main .nextbox {
        bottom: 27vh; }
        /* line 397, main.scss */
        main .nextbox p {
          font-size: 1.6rem; } }
    @media screen and (max-width: 600px) {
      /* line 371, main.scss */
      main .nextbox {
        bottom: 14vh; }
        /* line 403, main.scss */
        main .nextbox p {
          font-size: 1.2rem; } }

/* line 409, main.scss */
footer {
  z-index: 1000;
  position: absolute;
  bottom: 0;
  right: 3vw;
  width: 97vw;
  height: 40px; }
  @media screen and (max-width: 600px) {
    /* line 409, main.scss */
    footer {
      height: 70px; } }
  /* line 419, main.scss */
  footer #copynote {
    text-align: right; }
    /* line 421, main.scss */
    footer #copynote p {
      color: #fff;
      font-weight: bold;
      text-shadow: 0px 4px 2px black; }
      /* line 425, main.scss */
      footer #copynote p a {
        color: #fff; }

/* ページ個別 */
/* line 433, main.scss */
#home #fadebg .set img {
  -webkit-animation: bg-transition 10s infinite ease-in-out both;
  animation: bg-transition 10s infinite ease-in-out both; }
@-webkit-keyframes bg-transition {
  0% {
    transform: scale(1); }
  100% {
    transform: scale(1.2); } }
@keyframes bg-transition {
  0% {
    transform: scale(1); }
  100% {
    transform: scale(1.2); } }
/* line 453, main.scss */
#home #fadebg2 .set img {
  -webkit-animation: bg-transition2 10s infinite ease-in-out both;
  animation: bg-transition2 10s infinite ease-in-out both; }
@-webkit-keyframes bg-transition2 {
  0% {
    transform: scale(1); }
  100% {
    transform: scale(1.2); } }
@keyframes bg-transition2 {
  0% {
    transform: scale(1); }
  100% {
    transform: scale(1.2); } }
@media screen and (min-width: 600px) and (max-width: 960px) {
  /* line 476, main.scss */
  #concept #centering > div {
    width: 80%; } }
@media screen and (max-width: 600px) {
  /* line 476, main.scss */
  #concept #centering > div {
    width: 90%; } }

/* line 490, main.scss */
#flavor #wrapall {
  background: url("../img/bg-flavor.jpg") center/cover no-repeat #fff; }
/* line 493, main.scss */
#flavor #overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(rgba(255, 255, 255, 0.6) 20%, rgba(255, 255, 255, 0.2) 60%);
  z-index: 0; }
/* line 502, main.scss */
#flavor header p {
  color: #000;
  text-shadow: 0px 4px 2px rgba(255, 255, 255, 0.2); }
  @media screen and (max-width: 600px) {
    /* line 502, main.scss */
    #flavor header p {
      color: #fff;
      text-shadow: 0px 4px 2px black; } }
/* line 511, main.scss */
#flavor main #centering {
  justify-content: flex-end;
  align-items: center;
  flex-direction: row; }
  @media screen and (min-width: 600px) and (max-width: 960px) {
    /* line 511, main.scss */
    #flavor main #centering {
      justify-content: center; } }
  @media screen and (max-width: 600px) {
    /* line 511, main.scss */
    #flavor main #centering {
      justify-content: center; } }
  /* line 521, main.scss */
  #flavor main #centering > div {
    width: 80%;
    margin-top: 2rem; }
    @media screen and (min-width: 600px) and (max-width: 960px) {
      /* line 521, main.scss */
      #flavor main #centering > div {
        height: 58vh;
        margin-top: -6rem;
        overflow: scroll; } }
    @media screen and (max-width: 600px) {
      /* line 521, main.scss */
      #flavor main #centering > div {
        height: 70vh;
        margin-top: 2rem;
        overflow: scroll; } }
    /* line 534, main.scss */
    #flavor main #centering > div h2 {
      text-align: left;
      margin: 0;
      color: #000;
      text-shadow: 0px 4px 2px rgba(255, 255, 255, 0.2); }
    /* line 540, main.scss */
    #flavor main #centering > div p {
      color: #000;
      text-shadow: 0px 4px 2px rgba(255, 255, 255, 0.2);
      letter-spacing: .2rem; }
      /* line 544, main.scss */
      #flavor main #centering > div p:nth-of-type(1) {
        padding: 0; }
    /* line 548, main.scss */
    #flavor main #centering > div .indexwrap {
      display: flex;
      flex-flow: row wrap;
      justify-content: flex-start;
      align-items: center; }
      @media screen and (min-width: 600px) and (max-width: 960px) {
        /* line 548, main.scss */
        #flavor main #centering > div .indexwrap {
          justify-content: center; } }
      @media screen and (max-width: 600px) {
        /* line 548, main.scss */
        #flavor main #centering > div .indexwrap {
          align-items: baseline;
          align-content: flex-start; } }
      /* line 560, main.scss */
      #flavor main #centering > div .indexwrap a {
        flex-basis: 16%; }
        @media screen and (min-width: 600px) and (max-width: 960px) {
          /* line 560, main.scss */
          #flavor main #centering > div .indexwrap a {
            flex-basis: 30%; } }
        @media screen and (max-width: 600px) {
          /* line 560, main.scss */
          #flavor main #centering > div .indexwrap a {
            flex-basis: 50%; } }
        /* line 568, main.scss */
        #flavor main #centering > div .indexwrap a figure {
          width: 100%; }
          /* line 570, main.scss */
          #flavor main #centering > div .indexwrap a figure img {
            width: 100%;
            transform: translateX(-20px); }
            @media screen and (min-width: 600px) and (max-width: 960px) {
              /* line 570, main.scss */
              #flavor main #centering > div .indexwrap a figure img {
                transform: none; } }
            @media screen and (max-width: 600px) {
              /* line 570, main.scss */
              #flavor main #centering > div .indexwrap a figure img {
                transform: none; } }
            /* line 579, main.scss */
            #flavor main #centering > div .indexwrap a figure img:hover {
              transform: translateX(-20px) rotate(15deg);
              -webkit-transform: translateX(-20px) rotate(15deg);
              transform-origin: center; }
              @media screen and (min-width: 600px) and (max-width: 960px) {
                /* line 579, main.scss */
                #flavor main #centering > div .indexwrap a figure img:hover {
                  transform: rotate(15deg); } }
              @media screen and (max-width: 600px) {
                /* line 579, main.scss */
                #flavor main #centering > div .indexwrap a figure img:hover {
                  transform: rotate(15deg); } }
          /* line 591, main.scss */
          #flavor main #centering > div .indexwrap a figure figcaption {
            color: #000;
            text-shadow: 0px 4px 2px rgba(255, 255, 255, 0.2);
            font-weight: bold; }
            @media screen and (min-width: 960px) and (max-width: 1280px) {
              /* line 591, main.scss */
              #flavor main #centering > div .indexwrap a figure figcaption {
                font-size: 0.6rem; } }
/* line 606, main.scss */
#flavor footer p {
  color: #000;
  text-shadow: 0px 4px 2px rgba(255, 255, 255, 0.2); }
  /* line 609, main.scss */
  #flavor footer p a {
    color: #000;
    text-shadow: 0px 4px 2px rgba(255, 255, 255, 0.2); }
  @media screen and (min-width: 960px) and (max-width: 1280px) {
    /* line 606, main.scss */
    #flavor footer p {
      font-size: 0.8rem; } }

/* line 620, main.scss */
.productwrap #wrapall {
  background: url("../img/bg-product.jpg") center/cover no-repeat #fff; }
@media screen and (min-width: 600px) and (max-width: 960px) {
  /* line 624, main.scss */
  .productwrap main #centering {
    flex-direction: row; }
    /* line 627, main.scss */
    .productwrap main #centering p {
      font-size: 0.8rem;
      line-height: 1.6rem; } }
@media screen and (max-width: 600px) {
  /* line 624, main.scss */
  .productwrap main #centering {
    flex-direction: row; }
    /* line 634, main.scss */
    .productwrap main #centering h2 {
      font-size: 1.2rem;
      line-height: 1.4rem; }
    /* line 638, main.scss */
    .productwrap main #centering p {
      font-size: 0.8rem;
      line-height: 1.4rem; } }
/* line 643, main.scss */
.productwrap main #centering > div {
  width: 75vw;
  margin-left: 15vw;
  height: 70%;
  margin-top: 4vh; }
  @media screen and (min-width: 600px) and (max-width: 960px) {
    /* line 643, main.scss */
    .productwrap main #centering > div {
      width: 80vw;
      margin: -14vh 0 0 0;
      height: 58vh; } }
  @media screen and (max-width: 600px) {
    /* line 643, main.scss */
    .productwrap main #centering > div {
      width: 90vw;
      margin: -8vh 0 0 0;
      height: 58vh;
      overflow: scroll; } }
/* line 660, main.scss */
.productwrap main #centering h2 {
  text-align: left;
  margin: 0; }
/* line 664, main.scss */
.productwrap main #centering img {
  transform: translateX(-10px);
  width: 700px; }
  @media screen and (min-width: 960px) and (max-width: 1280px) {
    /* line 664, main.scss */
    .productwrap main #centering img {
      width: 500px; } }
  @media screen and (min-width: 600px) and (max-width: 960px) {
    /* line 664, main.scss */
    .productwrap main #centering img {
      width: 90%; } }
  @media screen and (max-width: 600px) {
    /* line 664, main.scss */
    .productwrap main #centering img {
      width: 100%; } }
/* line 678, main.scss */
.productwrap main .prevbox {
  position: absolute;
  bottom: 10vh;
  left: 10vw;
  z-index: 3; }
  @media screen and (min-width: 960px) and (max-width: 1280px) {
    /* line 678, main.scss */
    .productwrap main .prevbox {
      left: 14vw; } }
  @media screen and (min-width: 600px) and (max-width: 960px) {
    /* line 678, main.scss */
    .productwrap main .prevbox {
      bottom: 28vh; } }
  @media screen and (max-width: 600px) {
    /* line 678, main.scss */
    .productwrap main .prevbox {
      bottom: 19vh;
      left: 4vw; } }
  /* line 693, main.scss */
  .productwrap main .prevbox a.change p.front {
    display: inline; }
  /* line 696, main.scss */
  .productwrap main .prevbox a.change:hover p.front {
    display: none; }
  /* line 699, main.scss */
  .productwrap main .prevbox a.change p.back {
    display: none; }
  /* line 702, main.scss */
  .productwrap main .prevbox a.change:hover p.back {
    display: inline; }
  /* line 705, main.scss */
  .productwrap main .prevbox p {
    color: #fff;
    font-weight: bold;
    text-shadow: 0px 4px 2px black;
    font-size: 2rem;
    cursor: pointer; }
    @media screen and (min-width: 960px) and (max-width: 1280px) {
      /* line 705, main.scss */
      .productwrap main .prevbox p {
        font-size: 1.4rem; } }
    @media screen and (min-width: 600px) and (max-width: 960px) {
      /* line 705, main.scss */
      .productwrap main .prevbox p {
        font-size: 1.2rem; } }
    @media screen and (max-width: 600px) {
      /* line 705, main.scss */
      .productwrap main .prevbox p {
        font-size: 1rem; } }
/* line 722, main.scss */
.productwrap main .prevbox2 {
  position: absolute;
  bottom: 10vh;
  left: 26vw;
  z-index: 3; }
  @media screen and (min-width: 960px) and (max-width: 1280px) {
    /* line 722, main.scss */
    .productwrap main .prevbox2 {
      left: 32vw; } }
  @media screen and (min-width: 600px) and (max-width: 960px) {
    /* line 722, main.scss */
    .productwrap main .prevbox2 {
      bottom: 23vh;
      left: 10vw; } }
  @media screen and (max-width: 600px) {
    /* line 722, main.scss */
    .productwrap main .prevbox2 {
      bottom: 12vh;
      left: 4vw; } }
  /* line 738, main.scss */
  .productwrap main .prevbox2 a.change p.front {
    display: inline; }
  /* line 741, main.scss */
  .productwrap main .prevbox2 a.change:hover p.front {
    display: none; }
  /* line 744, main.scss */
  .productwrap main .prevbox2 a.change p.back {
    display: none; }
  /* line 747, main.scss */
  .productwrap main .prevbox2 a.change:hover p.back {
    display: inline; }
  /* line 750, main.scss */
  .productwrap main .prevbox2 p {
    color: #fff;
    font-weight: bold;
    text-shadow: 0px 4px 2px black;
    font-size: 2rem;
    cursor: pointer; }
    @media screen and (min-width: 960px) and (max-width: 1280px) {
      /* line 750, main.scss */
      .productwrap main .prevbox2 p {
        font-size: 1.4rem; } }
    @media screen and (min-width: 600px) and (max-width: 960px) {
      /* line 750, main.scss */
      .productwrap main .prevbox2 p {
        font-size: 1.2rem; } }
    @media screen and (max-width: 600px) {
      /* line 750, main.scss */
      .productwrap main .prevbox2 p {
        font-size: 1rem; } }
/* line 767, main.scss */
.productwrap main .nextbox {
  position: absolute;
  bottom: 10vh;
  right: 10vw;
  z-index: 3; }
  @media screen and (min-width: 960px) and (max-width: 1280px) {
    /* line 767, main.scss */
    .productwrap main .nextbox {
      right: 6vw; } }
  @media screen and (min-width: 600px) and (max-width: 960px) {
    /* line 767, main.scss */
    .productwrap main .nextbox {
      bottom: 23vh; } }
  @media screen and (max-width: 600px) {
    /* line 767, main.scss */
    .productwrap main .nextbox {
      bottom: 19vh;
      right: 6vw; } }
  /* line 782, main.scss */
  .productwrap main .nextbox a.change p.front {
    display: inline; }
  /* line 785, main.scss */
  .productwrap main .nextbox a.change:hover p.front {
    display: none; }
  /* line 788, main.scss */
  .productwrap main .nextbox a.change p.back {
    display: none; }
  /* line 791, main.scss */
  .productwrap main .nextbox a.change:hover p.back {
    display: inline; }
  /* line 794, main.scss */
  .productwrap main .nextbox p {
    color: #fff;
    font-weight: bold;
    text-shadow: 0px 4px 2px black;
    font-size: 2rem;
    cursor: pointer; }
    @media screen and (min-width: 960px) and (max-width: 1280px) {
      /* line 794, main.scss */
      .productwrap main .nextbox p {
        font-size: 1.4rem; } }
    @media screen and (min-width: 600px) and (max-width: 960px) {
      /* line 794, main.scss */
      .productwrap main .nextbox p {
        font-size: 1.2rem; } }
    @media screen and (max-width: 600px) {
      /* line 794, main.scss */
      .productwrap main .nextbox p {
        font-size: 1rem; } }

/* line 813, main.scss */
#light-roast #wrapall {
  background: url("../img/bg001.jpg") center/cover no-repeat #fff; }

/* line 816, main.scss */
#medium-roast #wrapall {
  background: url("../img/bg002.jpg") center/cover no-repeat #fff; }

/* line 819, main.scss */
#dark-roast #wrapall {
  background: url("../img/bg003.jpg") center/cover no-repeat #fff; }

/* line 822, main.scss */
#miroko-blend #wrapall {
  background: url("../img/bg004.jpg") center/cover no-repeat #fff; }

/* line 825, main.scss */
#mocha-blend #wrapall {
  background: url("../img/bg005.jpg") center/cover no-repeat #fff; }

/* line 828, main.scss */
#caffeineless #wrapall {
  background: url("../img/bg006.jpg") center/cover no-repeat #fff; }

/* line 831, main.scss */
#guatemala #wrapall {
  background: url("../img/bg007.jpg") center/cover no-repeat #fff; }

/* line 834, main.scss */
#mandheling #wrapall {
  background: url("../img/bg008.jpg") center/cover no-repeat #fff; }

/* line 837, main.scss */
#columbia #wrapall {
  background: url("../img/bg009.jpg") center/cover no-repeat #fff; }

/* line 840, main.scss */
#tanzania #wrapall {
  background: url("../img/bg010.jpg") center/cover no-repeat #fff; }

/* line 843, main.scss */
#ethiopia #wrapall {
  background: url("../img/bg011.jpg") center/cover no-repeat #fff; }

/* line 846, main.scss */
#indonesia #wrapall {
  background: url("../img/bg012.jpg") center/cover no-repeat #fff; }

/* line 850, main.scss */
#company #wrapall {
  background: url("../img/bg-company.jpg") center/cover no-repeat #fff; }
/* line 855, main.scss */
#company main #centering h2 {
  color: #fff;
  font-weight: bold;
  text-shadow: 0px 4px 2px black;
  font-size: 2rem;
  text-align: center;
  margin: 0; }
  @media screen and (min-width: 600px) and (max-width: 960px) {
    /* line 855, main.scss */
    #company main #centering h2 {
      margin-top: -6rem; } }
/* line 866, main.scss */
#company main #centering p, #company main #centering dt, #company main #centering dd {
  color: #fff;
  font-weight: bold;
  text-shadow: 0px 4px 2px black;
  padding-top: 2rem;
  line-height: 2rem;
  letter-spacing: .2rem; }
/* line 874, main.scss */
#company main #centering dl {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center; }
  @media screen and (max-width: 600px) {
    /* line 874, main.scss */
    #company main #centering dl {
      width: 90%;
      height: 60%;
      overflow: scroll; } }
  /* line 884, main.scss */
  #company main #centering dl dt, #company main #centering dl dd {
    flex-basis: 50%;
    box-sizing: border-box; }
  /* line 888, main.scss */
  #company main #centering dl dt {
    padding-left: 30%; }
    @media screen and (min-width: 600px) and (max-width: 960px) {
      /* line 888, main.scss */
      #company main #centering dl dt {
        padding-left: 20%; } }
    @media screen and (max-width: 600px) {
      /* line 888, main.scss */
      #company main #centering dl dt {
        padding-left: 0; } }
  /* line 897, main.scss */
  #company main #centering dl dd {
    padding-left: 10%; }
    @media screen and (min-width: 600px) and (max-width: 960px) {
      /* line 897, main.scss */
      #company main #centering dl dd {
        padding-left: 2%; } }
    @media screen and (max-width: 600px) {
      /* line 897, main.scss */
      #company main #centering dl dd {
        padding-left: 0; } }
    /* line 905, main.scss */
    #company main #centering dl dd a:hover button {
      background: #fff;
      color: #000; }
    /* line 909, main.scss */
    #company main #centering dl dd button {
      padding: 1rem 3rem;
      border: 2px solid #fff;
      border-radius: 2px;
      background: transparent;
      color: #fff; }

/* line 922, main.scss */
#privacy-policy #wrapall {
  background: url("../img/bg-privacy-policy.jpg") center/cover no-repeat #fff; }
/* line 925, main.scss */
#privacy-policy header p {
  color: #000;
  text-shadow: 0px 4px 2px rgba(255, 255, 255, 0.2); }
  @media screen and (max-width: 600px) {
    /* line 925, main.scss */
    #privacy-policy header p {
      color: #fff;
      text-shadow: 0px 4px 2px black; } }
/* line 934, main.scss */
#privacy-policy main #overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(rgba(255, 255, 255, 0.6) 20%, rgba(255, 255, 255, 0.2) 60%);
  z-index: 0; }
/* line 944, main.scss */
#privacy-policy main #centering h2 {
  color: #000;
  font-weight: bold;
  text-shadow: 0px 4px 2px rgba(255, 255, 255, 0.2);
  font-size: 2rem;
  text-align: center;
  margin: 0 0 0 -10rem; }
  @media screen and (min-width: 600px) and (max-width: 960px) {
    /* line 944, main.scss */
    #privacy-policy main #centering h2 {
      margin-left: -2rem; } }
  @media screen and (max-width: 600px) {
    /* line 944, main.scss */
    #privacy-policy main #centering h2 {
      margin: 0;
      text-align: left; } }
/* line 959, main.scss */
#privacy-policy main #centering h3 {
  color: #000;
  font-weight: bold;
  text-shadow: 0px 4px 2px rgba(255, 255, 255, 0.2);
  font-size: 1.4rem;
  text-align: left;
  margin: 0;
  padding-top: 1rem; }
/* line 968, main.scss */
#privacy-policy main #centering p {
  color: #000;
  font-weight: bold;
  text-shadow: 0px 4px 2px rgba(255, 255, 255, 0.2);
  padding-top: 1rem;
  line-height: 2rem;
  letter-spacing: .1rem; }
/* line 976, main.scss */
#privacy-policy main #centering #policy-wrap {
  width: 80%;
  height: 70%;
  margin-left: 15%;
  overflow: scroll;
  padding: 1rem;
  box-sizing: border-box; }
  @media screen and (min-width: 600px) and (max-width: 960px) {
    /* line 976, main.scss */
    #privacy-policy main #centering #policy-wrap {
      height: 50vh;
      margin: -15vh 0 0 0; } }
  @media screen and (max-width: 600px) {
    /* line 976, main.scss */
    #privacy-policy main #centering #policy-wrap {
      width: 90%;
      margin: 0; } }
/* line 992, main.scss */
#privacy-policy main #centering #policy-wrap::-webkit-scrollbar {
  width: 10px;
  height: 0px; }
/* line 996, main.scss */
#privacy-policy main #centering #policy-wrap::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.2);
  border-left: none; }
/* line 1000, main.scss */
#privacy-policy main #centering #policy-wrap::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.3); }
/* line 1008, main.scss */
#privacy-policy #copynote p {
  color: #000;
  text-shadow: 0px 4px 2px rgba(255, 255, 255, 0.2); }
  /* line 1011, main.scss */
  #privacy-policy #copynote p a {
    color: #000; }

/* line 1018, main.scss */
#contact #wrapall {
  background: url("../img/bg-privacy-policy.jpg") center/cover no-repeat #fff; }
/* line 1021, main.scss */
#contact header p {
  color: #000;
  text-shadow: 0px 4px 2px rgba(255, 255, 255, 0.2); }
  @media screen and (max-width: 600px) {
    /* line 1021, main.scss */
    #contact header p {
      color: #fff;
      text-shadow: 0px 4px 2px black; } }
/* line 1030, main.scss */
#contact main #overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(rgba(255, 255, 255, 0.6) 20%, rgba(255, 255, 255, 0.2) 60%);
  z-index: 0; }
/* line 1040, main.scss */
#contact main #centering h2 {
  color: #000;
  font-weight: bold;
  text-shadow: 0px 4px 2px rgba(255, 255, 255, 0.2);
  font-size: 2rem;
  text-align: center;
  margin: 0; }
/* line 1048, main.scss */
#contact main #centering p {
  color: #000;
  font-weight: bold;
  text-shadow: 0px 4px 2px rgba(255, 255, 255, 0.2);
  padding-top: 2rem;
  line-height: 2rem;
  letter-spacing: .2rem; }
  @media screen and (min-width: 600px) and (max-width: 960px) {
    /* line 1048, main.scss */
    #contact main #centering p {
      width: 80%; } }
  @media screen and (max-width: 600px) {
    /* line 1048, main.scss */
    #contact main #centering p {
      width: 90%; } }
/* line 1062, main.scss */
#contact main #centering a:hover button {
  background: #000;
  color: #fff; }
/* line 1066, main.scss */
#contact main #centering button {
  padding: 1rem 3rem;
  border: 2px solid #000;
  border-radius: 2px;
  background: transparent;
  color: #000;
  margin: 3rem; }
  @media screen and (max-width: 600px) {
    /* line 1066, main.scss */
    #contact main #centering button {
      padding: 1rem 2rem; } }
/* line 1080, main.scss */
#contact #copynote p {
  color: #000;
  text-shadow: 0px 4px 2px rgba(255, 255, 255, 0.2); }
  /* line 1083, main.scss */
  #contact #copynote p a {
    color: #000; }

/*# sourceMappingURL=main.css.map */