@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Aleo:400,700');
@import url('https://fonts.googleapis.com/css?family=Merriweather:400,700');
:root {
  --main-font-sans-serif: 'Open Sans', BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif;
}
*, ::after, ::before {
  box-sizing: border-box
}
@-ms-viewport {
  width: device-width
}
html {
  font-size: 62.5%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
  -webkit-tap-highlight-color: transparent
}
@-ms-viewport {
  width: device-width
}
article, aside, footer, header, main, nav, section {
  display: block
}
*::-moz-selection {
  background: #101010;
  color: #FFFFFF
}
*::selection {
  background: #101010;
  color: #FFFFFF
}
html, body {
  height: 100%
}
body {
  margin: 0;
  font: 1.6rem/1.7 var(--main-font-sans-serif);
  color: #222;
  text-align: left;
  background-color: #fff
}
[tabindex="-1"]:focus {
  outline: 0 !important
}
p {
  margin-top: 0;
  margin-bottom: 1rem
}
address {
  margin-bottom: 1rem;
  font-style: normal;
  line-height: inherit
}
dl, ol, ul {
  margin-top: 0;
  margin-bottom: 1rem;
  padding: 0;
  list-style: none
}
b, strong {
  font-weight: bolder
}
small {
  font-size: 80%
}
a {
  color: #222;
  text-decoration: none;
  background-color: transparent;
  transition: .2s
}
a:hover, a:focus {
  color: #222
}
a:not([href]):not([tabindex]) {
  color: inherit;
  text-decoration: none
}
a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover {
  color: inherit;
  text-decoration: none
}
a:not([href]):not([tabindex]):focus {
  outline: 0
}
img {
  vertical-align: top;
  border-style: none;
  width: 100%;
  height: auto
}
svg {
  overflow: hidden;
  vertical-align: middle
}
h2, h3, h4, h5, h6 {
  margin: 0 0 20px;
  line-height: 1.2
}
h2 {
  margin-bottom: 30px;
  font-size: 3rem;
  font-family: 'Aleo', serif;
  font-weight: 700;
  letter-spacing: .1rem;
  text-transform: uppercase;
  text-shadow: 1px 1px 0 #fff, 2px 2px 0 #E6B741
}
.cover h2, .top-category h2 {
  margin-bottom: 0;
  padding: 8px 18px 8px 40px;
  display: inline-block;
  background-color: #fff
}
h3 {
  margin-bottom: 20px;
  font-size: 2.4rem;
}
h4 {
  margin-bottom: 20px;
  font-size: 2rem;
  font-family: 'Merriweather', serif;
}
h4 span {
  padding-top: .5rem;
  display: block;
  font-size: 1.3rem
}
@media (min-width:768px) {
  h2 {
    font-size: 4rem
  }
  .cover h2, .top-category h2 {
    padding: 10px 20px 10px 40px
  }
}
.wrap {
  padding-top: 6rem
}
main {
  height: 100%
}
article {
  background-color: #fff
}
.cover {
  margin: 70px 20px 0;
  height: 450px;
  display: flex;
  align-items: center;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover
}
.cover-beans {
  background-image: url("../img/cover-bean-m.jpg")
}
.cover-cafe {
  background-image: url("../img/cover-cafe-m.jpg")
}
.cover-access {
  background-image: url("../img/cover-access.jpg")
}
.cover-wholesale {
  background-image: url("../img/cover-wholesale2.jpg");
  background-position: left center
}
.cover-contact {
  background-image: url("../img/cover-contact-m.jpg");
  background-position: left bottom
}
.cover-faq {
  background-image: url("../img/cover-faq.jpg")
}
.cover-error {
  background-image: url("../img/cover-error.jpg")
}
.hero {
  margin-top: 0;
  height: 100%;
  background-size: cover;
  position: relative
}
.hero.cover {
  margin-right: 0;
  margin-left: 0;
  background-size: cover
}
video {
  object-fit: contain;
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block
}
.hero .inner {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #111 url("../img/video.jpg") center no-repeat;
  background-size: cover;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
@supports (-webkit-touch-callout: none) {
  .hero .inner {
    height: -webkit-fill-available;
  }
}
.onlinestore {
  margin-top: 18rem;
  position: relative;
  z-index: 999
}
.onlinestore .btn {
  background-color: #fff;
  color: #101010;
}
.hero h1 {
  max-width: 320px;
  width: 60%
}
.hero h1 img {
  width: 100%
}
.hero-line {
  position: absolute;
  color: #fff;
  bottom: 70px;
  right: 10%;
  font-size: 1.6rem;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  transform: rotate(-90deg);
  -webkit-transform-origin: 0;
  -moz-transform-origin: 0;
  transform-origin: left top;
  backface-visibility: hidden;
  letter-spacing: .2rem
}
.hero-line::before {
  backface-visibility: visible;
  content: "";
  height: 1px;
  width: 150px;
  margin-left: -30px;
  top: 50%;
  background-color: #fff;
  position: absolute;
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  transform: translateX(-100%)
}
.inner {
  padding-bottom: 6rem
}
.container {
  width: 100%;
  padding-right: 20px;
  padding-left: 20px;
  margin-right: auto;
  margin-left: auto
}
@media (min-width:768px) {
  .hero {}
  .hero.cover {
    margin-top: 0;
    height: 100%;
    background-size: cover
  }
  video {
    object-fit: contain;
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block
  }
  .cover {
    margin-top: 90px;
    height: 550px
  }
  .cover-cafe {
    background-image: url("../img/cover-cafe.jpg")
  }
  .cover-beans {
    background-image: url("../img/cover-bean.jpg");
    background-position: bottom center
  }
  .cover-contact {
    background-image: url("../img/cover-contact.jpg")
  }
  .cover-wholesale {
    background-image: url("../img/cover-wholesale2.jpg");
background-position: center
  }
}
@media (min-width:996px) {
  .container {
    padding-right: 40px;
    padding-left: 40px
  }
}
@media (min-width:1200px) {
  .cover {
    height: 650px
  }
}
@media (min-width:1700px) {
  .container {
    max-width: 1640px
  }
}
.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -20px;
  margin-left: -20px
}
@media (min-width:996px) {
  .row {
    margin-right: -40px;
    margin-left: -40px
  }
}
.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto {
  position: relative;
  width: 100%;
  padding-right: 20px;
  padding-left: 20px
}
.col {
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%
}
.col-12 {
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%
}
.col-md-6 {
  margin-bottom: 20px
}
@media (min-width:768px) {
  .col-md-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%
  }
  .col-md-6 {
    margin-bottom: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%
  }
  .col-md-9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%
  }
}
.p-6 {
  padding-top: 6rem;
  padding-bottom: 6rem
}
.pb-6 {
  padding-bottom: 6rem
}
.pb-md-6 {
  padding-bottom: 6rem
}
@media (min-width:768px) {
  .pb-md-6 {
    padding-bottom: 0
  }
}
@media (min-width:996px) {
  .col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto {
    padding-right: 40px;
    padding-left: 40px
  }
}
.gray {
  padding-top: 6rem;
  background-color: #f7f2f3
}
.lead h2, .justify-md-center h3 {
  display: flex;
  align-items: center;
  white-space: nowrap
}
.lead h2::after, .justify-md-center h3::after {
  content: '';
  height: 1px;
  width: 3rem;
  background: #222
}
.lead h2 span, .justify-md-center h3 span {
  padding: 0 15px 0 0
}
.align-end {
  align-items: flex-end
}
@media (min-width:768px) {
  .lead {
    margin: auto;
    padding-top: 40px;
    padding-bottom: 40px;
    max-width: 1200px
  }
  .lead h2 {
    float: left;
    width: 30rem
  }
  .lead p {
    margin-left: 30rem
  }
  .d-md-flex {
    display: flex
  }
  .flex-md-row-reverse {
    flex-direction: row-reverse !important
  }
  .justify-md-center {
    display: flex;
    flex-direction: column;
    justify-content: center
  }
}
@media (min-width:992px) {
  .lead h2 {
    width: 35rem
  }
  .lead p {
    margin-left: 35rem
  }
}
/* HEADER */
header {
  padding-top: 5px;
  padding-bottom: 5px;
  height: 70px;
  position: fixed;
  top: 0;
  z-index: 9999;
  width: 100%;
  display: flex;
  flex-direction: row-reverse;
  background: #fff;
  transition: 0.3s
}
header .row {
  height: 100%
}
header .between {
  align-items: center;
  justify-content: flex-end
}
header h1 {
  margin: 0;
  width: auto;
  height: 60px;
  left: 50%;
  position: absolute;
  top: 0%;
  z-index: 999;
  transform: translate3d(-50%, -0%, 0);
  transition: 0.3s
}
header h1 img {
  width: auto;
  height: 100%;
  vertical-align: top
}
.cbp-af-header-shrink {
  background: none;
  background-color: #fff
}
@media (min-width:768px) {
  header {
    height: 90px
  }
  header.cbp-af-header-shrink {
    height: 70px
  }
  header h1 {
    height: 80px
  }
  header.cbp-af-header-shrink h1 {
    height: 60px
  }
}
@media (min-width:1300px) {
  header {
    height: 100px
  }
}
.button_container {
  position: relative;
  height: 40px;
  width: 40px;
  cursor: pointer;
  z-index: 100;
  transition: opacity .25s ease
}
.button_container:hover {
  opacity: .7
}
.button_container.active .top {
  -webkit-transform: translateY(11px) translateX(0) rotate(45deg);
  transform: translateY(11px) translateX(0) rotate(45deg);
  background: #444
}
.button_container.active .middle {
  opacity: 0;
  background: #444
}
.button_container.active .bottom {
  -webkit-transform: translateY(-11px) translateX(0) rotate(-45deg);
  transform: translateY(-11px) translateX(0) rotate(-45deg);
  background: #444
}
.button_container span {
  background: #222;
  border: none;
  height: 2px;
  width: 100%;
  position: absolute;
  top: 7px;
  left: 0;
  transition: all .35s ease;
  cursor: pointer
}
.button_container span:nth-of-type(2) {
  top: 18px
}
.button_container span:nth-of-type(3) {
  top: 29px
}
.cbp-af-header-shrink .button_container span {
  background: #444
}
.overlay {
  position: fixed;
  background-color: #fff;
  top: 70px;
  left: 0;
  width: 100%;
  height: 0%;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s, visibility .35s, height .35s;
  overflow: hidden
}
.overlay.open {
  opacity: .95;
  visibility: visible;
  height: 100%
}
.overlay.open li {
  -webkit-animation: fadeInRight .5s ease forwards;
  animation: fadeInRight .5s ease forwards;
  -webkit-animation-delay: .35s;
  animation-delay: .35s
}
.overlay.open li:nth-of-type(2) {
  -webkit-animation-delay: .4s;
  animation-delay: .4s
}
.overlay.open li:nth-of-type(3) {
  -webkit-animation-delay: .45s;
  animation-delay: .45s
}
.overlay.open li:nth-of-type(4) {
  -webkit-animation-delay: .50s;
  animation-delay: .50s
}
.overlay.open li:nth-of-type(5) {
  -webkit-animation-delay: .55s;
  animation-delay: .55s
}
.overlay.open li:nth-of-type(6) {
  -webkit-animation-delay: .6s;
  animation-delay: .6s
}
.overlay nav {
  position: relative;
  height: 70%;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 3.2rem;
  font-family: 'Merriweather', serif;
  letter-spacing: .01rem;
  text-align: center
}
.overlay ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: inline-block;
  position: relative;
  height: 100%
}
.overlay:hover a:not(:hover) {
  opacity: 0.2
}
.overlay ul li {
  display: block;
  height: 25%;
  height: calc(100% / 6);
  min-height: 50px;
  position: relative;
  opacity: 0
}
.overlay ul li a {
  display: inline-block;
  position: relative;
  overflow: hidden;
  transition: opacity 0.2s
}
.overlay ul li a.cur {
  font-weight: 700
}
@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    left: 20%
  }
  100% {
    opacity: 1;
    left: 0
  }
}
@keyframes fadeInRight {
  0% {
    opacity: 0;
    left: 20%
  }
  100% {
    opacity: 1;
    left: 0
  }
}
.nav-onlinestore {
  position: absolute;
  top: 12px;
  right: 80px;
  z-index: 999;
}
.nav-onlinestore svg {
  width: 30px;
    height: 30px
}
@media (min-width:768px) {
  .button_container {
    display: none
  }
  .overlay {
    position: static;
    top: 0;
    width: 100%;
    height: auto;
    background-color: inherit;
    visibility: inherit;
    opacity: 1
  }
  .overlay nav {
    height: auto;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    font-size: 1.8rem;
    position: relative
  }
  .overlay ul {
    display: flex;
    max-width: 650px
  }
  .overlay ul li {
    display: inline-block;
    height: auto;
    min-height: inherit;
    line-height: 2;
    opacity: 1
  }
  .overlay ul li:nth-child(2) {
    margin-left: 5rem
  }
  .overlay ul li:nth-child(3) {
    margin-right: 5rem;
    margin-left: auto
  }
  .overlay ul li a {
    display: block;
    color: #222;
    overflow: inherit
  }
  .cbp-af-header-shrink .overlay ul li a {
    color: #444
  }
  .nav-onlinestore {
    top: 20px;
    right: 20px;
  }
}
@media (min-width:992px) {
  .overlay ul {
    max-width: 700px
  }
  .nav-onlinestore {
    right: 40px;
  }
}
/* Footer */
footer {
  padding-top: 60px;
  padding-bottom: 60px;
  background-color: #101010;
  color: #aaa
}
footer a {
  color: #fff
}
footer a:hover, footer a:focus {
  color: #ccc
}
footer nav a {
  margin-right: 2rem;
  display: inline-block
}
footer .between-md:last-child {
  font-size: 1.4rem
}
footer .between-md:first-child {
  margin-bottom: 60px
}
.address {
  margin-bottom: 20px
}
footer svg {
    width: 2.4rem;
    height: 2.4rem;
  fill: #fff
}
.sns {
  margin-top: 20px
}
.sns li {
  margin-right: 2rem;
  width: 26px;
  height: 26px;
  color: #fff;
  display: inline-block
}
footer .between {
  font-size: 1.4rem
}
.between {
  display: flex;
  justify-content: space-between
}
@media (min-width:768px) {
  .between-md {
    display: flex;
    justify-content: space-between
  }
  .address {
    margin-bottom: 0
  }
  .sns {
    margin-top: 0
  }
    .sns li {
  margin: 0 0 0 2rem;
}
}
/* Top */
.top-category {
  margin-bottom: 20px
}
.top-category a {
  width: 100%;
  height: 400px;
  background-position: center;
  background-size: cover;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden
}
.top-category a:after {
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out;
  transition: all .3s ease-out
}
.top-cafe a:after {
  background-image: url("../img/top-cafe.jpg")
}
.top-beans a:after {
  background-image: url("../img/top-bean.jpg")
}
.top-category a:hover:after {
  opacity: .8;
  -ms-transform: scale(1.1);
  transform: scale(1.1)
}
.top-category h2 {
  font-size: 2.4rem;
  position: absolute;
  top: 50%;
  margin-top: -1.8rem
}
@media (min-width:768px) {
  .top-category {
    margin-bottom: 0
  }
}
/* CAFE */
.cafe-menu {
  padding: 30px;
  box-shadow: inset 0 0 0 1px #fff, inset 0 0 0 2px #e6b741, inset 0 0 0 3px #fff, inset 0 0 0 4px #e6b741, inset 0 0 0 5px #fff, inset 0 0 0 6px #e6b741
}
.col-cafe {
  margin-bottom: 30px;
  padding-bottom: 25px;
  border-bottom: 4px double #323b4c;
  font-size: 1.4rem
}
.col-cafe:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none
}
.cafe-menu {
  padding: 30px 25px
}
.col-cafe:nth-child(3) {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none
}
.col-cafe h3 {
  font-family: 'Merriweather', serif;
}
.list-cafe {
  line-height: 2
}
.list-cafe dt {
  float: left;
  width: 18rem;
  font-weight: 700
}
.list-cafe dd {
  margin: 0 0 0 18rem;
  text-align: right
}
@media (min-width:992px) {
  .col-cafe {
    font-size: 1.6rem
  }
  .cafe-menu {
    padding: 45px
  }
  .list-cafe dt {
    width: 24rem
  }
  .list-cafe dd {
    margin: 0 0 0 24rem
  }
}
/* BEANS */
.row2 {
  display: flex;
  flex-wrap: wrap;
  margin-right: -10px;
  margin-left: -10px
}
.col-beans {
  padding-right: 10px;
  padding-left: 10px;
  margin-bottom: 20px;
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%
}
.col-beans div {
  padding: 10px;
  border: 2px solid #101010;
  height: 100%
}
.list-beans, .col-beans p {
  font-size: 1.4rem
}
.list-beans dt {
  font-weight: 700
}
.list-beans dd {
  margin: 0 0 .5rem
}
@media (min-width:690px) {
  .col-beans {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%
  }
  .col-beans div {
    padding: 20px
  }
  .list-beans {
    font-size: 1.4rem
  }
}
@media (min-width:768px) {
  .list-beans dt {
    float: left;
    width: 7rem
  }
  .list-beans dd {
    margin: 0 0 0 7rem
  }
}
@media (min-width:992px) {
  .col-beans {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%
  }
}
/* ACCESS */
dl.list-access {
  margin: 0
}
.list-access dt {
  font-weight: 700
}
.list-access dd {
  margin: 0 0 .5rem
}
iframe {
  width: 100%;
  vertical-align: top
}
@media (min-width:768px) {
  .list-access dt {
    float: left;
    width: 8rem
  }
  .list-access dd {
    margin: 0 0 0 8rem
  }
}
/* FAQ */
.accordion {
  width: 100%;
  font-size: 1.6rem
}
.accordion__item {
  border-bottom: 2px solid #e6e6e6
}
.accordion__item:first-child {
  border-top: 2px solid #e6e6e6
}
.accordion__header {
  padding: 1.5rem .5rem;
  border: none;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #1c1c21;
  background-color: #fff;
  font-size: 1.6rem;
  transition: 0.3s;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none
}
.accordion__header-title {
  text-align: left
}
.accordion__header-icon {
  float: right;
  flex-shrink: 0;
  margin-left: .75em;
  display: none
}
.accordion__header-icon i {
  position: relative;
  width: 1em;
  height: 1em;
  display: block;
  will-change: transform
}
.accordion__header-icon i::before, .accordion__header-icon i::after {
  content: '';
  position: absolute;
  width: 2px;
  height: 80%;
  top: 0;
  background: #ccc;
  transform-origin: 50% 100%;
  will-change: transform;
  -webkit-transition: -webkit-transform .2s;
  transition: transform .2s;
  transition: transform .2s, -webkit-transform .2s
}
.accordion__header-icon i::before {
  left: 50%;
  transform: rotate(-45deg)
}
.accordion__header-icon i::after {
  left: calc(50% - 1px);
  transform: rotate(45deg)
}
.accordion__item--is-open > .accordion__header > .accordion__header-icon i::before {
  transform: translateY(-80%) rotate(-135deg)
}
.accordion__item--is-open > .accordion__header > .accordion__header-icon i::after {
  transform: translateY(-80%) rotate(135deg)
}
.accordion__header-icon .icon {
  width: 1em;
  height: 1em;
  color: inherit
}
.accordion__panel-content {
  padding: 1rem .5rem
}
.js .accordion__header-icon {
  display: block
}
.js .accordion__panel {
  display: none;
  overflow: hidden;
  will-change: height;
  transform: translateZ(0px)
}
.js .accordion__item--is-open > .accordion__panel {
  display: block
}
.answer:before {
  content: "※"
}
/* Form */
form {
  display: flex;
  flex-wrap: wrap;
  margin-top: 0;
  width: 100%
}
.form-group {
  margin-bottom: 2rem;
  width: 100%
}
label {
  display: inline-block;
  margin-bottom: .5rem
}
label span {
  margin-left: .2rem;
  font-size: 1.2rem;
  vertical-align: top
}
button, input, select, textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit
}
button, input {
  overflow: visible;
  font-family: var(--main-font-sans-serif)
}
button {
  display: block;
  width: 100%
}
[type=reset], [type=submit], button, html [type=button] {
  -webkit-appearance: button
}
[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner {
  padding: 0;
  border-style: none
}
input, textarea {
  display: block;
  width: 100%;
  padding: 1rem;
  font-size: 1.6rem;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out
}
textarea {
  overflow: auto;
  resize: vertical
}
.btn {
  border: 1px solid #101010;
  background-color: #101010;
  color: #fff;
  padding: 1rem 2rem;
  display: inline-block;
  font-family: var(--main-font-sans-serif);
  letter-spacing: .1rem;
  transition: .15s ease-out;
  cursor: pointer
}
.btn:hover {
  border: 1px solid #101010;
  background-color: rgb(255, 255, 255);
  color: #101010
}
@media (min-width:768px) {
  .form-group {
    flex: 0 0 50%;
    max-width: 50%
  }
  .form-group:nth-child(even) {
    padding-left: 10px
  }
  .form-group:nth-child(odd) {
    padding-right: 10px
  }
}