@charset "UTF-8";
html,
body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
li,
th,
td,
dl,
dt,
dd {
  margin: 0;
  padding: 0;
  line-height: 1;
  font-family: "HG教科書体", "Noto Serif JP", serif, "メイリオ", Meiryo;
  letter-spacing: 0.05rem;
  color: #34314c;
  line-height: 1.4;
  -webkit-print-color-adjust: exact;
}

html,
body {
  -ms-touch-action: manipulation !important;
  touch-action: manipulation !important;
}

ul,
ol,
li {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

a:hover {
  color: #ff9201;
}

img {
  vertical-align: bottom;
  border: none;
  max-width: 100%;
}

textarea {
  resize: none;
}

input[type="submit"] {
  -webkit-appearance: none;
  border-radius: 0;
}

button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.dsp-non {
  display: none;
}

.dsp-block {
  display: block;
}

.sp-tablet-only {
  display: none;
}

@media screen and (max-width: 1024px) {
  .sp-tablet-only {
    display: block;
  }
}

.sp-only {
  display: none;
}

@media screen and (max-width: 767px) {
  .sp-only {
    display: block;
  }
}

.pc-only {
  display: block;
}

@media screen and (max-width: 1024px) {
  .pc-only {
    display: none !important;
  }
}

.pc-tablet-only {
  display: block;
}

@media screen and (max-width: 767px) {
  .pc-tablet-only {
    display: none !important;
  }
}

.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.pc-flex,
.pc-flex-wrap,
.pc-flex-space-between,
.pc-flex-space-around,
.pc-flex-center {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@media screen and (max-width: 1024px) {
  .pc-flex,
  .pc-flex-wrap,
  .pc-flex-space-between,
  .pc-flex-space-around,
  .pc-flex-center {
    display: block;
  }
}

.pc-tablet-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@media screen and (max-width: 767px) {
  .pc-tablet-flex {
    display: block;
  }
}

.pc-tablet-flex-center {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

@media screen and (max-width: 767px) {
  .pc-tablet-flex-center {
    display: block;
  }
}

.flex-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.pc-flex-wrap {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.flex-space-between {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.pc-flex-space-between {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.flex-space-around {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
  justify-content: space-around;
}

.pc-flex-space-around {
  -ms-flex-pack: distribute;
  justify-content: space-around;
}

.flex-center {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.pc-flex-center {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.mt5 {
  margin-top: 5px !important;
}

.mt10 {
  margin-top: 10px !important;
}

.mt20 {
  margin-top: 20px !important;
}

.mt30 {
  margin-top: 30px !important;
}

.mt40 {
  margin-top: 40px !important;
}

.mt50 {
  margin-top: 50px !important;
}

.mt60 {
  margin-top: 60px !important;
}

.mt70 {
  margin-top: 70px !important;
}

.mt80 {
  margin-top: 80px !important;
}

.mt100 {
  margin-top: 100px !important;
}

.mb5 {
  margin-bottom: 5px !important;
}

.mb10 {
  margin-bottom: 10px !important;
}

.mb20 {
  margin-bottom: 20px !important;
}

.mb30 {
  margin-bottom: 30px !important;
}

.mb40 {
  margin-bottom: 40px !important;
}

.mb50 {
  margin-bottom: 50px !important;
}

.mb60 {
  margin-bottom: 60px !important;
}

.mr5 {
  margin-right: 5px !important;
}

.mr10 {
  margin-right: 10px !important;
}

.mr20 {
  margin-right: 20px !important;
}

.mr30 {
  margin-right: 30px !important;
}

.mr40 {
  margin-right: 40px !important;
}

.mr50 {
  margin-right: 50px !important;
}

.mr60 {
  margin-right: 60px !important;
}

.ml5 {
  margin-left: 5px !important;
}

.ml10 {
  margin-left: 10px !important;
}

.ml20 {
  margin-left: 20px !important;
}

.ml30 {
  margin-left: 30px !important;
}

.ml40 {
  margin-left: 40px !important;
}

.ml50 {
  margin-left: 50px !important;
}

.ml60 {
  margin-left: 60px !important;
}

.m-0-auto {
  margin: 0 auto !important;
}

.mr-auto {
  margin-right: auto !important;
}

.ml-auto {
  margin-left: auto !important;
}

.mt-auto {
  margin-top: auto !important;
}

.pd0 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0px !important;
}

.pd10 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 10px !important;
}

.pd20 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 20px !important;
}

.pd30 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 30px !important;
}

.pd40 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 40px !important;
}

.pt0 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding-top: 0px !important;
}

.pt5 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding-top: 5px !important;
}

.pt10 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding-top: 10px !important;
}

.pt20 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding-top: 20px !important;
}

.pt30 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding-top: 30px !important;
}

.pt40 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding-top: 40px !important;
}

.pb0 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding-bottom: 0px !important;
}

.pb5 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding-bottom: 5px !important;
}

.pb10 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding-bottom: 10px !important;
}

.pb20 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding-bottom: 20px !important;
}

.pb30 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding-bottom: 30px !important;
}

.pb40 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding-bottom: 40px !important;
}

.pb100 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding-bottom: 100px !important;
}

.font-10 {
  font-size: 10px !important;
}

.font-12 {
  font-size: 12px !important;
}

.font-14 {
  font-size: 14px !important;
}

.font-16 {
  font-size: 16px !important;
}

.font-20 {
  font-size: 20px !important;
}

.font-40 {
  font-size: 40px !important;
}

.font-60 {
  font-size: 60px !important;
}

.maxwidth-1024 {
  max-width: 1024px !important;
  margin: 0 auto;
}

.maxwidth-767 {
  max-width: 767px !important;
  margin: 0 auto;
}

.width-100p {
  width: 100% !important;
}

.bold {
  font-weight: 700 !important;
}

.small-txt {
  font-size: 10px !important;
}

.link-color {
  color: #ff9201;
}

.link-color:hover {
  opacity: 0.4;
}

.under-line {
  text-decoration: underline;
}

.main-color {
  color: #b7855c;
}

.color-white {
  color: #fff !important;
}

.color-red {
  color: #b81b24 !important;
}

.color-light_gray {
  color: #aaa;
}

.bg-main-gradient {
  background: -webkit-gradient(linear, left top, right top, from(#b7855c), to(#aa5f1b));
  background: linear-gradient(90deg, #b7855c, #aa5f1b);
}

.bg-white {
  background: #fff !important;
}

.pointer {
  cursor: pointer !important;
}

.size-16 {
  font-size: 16px !important;
}

.size-18 {
  font-size: 18px !important;
}

.size-20 {
  font-size: 20px !important;
}

.size-30 {
  font-size: 30px !important;
}

.size-40 {
  font-size: 40px !important;
}

.size-50 {
  font-size: 50px !important;
}

.size-60 {
  font-size: 60px !important;
}

.lh-1_4 {
  line-height: 1.4;
}

.lh-1_7 {
  line-height: 1.7;
}

.text-center {
  text-align: center !important;
}

.text-left {
  text-align: left !important;
}

.text-right {
  text-align: right !important;
}

.width-100 {
  width: 100% !important;
}

.width-50 {
  width: 50% !important;
}

.width-33 {
  width: 33.33% !important;
}

.width-25 {
  width: 25% !important;
}

.pc-width-30 {
  width: 30% !important;
}

@media screen and (max-width: 767px) {
  .pc-width-30 {
    width: 100% !important;
  }
}

.pc-width-50 {
  width: 50% !important;
}

@media screen and (max-width: 767px) {
  .pc-width-50 {
    width: 100% !important;
  }
}

.pc-width-auto {
  width: auto !important;
}

@media screen and (max-width: 767px) {
  .pc-width-auto {
    width: 100% !important;
  }
}

.z-index-0 {
  z-index: 0 !important;
}

.z-index-10 {
  z-index: 10 !important;
}

.z-index-100 {
  z-index: 100 !important;
}

.position-rel {
  position: relative !important;
}

.position-abs {
  position: absolute !important;
}

.position-fix {
  position: fixed !important;
}

.abs-center {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.scroll {
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}

.yscroll {
  overflow-y: scroll;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.xscroll {
  overflow-x: scroll;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.yscroll-non {
  overflow-y: hidden !important;
}

.xscroll-non {
  overflow-y: hidden !important;
}

.items-center {
  -webkit-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.container {
  max-width: 960px;
  margin: 0 auto;
}

.border-bottom {
  border-bottom: 1px solid #ddd;
}

.to-top {
  width: 52px;
  height: 52px;
  overflow: hidden;
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: block;
  padding: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 5px;
  text-align: center;
  background: #b7855c;
  color: #fff;
  font-size: 12px;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  visibility: hidden;
  opacity: 0;
}

.to-top:hover {
  color: #fff;
}

.to-top:active {
  color: #fff;
  opacity: 0.8;
}

@media screen and (max-width: 1024px) {
  .to-top {
    bottom: calc(65px + 20px);
  }
}

@media screen and (max-width: 767px) {
  .to-top {
    width: 40px;
    height: 40px;
    padding: 5px;
    font-size: 10px;
    bottom: calc(40px * 2 + 20px);
  }
}

.top-show {
  opacity: 1;
  visibility: visible;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

.defaultBtn,
.unSubmitButton,
.grayBtn {
  display: block;
  width: 60%;
  margin: 0 auto;
  padding: 15px 0;
  background: #b7855c;
  text-align: center;
  font-size: 18px;
  border-radius: 50px;
  color: #fff;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  border: none;
  cursor: pointer;
}

.defaultBtn:disabled,
.unSubmitButton:disabled,
.grayBtn:disabled {
  background: #e6e6e6;
  cursor: not-allowed;
}

.defaultBtn:hover,
.unSubmitButton:hover,
.grayBtn:hover {
  opacity: 0.8;
  color: #fff;
}

@media screen and (max-width: 767px) {
  .defaultBtn,
  .unSubmitButton,
  .grayBtn {
    width: 100%;
    font-size: 14px;
  }
}

.unSubmitButton {
  background: #e6e6e6;
}

.defaultRectBtn,
.grayRectBtn {
  display: block;
  width: 60%;
  margin: 0 auto;
  padding: 15px 0;
  background: #b7855c;
  text-align: center;
  font-size: 18px;
  color: #fff;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  border: none;
  cursor: pointer;
}

.defaultRectBtn:hover,
.grayRectBtn:hover {
  opacity: 0.8;
  color: #fff;
  background: #b7855c;
}

@media screen and (max-width: 767px) {
  .defaultRectBtn,
  .grayRectBtn {
    width: 100%;
    font-size: 14px;
  }
}

.darkenBtn {
  display: block;
  width: 60%;
  margin: 0 auto;
  padding: 15px 0;
  background: #aa5f1b;
  border: 3px solid #fff;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
  font-size: 18px;
  border-radius: 50px !important;
  color: #fff;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  cursor: pointer;
}

.darkenBtn:hover {
  opacity: 0.8;
  color: #fff;
  background: #1b66aa;
}

@media screen and (max-width: 767px) {
  .darkenBtn {
    width: 100%;
    font-size: 14px;
  }
}

.grayBtn {
  background: #777;
}

.grayBtn:hover {
  background: #777;
}

.grayRectBtn {
  background: #777;
}

.grayRectBtn:hover {
  background: #777;
}

.link-button {
  width: auto;
  padding: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: #ff9201;
  color: #fff;
  border-radius: 5px;
  overflow: hidden;
  -webkit-box-shadow: 0 0 5px #ccc;
  box-shadow: 0 0 5px #ccc;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  font-size: 14px;
}

.link-button:hover {
  color: #fff;
  opacity: 0.8;
  -webkit-box-shadow: 0 0 8px #666;
  box-shadow: 0 0 8px #666;
}

.selector {
  display: block;
  font-size: 16px;
  line-height: 1.3;
  width: 30%;
  margin: 0;
  border: 1px solid #ddd;
}

.selectBtn {
  text-align: center;
  padding: 3px 20px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: #b7855c;
  color: #fff;
  font-size: 14px;
}

.flash-message-container {
  max-width: 520px;
  position: fixed;
  z-index: 100;
  top: 10vh;
  right: 4%;
  z-index: 100010;
  background: #fff;
  padding: 20px 15px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 8px;
  -webkit-box-shadow: 0 0 10px #6d6d6d;
  box-shadow: 0 0 10px #6d6d6d;
  -webkit-animation: flashMessage 5s ease 0s 1 normal forwards;
  animation: flashMessage 5s ease 0s 1 normal forwards;
}

@media screen and (max-width: 767px) {
  .flash-message-container {
    top: 65px;
    left: 0;
    right: 0;
    border-radius: 0;
  }
}

.notice-message,
.alert-message {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  color: #34314c;
  font-size: 14px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-weight: 600;
}

.notice-message > i,
.alert-message > i {
  font-size: 20px;
  margin-right: 10px;
  color: #23b81c;
}

.notice-message > span,
.alert-message > span {
  display: block;
  color: #34314c;
}

.alert-message > i {
  color: #1c23b8;
}

@media screen and (min-width: 768px) {
  @-webkit-keyframes flashMessage {
    0% {
      opacity: 0;
      top: 0;
    }
    20% {
      opacity: 1;
      top: 10vh;
    }
    80% {
      opacity: 1;
      top: 10vh;
    }
    100% {
      opacity: 0;
      top: 0;
    }
  }
  @keyframes flashMessage {
    0% {
      opacity: 0;
      top: 0;
    }
    20% {
      opacity: 1;
      top: 10vh;
    }
    80% {
      opacity: 1;
      top: 10vh;
    }
    100% {
      opacity: 0;
      top: 0;
    }
  }
}

@media screen and (max-width: 767px) {
  @-webkit-keyframes flashMessage {
    0% {
      opacity: 0;
      top: 0;
    }
    20% {
      opacity: 1;
      top: 65px;
    }
    80% {
      opacity: 1;
      top: 65px;
    }
    100% {
      opacity: 0;
      top: 0;
    }
  }
  @keyframes flashMessage {
    0% {
      opacity: 0;
      top: 0;
    }
    20% {
      opacity: 1;
      top: 65px;
    }
    80% {
      opacity: 1;
      top: 65px;
    }
    100% {
      opacity: 0;
      top: 0;
    }
  }
}

.more-link {
  color: #ff9201;
  text-decoration: underline;
}

.more-link a {
  color: #ff9201;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

.more-link a:hover {
  color: #ff9201;
  opacity: 0.8;
}

@media screen and (max-width: 767px) {
  .more-link a {
    font-size: 14px;
  }
}

.breadcrumb-container {
  margin-top: 65px;
  background: #fff;
  overflow: hidden;
}

@media screen and (max-width: 1024px) {
  .breadcrumb-container {
    font-size: 10px;
  }
}

.breadcrumb-container .breadcrumb {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  max-width: 960px;
  width: 80%;
  margin: 0 auto;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 10px;
  font-size: 12px;
}

@media screen and (max-width: 1024px) {
  .breadcrumb-container .breadcrumb {
    overflow-x: auto;
    width: 100%;
  }
}

.breadcrumb-container .breadcrumb > li {
  max-width: 100%;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  margin-right: 10px;
  line-height: 1.7em;
  color: #b7855c;
  font-weight: 600;
  white-space: nowrap;
}

.breadcrumb-container .breadcrumb > li > a {
  color: inherit;
}

.breadcrumb-container .breadcrumb > li > a:hover {
  color: inherit;
  text-decoration: underline;
}

.breadcrumb-container .breadcrumb li + li:before {
  content: ">";
}

.original-checkbox {
  position: relative;
  width: 15px;
  height: 15px;
  border: 1px solid #ddd;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 5px;
}

.original-checkbox > .fa-check {
  display: none;
}

.checked {
  -webkit-box-shadow: 0 0 5px #b7855c;
  box-shadow: 0 0 5px #b7855c;
}

.checked .original-checkbox > .fa-check {
  display: block;
  color: #b7855c;
  font-size: 30px;
}

.pagination {
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.pagination .page {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  display: block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  margin: 5px;
  text-align: center;
  color: #ff9201;
}

@media screen and (max-width: 767px) {
  .pagination .page {
    margin: 0 2px;
  }
}

.pagination .current {
  color: #fff;
  background: #b7855c;
  border-radius: 50%;
}

.pagination .prev,
.pagination .prev-link,
.pagination .next-link,
.pagination .next {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #ddd;
  margin: 0 20px;
  font-size: 20px;
  line-height: 40px;
  color: #ddd;
  overflow: hidden;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .pagination .prev,
  .pagination .prev-link,
  .pagination .next-link,
  .pagination .next {
    margin: 0 10px;
  }
}

.pagination .prev > a,
.pagination .prev-link > a,
.pagination .next-link > a,
.pagination .next > a {
  display: block;
}

.pagination .prev-link,
.pagination .next-link {
  color: #ff9201;
  border: 1px solid #ff9201;
}

.pagination .prev-link a,
.pagination .next-link a {
  display: block;
}

.first,
.last {
  font-size: 14px;
  color: #ddd;
  width: 20px;
  height: 20px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  border: 1px solid #ddd;
  border-radius: 50%;
}

.copy-label {
  width: 100%;
  -webkit-print-color-adjust: exact;
  background: url(https://d3risj25c02mqp.cloudfront.net/material/water.jpg) no-repeat center/cover !important;
  padding: 20px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

@media screen and (max-width: 767px) {
  .copy-label {
    background: url(https://d3risj25c02mqp.cloudfront.net/material/water_sp.jpg) no-repeat center/cover !important;
  }
}

.copy-label .main {
  color: #fff;
  font-size: 24px;
  text-align: center;
}

.copy-label .sub {
  margin-top: 10px;
  color: #fff;
  font-size: 18px;
  text-align: center;
}

@media screen and (max-width: 1024px) {
  .copy-label .main {
    font-size: 18px;
  }
  .copy-label .sub {
    font-size: 16px;
  }
}

@media screen and (max-width: 767px) {
  .copy-label .main {
    font-size: 13px;
  }
  .copy-label .sub {
    font-size: 13px;
  }
}

.background-white-paper {
  background: url(https://d3risj25c02mqp.cloudfront.net/material/paper-white.jpg) !important;
  -webkit-print-color-adjust: exact;
}

.shopping-check {
  display: none;
  visibility: hidden;
  opacity: 0;
}

.shopping-check:checked + .shopping-menu {
  height: auto;
  padding: 30px 20px;
  border: 1px solid #ddd;
  opacity: 1;
  visibility: visible;
}

.shopping-menu {
  visibility: hidden;
  opacity: 0;
  width: 100%;
  height: 0;
  overflow: hidden;
  margin-top: 10px;
  padding: 0;
  border: 1px solid transparent;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: #fff;
  border-radius: 5px;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.shopping-menu__ttl {
  font-weight: bold;
  font-size: 16px;
}

@media screen and (max-width: 767px) {
  .shopping-menu__ttl {
    font-size: 12px;
  }
}

.shopping-menu__row {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-top: 10px;
}

.shopping-menu__btn {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: calc((100% - 30px) / 2);
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

.shopping-menu__btn:hover {
  opacity: 0.8;
}

@media screen and (max-width: 767px) {
  .shopping-menu__btn {
    width: calc((100% - 10px) / 2);
  }
}

.shopping-menu__btn.ec {
  width: 20%;
}

@media screen and (max-width: 1024px) {
  .shopping-menu__btn.ec {
    width: 30%;
  }
}

@media screen and (max-width: 767px) {
  .shopping-menu__btn.ec {
    width: 40%;
  }
}

.shopping-menu__btn.store,
.shopping-menu__btn.fax {
  background: #c41a22;
  color: #fff;
  text-align: center;
  padding: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 42px;
  font-size: 14px;
}

@media screen and (max-width: 1024px) {
  .shopping-menu__btn.store,
  .shopping-menu__btn.fax {
    font-size: 12px;
  }
}

@media screen and (max-width: 767px) {
  .shopping-menu__btn.store,
  .shopping-menu__btn.fax {
    font-size: 10px;
  }
}

.shopping-menu .shopping-menu__btn + .shopping-menu__btn {
  margin-left: 30px;
}

@media screen and (max-width: 767px) {
  .shopping-menu .shopping-menu__btn + .shopping-menu__btn {
    margin-left: 10px;
  }
}

form {
  width: 100%;
}

.loading {
  background: #8a8a8a;
  position: relative;
}

.loading > .loader {
  color: #fff;
}

.form-error-message {
  font-size: 14px;
  color: #b7855c;
  margin-top: 10px;
}

.form-icon,
.form-title,
.form-title-sp-col,
.form-title-independence {
  display: block;
  background: #b7855c;
  color: #fff;
  width: 50px;
  text-align: center;
  padding: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.form-input,
.form-input-false,
.form-input-sp-col {
  width: 100%;
  padding: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 14px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border: 1px solid #ddd;
  border-left: none;
}

.form-input-false {
  background: #ddd;
}

.form-input-sp-col {
  border-left: 1px solid #ddd;
  border-top-right-radius: 0;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}

.form-select {
  display: block;
  font-size: 16px;
  line-height: 1.3;
  padding: 0.6em 1.4em 0.5em 0.8em;
  width: 100%;
  max-width: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  border: 1px solid #ddd;
}

.field_with_errors {
  width: 100%;
}

#error_explanation {
  margin-top: 20px;
}

#error_explanation > h2 {
  font-size: 20px;
}

#error_explanation > ul > li {
  margin-top: 10px;
}

.form-title,
.form-title-sp-col,
.form-title-independence {
  width: 15%;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  font-size: 14px;
}

@media screen and (max-width: 767px) {
  .form-title,
  .form-title-sp-col,
  .form-title-independence {
    width: 28%;
  }
}

.form-title-sp-col {
  width: auto;
}

@media screen and (max-width: 767px) {
  .form-title-sp-col {
    border-radius: 0;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 0;
  }
}

.form-title-independence {
  border-radius: 5px;
}

@media screen and (max-width: 1024px) {
  .form-title-independence {
    width: auto !important;
  }
}

.form-text-area {
  width: 100%;
  min-height: 20vh;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.form-alert {
  font-size: 14px;
  color: red;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-top: 10px;
}

.cp_ipselect {
  overflow: hidden;
  width: 50%;
  text-align: center;
}

.cp_ipselect select {
  width: 100%;
  padding-right: 1em;
  cursor: pointer;
  text-indent: 0.01px;
  text-overflow: ellipsis;
  border: none;
  outline: none;
  background: transparent;
  background-image: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.cp_ipselect select::-ms-expand {
  display: none;
}

.cp_ipselect.form-selector {
  position: relative;
  border: 1px solid #bbbbbb;
  border-radius: 2px;
  background: #ffffff;
}

.cp_ipselect.form-selector::before {
  position: absolute;
  top: 0.8em;
  right: 0.9em;
  width: 0;
  height: 0;
  padding: 0;
  content: "";
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #666666;
  pointer-events: none;
}

.cp_ipselect.form-selector:after {
  position: absolute;
  top: 0;
  right: 2.5em;
  bottom: 0;
  width: 1px;
  content: "";
  border-left: 1px solid #bbbbbb;
}

.cp_ipselect.form-selector select {
  padding: 8px 38px 8px 8px;
  color: #666666;
}

.rich-text {
  background: #fff;
  padding: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 5px;
}

header {
  width: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #352511 !important;
  -webkit-print-color-adjust: exact;
}

.gnav {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000000;
}

.gnav .container {
  max-width: 95%;
  height: 65px;
  padding: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.gnav .logo {
  width: 200px;
}

.gnav .logo > a {
  color: #fff;
  font-size: 20px;
}

@media screen and (max-width: 767px) {
  .gnav .logo {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
}

.gnav .navigation {
  white-space: nowrap;
  margin-left: auto;
}

.gnav .navigation .nav-link {
  color: #fff;
  font-size: 14px;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  white-space: nowrap;
}

.gnav .navigation .nav-link:hover {
  opacity: 0.8;
}

.gnav .navigation .nav-link + .nav-link {
  margin-left: 10px;
}

.gnav .navigation .red-button {
  padding: 3px 5px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: #c41a22 !important;
  -webkit-print-color-adjust: exact;
  border-radius: 5px;
}

@media screen and (max-width: 767px) {
  .gnav .navigation {
    display: none;
  }
}

.footer-menu {
  display: none;
  position: fixed;
  bottom: 0;
  background: #fff;
  z-index: 1000;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

@media screen and (max-width: 1024px) {
  .footer-menu {
    display: block;
    width: 100%;
  }
  .footer-menu .footer-menu-top {
    display: none;
  }
  .footer-menu .footer-menu-bottom {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
  }
}

@media screen and (max-width: 767px) {
  .footer-menu .footer-menu-top {
    width: 100%;
    height: 40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background: #fff;
    padding: 5px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  .footer-menu .footer-menu-top .foot-menu-button {
    width: 100%;
    border-radius: 30px;
    font-size: 12px;
    padding: 5px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
    line-height: 15px;
  }
  .footer-menu .footer-menu-top .foot-menu-button + .foot-menu-button {
    margin-left: 10px;
  }
  .footer-menu .footer-menu-top .white {
    background: #fff;
    color: #34314c;
    border: 1px solid #ddd;
  }
  .footer-menu .footer-menu-top .red {
    background: #c41a22;
    color: #fff;
  }
}

.footer-menu-link {
  width: 20%;
  max-height: 65px;
  overflow: hidden;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 10px;
  font-size: 18px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: #ddd;
  border-top: 1px solid #ddd;
  -webkit-text-decoration-color: inherit;
  text-decoration-color: inherit;
}

.footer-menu-link:hover {
  color: #ddd;
}

.footer-menu-link > i {
  font-size: 20px;
  margin-bottom: 5px;
}

@media screen and (max-width: 767px) {
  .footer-menu-link {
    min-height: 40px;
    font-size: 10px;
    padding: 7px 0;
    letter-spacing: 0.02rem;
  }
  .footer-menu-link > i {
    font-size: 16px;
  }
}

.footer-menu-link.current {
  color: #c41a22;
}

@media screen and (max-width: 767px) {
  .bottom-menu-hidden {
    bottom: -100px;
  }
}

main {
  min-height: 100vh;
  background: #fff !important;
  -webkit-print-color-adjust: exact;
  padding-top: calc(65px + 50px);
}

main .content-wrap {
  padding: 30px 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

@media screen and (max-width: 1024px) {
  main .content-wrap {
    padding: 30px;
  }
}

@media screen and (max-width: 767px) {
  main .content-wrap {
    padding: 30px 10px;
  }
}

footer {
  width: 100%;
  background: #352511 !important;
  -webkit-print-color-adjust: exact;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

@media screen and (max-width: 1024px) {
  footer {
    padding-bottom: 65px;
  }
}

@media screen and (max-width: 767px) {
  footer {
    padding-bottom: calc(40px * 2);
  }
}

footer .container {
  padding: 30px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@media screen and (max-width: 1024px) {
  footer .container {
    padding: 30px;
  }
}

@media screen and (max-width: 767px) {
  footer .container {
    padding: 30px 10px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
  }
}

footer .container .left {
  width: 40%;
}

footer .container .left > h2 {
  color: #fff;
  font-size: 30px;
}

footer .container .left .footer__list > li {
  color: #fff;
  margin-top: 20px;
}

footer .container .left .footer__list > li a {
  color: #fff;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

footer .container .left .footer__list > li a:hover {
  opacity: 0.8;
}

footer .container .right {
  width: 50%;
  margin-left: auto;
}

footer .container .right .buttons .footer__btn {
  display: block;
  width: 100%;
  padding: 20px 0;
  text-align: center;
  border-radius: 10px;
  overflow: hidden;
  font-size: 20px;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

footer .container .right .buttons .footer__btn:hover {
  opacity: 0.8;
}

footer .container .right .buttons .footer__btn + .footer__btn {
  margin-top: 10px;
}

footer .container .right .buttons .white {
  background: #fff !important;
  -webkit-print-color-adjust: exact;
  color: #34314c;
}

footer .container .right .buttons .red {
  background: #c41a22 !important;
  color: #fff;
}

@media screen and (max-width: 767px) {
  footer .container .left {
    width: 100%;
    margin-top: 20px;
  }
  footer .container .right {
    width: 100%;
  }
  footer .container .right .buttons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  footer .container .right .buttons .footer__btn {
    width: calc((100% - 10px) / 2);
    padding: 10px;
    font-size: 14px;
  }
  footer .container .right .buttons .footer__btn + .footer__btn {
    margin-top: 0px;
    margin-left: 10px;
  }
  footer .container .right .buttons .red {
    line-height: 39px;
  }
}

footer .wrap {
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
  padding: 20px 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

footer .wrap p {
  font-size: 14px;
  color: #fff;
  text-align: center;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

@media screen and (max-width: 767px) {
  footer .wrap p {
    font-size: 12px;
  }
}

footer .wrap p .f-an:hover {
  color: #fff;
  opacity: 0.8;
}

footer .image-credit {
  margin-top: 20px;
  font-size: 12px;
  color: #fff;
}

@media screen and (max-width: 767px) {
  footer .image-credit {
    font-size: 10px;
  }
}

footer .sns-icon {
  font-size: 40px;
  color: #fff;
  cursor: pointer;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

footer .sns-icon:hover {
  opacity: 0.8;
}

footer .sns-icon > a {
  color: inherit;
}

footer .sns-icon > a:hover {
  color: inherit;
}

.top {
  padding-top: 65px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.top__kv {
  position: relative;
  width: 100%;
}

.top__kv .kv-lead {
  position: absolute;
  bottom: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 100;
  width: 80%;
  color: #fff;
  font-size: 32px;
  line-height: 1.4;
  text-align: center;
  letter-spacing: 5px;
  text-shadow: 0 0 5px black;
}

.top__kv .kv-lead > span {
  display: block;
  font-size: 12px;
}

@media screen and (max-width: 1024px) {
  .top__kv .kv-lead {
    width: 85%;
    letter-spacing: 1.5px;
    font-size: 20px;
  }
}

@media screen and (max-width: 767px) {
  .top__kv .kv-lead {
    bottom: 55%;
    width: 95%;
    font-size: 18px;
    line-height: 1.4;
  }
  .top__kv .kv-lead .top__kv .kv-lead {
    bottom: 43%;
  }
}

.top__kv .kv-logo {
  width: 60%;
  position: absolute;
  top: 65%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 100;
  filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.8));
  -webkit-filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.8));
}

@media screen and (max-width: 767px) {
  .top__kv .kv-logo {
    width: 95%;
    top: 50%;
  }
}

.top__kv .top-fb-page-button {
  --circle-size: 70px;
  width: var(--circle-size);
  height: var(--circle-size);
  position: absolute;
  bottom: 20px;
  right: 20px;
  font-size: calc(var(--circle-size) + 5px);
  color: #0080fb;
  background: #fff;
  overflow: hidden;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

.top__kv .top-fb-page-button:hover {
  opacity: 0.8;
}

.top .section__title {
  font-size: 35px;
}

.top .section__lead {
  margin-top: 20px;
  font-size: 16px;
}

@media screen and (max-width: 1024px) {
  .top .section__title {
    font-size: 30px;
  }
}

@media screen and (max-width: 767px) {
  .top .section__title {
    font-size: 25px;
  }
  .top .section__lead {
    margin-top: 15px;
    font-size: 14px;
  }
}

.top__introduction {
  position: relative;
  width: 100%;
  height: 700px;
}

@media screen and (max-width: 1024px) {
  .top__introduction {
    height: 800px;
  }
}

.top__introduction .introduction-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
}

@media screen and (max-width: 767px) {
  .top__introduction {
    height: 900px;
  }
}

.top__introduction .fv {
  margin: 0 0 40px;
  font-size: 16px;
}

@media screen and (max-width: 767px) {
  .top__introduction .fv {
    font-size: 12px;
  }
}

.top .introduction {
  padding: 50px 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.top .introduction__title {
  font-size: 35px;
}

.top .introduction__lead {
  display: inline-block;
  padding: 3px 5px;
  margin-top: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: #c41a22;
  color: #fff;
  font-size: 14px;
}

.top .introduction__texts > p {
  line-height: 2;
}

@media screen and (max-width: 1024px) {
  .top .introduction {
    padding: 30px 10px;
  }
  .top .introduction__title {
    font-size: 30px;
  }
  .top .introduction__texts > p {
    font-size: 15px;
  }
}

@media screen and (max-width: 767px) {
  .top .introduction {
    padding: 30px 10px;
  }
  .top .introduction__title {
    font-size: 18px;
  }
  .top .introduction__lead {
    font-size: 12px;
  }
  .top .introduction__texts > p {
    font-size: 14px;
  }
}

.top__products {
  background: #ede5d6;
}

.top .product {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  width: 100%;
  border-radius: 5px;
  background: #fff;
  padding: 20px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
}

@media screen and (max-width: 767px) {
  .top .product {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding: 0;
  }
}

.top .product__image {
  width: 200px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  background: #fff;
  margin-right: 10px;
}

.top .product__image > img {
  width: 100%;
}

@media screen and (max-width: 767px) {
  .top .product__image {
    background: #efebe8;
    width: 100%;
    margin-right: 0;
  }
}

@media screen and (max-width: 767px) {
  .top .product .width-100 {
    padding: 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
}

.top .product__label {
  display: inline-block;
  padding: 3px 5px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-bottom: 5px;
  background: #03243f;
  color: #fff;
  font-size: 12px;
}

.top .product__lead {
  font-size: 16px;
}

@media screen and (max-width: 767px) {
  .top .product__lead {
    font-size: 14px;
  }
}

.top .product__title {
  margin-top: 5px;
  font-size: 24px;
  line-height: 1.4;
}

@media screen and (max-width: 767px) {
  .top .product__title {
    font-size: 18px;
  }
}

.top .product__amount {
  margin-top: 5px;
  font-size: 16px;
}

@media screen and (max-width: 767px) {
  .top .product__amount {
    font-size: 12px;
  }
}

.top .product__description {
  margin-top: 10px;
  font-size: 16px;
}

@media screen and (max-width: 767px) {
  .top .product__description {
    font-size: 12px;
  }
}

.top .product__buttons {
  width: 100%;
  margin-top: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

@media screen and (max-width: 767px) {
  .top .product__buttons {
    margin-top: 15px;
  }
}

.top .product__button {
  display: block;
  width: 100%;
  padding: 10px;
  border-radius: 20px;
  text-align: center;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

.top .product__button:hover {
  opacity: 0.6;
}

@media screen and (max-width: 767px) {
  .top .product__button {
    font-size: 14px;
  }
}

.top .product .white-button {
  background: #fff;
  border: 1px solid #ddd;
  margin-right: 15px;
  color: #34314c;
}

.top .product .red-button {
  background: #c41a22;
  color: #fff;
}

.top .product + .product {
  margin-top: 10px;
}

.top__recipes {
  width: 100%;
  background: url(https://d3risj25c02mqp.cloudfront.net/material/bg-paper.jpg);
}

.top__recipes .recipe-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  padding-bottom: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.top__recipes .recipe-wrap::-webkit-scrollbar {
  display: none;
}

.top .recipe {
  display: block;
  position: relative;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: calc((100% - 20px) / 3.5);
  padding-bottom: calc((100% - 20px) / 3.5);
  height: 0;
  border-radius: 10px;
  overflow: hidden;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.top .recipe__cover {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: -webkit-gradient(linear, left bottom, left top, from(#000), to(transparent));
  background: linear-gradient(to top, #000, transparent);
}

.top .recipe__title {
  color: #fff;
  text-align: center;
  font-size: 16px;
}

@media screen and (max-width: 1024px) {
  .top .recipe {
    width: calc((100% - 20px) / 2.8);
    padding-bottom: calc((100% - 20px) / 2.8);
  }
  .top .recipe__title {
    font-size: 14px;
  }
}

@media screen and (max-width: 767px) {
  .top .recipe {
    width: calc((100% - 10px) / 1.2);
    padding-bottom: calc((100% - 10px) / 1.2);
  }
  .top .recipe__title {
    font-size: 14px;
  }
}

.top .recipe + .recipe {
  margin-left: 10px;
}

.top__news {
  width: 100%;
}

.top__nap {
  width: 100%;
  /*NAP*/
  /*ボタン*/
}

.top__nap .text_area {
  margin: 80px 0 50px;
}

.top__nap .text_area h2,
.top__nap .c-nap h2 {
  background: #f8b39e;
  font-size: 22px;
  margin: 0 0 15px;
  padding: 10px 15px;
}

.top__nap .text_area p {
  margin: 0;
}

.top__nap .c-nap {
  margin: 40px 0 0;
}

.top__nap .c-table {
  border-collapse: collapse;
  border: 1px solid #ccc;
  text-align: left;
  width: 100%;
}

.top__nap .c-table th {
  background: #fff;
  border: 1px solid #ccc;
  text-align: left;
  vertical-align: middle;
  width: 25%;
}

.top__nap .c-table td {
  border: 1px solid #ccc;
  vertical-align: middle;
}

.top__nap .u-p15 {
  padding: 15px !important;
}

.top__nap .column_link {
  margin: 20px 0;
  text-align: left;
}

.top__nap .column_link a {
  background: #9e9378;
  border-radius: 5px;
  color: #fff;
  display: inline-block;
  font-weight: bold;
  line-height: 1.5;
  padding: 15px 20px;
  position: relative;
  text-decoration: none;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  width: 80%;
  text-align: center;
}

.top__nap .column_link a:hover {
  color: #fff;
  opacity: 0.8;
}

@media (min-width: 768px) {
  .top__nap {
    /*ボタン PCのみ*/
  }
  .top__nap .column_link a {
    font-size: 16px;
    width: 40%;
  }
}

@media only screen and (max-width: 768px) {
  .top__nap .text_area h2,
  .top__nap .c-nap h2 {
    font-size: 20px;
  }
  .top__nap .c-table th {
    display: block;
    width: auto;
  }
  .top__nap .c-table td {
    display: block;
  }
}

.top .top-news {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  border-bottom: 1px solid #ddd;
  padding: 20px 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.top .top-news:hover {
  opacity: 0.8;
}

@media screen and (max-width: 767px) {
  .top .top-news {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
  }
}

.top .top-news__title {
  width: 100%;
  color: #34314c;
  margin-left: 15px;
  padding: 5px 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 14px;
}

@media screen and (max-width: 767px) {
  .top .top-news__title {
    margin-left: 0;
    margin-top: 10px;
  }
}

.top .top-news__date {
  width: 110px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  margin-left: 15px;
  white-space: nowrap;
  padding: 5px 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 14px;
}

.top .top-news__tag {
  width: 100px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding: 5px 10px;
  border-radius: 5px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: #ff9201;
  color: #fff;
  font-size: 12px;
  text-align: center;
}

.top .top-news > .flex {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

.top .top-news + .top-news {
  margin-top: 10px;
}

.top .background-tatsuno {
  width: 100%;
  background: #fff;
}

.recipe-conntainer {
  padding: 30px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.recipe-conntainer > h1 {
  font-size: 32px;
}

.recipe-conntainer > p {
  font-size: 16px;
}

@media screen and (max-width: 767px) {
  .recipe-conntainer {
    padding: 30px 10px;
  }
  .recipe-conntainer > h1 {
    font-size: 26px;
  }
  .recipe-conntainer > p {
    font-size: 14px;
  }
}

.recipes__nav,
.recipes__nav--sp {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  height: 50px;
  position: fixed;
  top: 65px;
  left: 0;
  z-index: 100000;
  -webkit-print-color-adjust: exact;
  -webkit-box-shadow: 0 3px 5px #ccc;
  box-shadow: 0 3px 5px #ccc;
  background: #fff !important;
}

.recipes__nav .container,
.recipes__nav--sp .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 100%;
}

.recipes__nav .nav__item,
.recipes__nav--sp .nav__item,
.recipes__nav .admin__nav .nav__item-parent,
.admin__nav .recipes__nav .nav__item-parent,
.recipes__nav--sp .admin__nav .nav__item-parent,
.admin__nav .recipes__nav--sp .nav__item-parent {
  display: block;
  width: calc(100% / 8);
  -ms-flex-negative: 0;
  flex-shrink: 0;
  color: #34314c;
  padding: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-left: 1px solid #34314c;
  font-size: 14px;
  text-align: center;
  letter-spacing: 0.01px;
}

@media screen and (max-width: 1024px) {
  .recipes__nav .nav__item,
  .recipes__nav--sp .nav__item,
  .recipes__nav .admin__nav .nav__item-parent,
  .admin__nav .recipes__nav .nav__item-parent,
  .recipes__nav--sp .admin__nav .nav__item-parent,
  .admin__nav .recipes__nav--sp .nav__item-parent {
    padding: 5px;
    font-size: 14px;
  }
}

.recipes__nav .nav__item:hover,
.recipes__nav--sp .nav__item:hover,
.recipes__nav .admin__nav .nav__item-parent:hover,
.admin__nav .recipes__nav .nav__item-parent:hover,
.recipes__nav--sp .admin__nav .nav__item-parent:hover,
.admin__nav .recipes__nav--sp .nav__item-parent:hover {
  color: #34314c;
  text-decoration: underline;
}

.recipes__nav .nav__item:last-child,
.recipes__nav--sp .nav__item:last-child,
.recipes__nav .admin__nav .nav__item-parent:last-child,
.admin__nav .recipes__nav .nav__item-parent:last-child,
.recipes__nav--sp .admin__nav .nav__item-parent:last-child,
.admin__nav .recipes__nav--sp .nav__item-parent:last-child {
  border-right: 1px solid #34314c;
}

@media screen and (max-width: 1024px) {
  .recipes__nav,
  .recipes__nav--sp {
    display: none;
  }
}

.recipes__nav--sp {
  display: none;
}

@media screen and (max-width: 1024px) {
  .recipes__nav--sp {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 0;
  }
  .recipes__nav--sp .nav__item,
  .recipes__nav--sp .admin__nav .nav__item-parent,
  .admin__nav .recipes__nav--sp .nav__item-parent {
    border: none;
    width: 50%;
    line-height: 40px;
    text-align: center;
  }
  .recipes__nav--sp .nav__item:last-child,
  .recipes__nav--sp .admin__nav .nav__item-parent:last-child,
  .admin__nav .recipes__nav--sp .nav__item-parent:last-child {
    border-left: 1px solid #34314c;
    border-right: none;
  }
}

.recipes__header {
  width: 100%;
  position: relative;
}

.recipes__header .title {
  width: 25%;
  position: absolute;
  top: 45%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

@media screen and (max-width: 1024px) {
  .recipes__header .title {
    top: 50%;
    width: 30%;
  }
}

@media screen and (max-width: 767px) {
  .recipes__header .title {
    top: 50%;
    width: 45%;
  }
}

.recipes__header-image {
  width: 100%;
}

.recipes__header-image > img {
  width: 100%;
}

.recipes__subtitle {
  width: 100%;
  background: #f8b39e;
  padding: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
}

@media screen and (max-width: 1024px) {
  .recipes__subtitle {
    font-size: 18px;
  }
}

.recipes__top-container {
  width: 100%;
}

.recipe__main_image {
  width: 100%;
  border-radius: 10px;
  -webkit-box-shadow: 0 0 5px #ccc;
  box-shadow: 0 0 5px #ccc;
  overflow: hidden;
}

.recipe__main_image > img {
  width: 100%;
}

.recipes__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  min-height: 100vh;
}

@media screen and (max-width: 767px) {
  .recipes__container {
    display: block;
  }
}

.recipes__container > div {
  width: 100%;
}

.recipes__container .left {
  max-width: 550px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

@media screen and (max-width: 1024px) {
  .recipes__container .left {
    max-width: 62%;
    -ms-flex-negative: 0;
    flex-shrink: 0;
  }
}

@media screen and (max-width: 767px) {
  .recipes__container .left {
    max-width: 100%;
    width: 100%;
  }
}

.recipes__container .right {
  width: 312px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  margin-left: auto;
}

@media screen and (max-width: 1024px) {
  .recipes__container .right {
    max-width: calc(38% - 10px);
  }
}

@media screen and (max-width: 767px) {
  .recipes__container .right {
    margin: 0;
    margin-top: 20px;
    max-width: 100%;
    width: 100%;
  }
}

.recipes__container .right .sections__container + .sections__container {
  margin-top: 20px;
}

.recipes__container .right .sections__title {
  width: 100%;
  padding: 10px 20px;
  font-size: 14px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  overflow: hidden;
  color: #fff;
  background: #f8b39e !important;
  -webkit-print-color-adjust: exact;
}

.recipes__container .right .section__box {
  padding: 15px 20px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  overflow: hidden;
  background: #efebe8 !important;
  -webkit-print-color-adjust: exact;
}

.recipes__container .right .section__box li + li {
  margin-top: 15px;
}

.recipes__container .right .section__box > li {
  font-size: 14px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

@media screen and (max-width: 1024px) {
  .recipes__container .right .section__box > li {
    font-size: 12px;
  }
}

@media screen and (max-width: 767px) {
  .recipes__container .right .section__box > li {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
}

.recipes__container .right .section__box > li .left {
  width: 65%;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.recipes__container .right .section__box > li .right {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 30%;
  margin-top: 0;
  margin-left: auto;
  padding-left: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

@media screen and (max-width: 767px) {
  .recipes__container .right .section__box > li .right {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
}

.recipes__container .right .section__box .products {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow-x: scroll;
  padding-bottom: 10px;
}

.recipes__container .right .section__box .products .product {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 40%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.recipes__container .right .section__box .products .product:hover {
  opacity: 0.6;
}

.recipes__container .right .section__box .products .product__title {
  font-size: 12px;
  text-align: center;
  margin-top: 5px;
}

.recipes__container .right .section__box .products .product + .product {
  margin-left: 10px;
}

.recipes__container .right .section__box .justify-center {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  overflow: hidden;
  padding-bottom: 0;
}

.recipes__container .right .border__bottom > li {
  padding-bottom: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-bottom: 2px solid #ddd;
}

.recipes__container .right .border__bottom > li:last-child {
  padding-bottom: 0;
  border: none;
}

@media screen and (max-width: 1024px) {
  .recipes__container .right .border__bottom > li {
    font-size: 12px;
  }
}

.recipes__container .sections__title {
  font-size: 16px;
}

@media screen and (max-width: 767px) {
  .recipes__container .sections__title {
    font-size: 14px;
  }
}

.recipes__container .order__list > li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 10px;
  font-size: 16px;
}

.recipes__container .order__list > li:before {
  content: attr(data-count);
  display: block;
  width: 20px;
  height: 20px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  border: 1px solid #34314c;
  border-radius: 50%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-right: 15px;
  font-size: 12px;
  text-align: center;
  line-height: 16px;
}

@media screen and (max-width: 767px) {
  .recipes__container .order__list > li {
    font-size: 14px;
  }
}

.recipes__step {
  width: 100%;
  background: #efebe8;
  padding: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.recipes__step > li {
  color: #aaa;
  font-size: 14px;
}

.recipes__step li + li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-left: 10px;
}

.recipes__step li + li:before {
  content: ">";
  display: block;
  margin-right: 10px;
  color: #aaa;
}

.recipes__step .current {
  color: #b7855c;
  font-weight: bold;
}

.plus-minus-button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-left: auto;
  border: 1px solid #b7855c;
  border-radius: 5px;
  overflow: hidden;
}

.plus-minus-button > div {
  padding: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #b7855c;
  font-size: 20px;
}

.plus-minus-button > div:first-child {
  border-right: 1px solid #b7855c;
}

.ingredients-details {
  width: 100%;
}

.ingredients-details .detail {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.ingredients-details .detail__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
}

.ingredients-details .detail__item > label {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  height: 44px;
  padding: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  overflow: hidden;
  background: #999;
  color: #fff;
  font-size: 14px;
}

.ingredients-details .detail__item > input {
  width: 100%;
  height: 44px;
  border-left: none;
  display: block;
  padding: 0 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  overflow: hidden;
}

.ingredients-details .detail__item > textarea {
  width: 100%;
  height: 44px;
  border-left: none;
  display: block;
  padding: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  overflow: hidden;
}

.ingredients-details .detail .detail__item + .detail__item {
  width: 30%;
  margin-left: 10px;
}

.ingredients-details .detail + .detail {
  margin-top: 10px;
}

.ingredient__image {
  width: 100%;
  padding: 10px 20px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: #efebe8 !important;
  -webkit-print-color-adjust: exact;
}

.recipes__wrapper {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

@media screen and (max-width: 767px) {
  .recipes__wrapper {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}

@media screen and (max-width: 767px) {
  .pickup-recipes {
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    padding-bottom: 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }
}

.pickup-recipes::-webkit-scrollbar {
  display: none;
}

.recipes__card {
  width: calc((100% - 30px) / 3);
  height: 350px;
  padding: 2px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 5px;
  -webkit-box-shadow: 0 0 5px #ccc;
  box-shadow: 0 0 5px #ccc;
  overflow: hidden;
  background: #fff6ee;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  margin-right: 15px;
  margin-bottom: 15px;
}

.recipes__card:nth-child(3n) {
  margin-right: 0;
}

.recipes__card:hover {
  opacity: 0.8;
  -webkit-box-shadow: 0 0 10px #666;
  box-shadow: 0 0 10px #666;
}

.recipes__card .card__header {
  position: relative;
}

.recipes__card .card__header .viewcount {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 12px;
  background: #fff;
  border-radius: 26px;
  padding: 5px 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.recipes__card .card__body {
  padding: 20px;
}

.recipes__card .card__title {
  font-size: 18px;
}

.recipes__card .card__description {
  font-size: 14px;
  margin-top: 10px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

@media screen and (max-width: 1024px) {
  .recipes__card {
    height: 300px;
  }
  .recipes__card .card__body {
    padding: 10px 15px;
  }
  .recipes__card .card__title {
    font-size: 16px;
    letter-spacing: 0.01px;
  }
  .recipes__card .card__description {
    font-size: 12px;
    margin-top: 10px;
    letter-spacing: 0.01px;
  }
}

@media screen and (max-width: 767px) {
  .recipes__card {
    width: 100%;
    height: auto;
  }
}

.recipes__pickup {
  position: relative;
  width: calc((100% - 30px) / 3);
  padding-bottom: calc((100% - 30px) / 3);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 5px;
  overflow: hidden;
  margin-right: 15px;
  margin-bottom: 15px;
  -webkit-box-shadow: 0 0 5px #ccc;
  box-shadow: 0 0 5px #ccc;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

.recipes__pickup:nth-child(3n) {
  margin-right: 0;
}

.recipes__pickup:hover {
  opacity: 0.8;
  -webkit-box-shadow: 0 0 10px #666;
  box-shadow: 0 0 10px #666;
}

.recipes__pickup .card__body {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.7);
  padding: 15px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.recipes__pickup .card__title {
  max-width: 100%;
  overflow: hidden;
  color: #fff;
  font-size: 16px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media screen and (max-width: 1024px) {
  .recipes__pickup .card__body {
    padding: 10px;
  }
  .recipes__pickup .card__title {
    font-size: 14px;
  }
}

@media screen and (max-width: 767px) {
  .recipes__pickup {
    width: 80%;
    padding-bottom: 80%;
    -ms-flex-negative: 0;
    flex-shrink: 0;
  }
  .recipes__pickup:nth-child(3n) {
    margin-right: 10px;
  }
}

.recipes-top-feature {
  background: #fff;
  width: 100%;
}

.search-buttons {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.search-buttons .button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: calc((100% - 30px) / 3);
  padding: 15px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: #352511;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  border-radius: 5px;
}

.search-buttons .button:hover {
  opacity: 0.8;
}

.search-buttons .button > p {
  color: #fff;
  font-size: 25px;
}

.search-buttons .button .icon {
  width: 60px;
  margin-right: 10px;
}

.search-buttons .button + .button {
  margin-left: 15px;
}

@media screen and (max-width: 1024px) {
  .search-buttons .button > p {
    font-size: 20px;
  }
  .search-buttons .button .icon {
    width: 40px;
    margin-right: 10px;
  }
}

@media screen and (max-width: 767px) {
  .search-buttons {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .search-buttons .button {
    width: 100%;
  }
  .search-buttons .button > p {
    font-size: 16px;
    width: 120px;
  }
  .search-buttons .button + .button {
    margin-left: 0;
    margin-top: 10px;
  }
}

.recipes__features {
  width: 100%;
}

.recipes__features .feature {
  display: block;
  width: 100%;
  position: relative;
  margin-top: 20px;
  width: 100%;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

.recipes__features .feature:hover {
  opacity: 0.8;
}

.recipes__features .feature__meta {
  position: absolute;
  top: 0;
  left: 0;
  width: 47%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  padding: 100px 30px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

@media screen and (max-width: 1024px) {
  .recipes__features .feature__meta {
    padding: 60px 30px;
  }
}

@media screen and (max-width: 767px) {
  .recipes__features .feature__meta {
    width: 64%;
    background: rgba(0, 0, 0, 0.5);
    padding: 20px 10px;
  }
}

.recipes__features .feature__title {
  color: #fff;
  font-size: 28px;
  line-height: 1.7;
}

@media screen and (max-width: 1024px) {
  .recipes__features .feature__title {
    font-size: 22px;
    letter-spacing: 0.01px;
  }
}

@media screen and (max-width: 767px) {
  .recipes__features .feature__title {
    font-size: 14px;
  }
}

.recipes__features .feature__description {
  color: #fff;
  font-size: 16px;
  margin-top: 30px;
  line-height: 1.7;
}

@media screen and (max-width: 1024px) {
  .recipes__features .feature__description {
    font-size: 14px;
  }
}

@media screen and (max-width: 767px) {
  .recipes__features .feature__description {
    margin-top: 10px;
    font-size: 12px;
  }
}

.admin__nav {
  width: 100%;
  height: 50px;
  position: fixed;
  top: 65px;
  left: 0;
  background: #b7855c;
  -webkit-box-shadow: 0 3px 5px #ccc;
  box-shadow: 0 3px 5px #ccc;
  z-index: 1000;
}

.admin__nav .nav__item,
.admin__nav .nav__item-parent {
  position: relative;
  z-index: 10;
  background: #b7855c;
  display: block;
  line-height: 50px;
  color: #fff;
  padding: 0 20px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-left: 1px solid #fff;
  cursor: pointer;
}

@media screen and (max-width: 1024px) {
  .admin__nav .nav__item,
  .admin__nav .nav__item-parent {
    padding: 0 10px;
    font-size: 14px;
  }
}

.admin__nav .nav__item:hover,
.admin__nav .nav__item-parent:hover {
  color: #fff;
  text-decoration: underline;
}

.admin__nav .nav__item-parent {
  padding: 0;
}

.admin__nav .nav__item-parent:hover {
  color: #fff;
  text-decoration: none;
}

.admin__nav .nav__item-parent:hover .nav__item-child {
  visibility: visible;
  opacity: 1;
  top: 100%;
}

.admin__nav .nav__item-parent > p {
  position: relative;
  z-index: 10;
  width: 100%;
  line-height: 50px;
  padding: 0 20px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #fff;
  background: #b7855c;
}

.admin__nav .nav__item-parent .nav__item-child {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 150%;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
}

.admin__nav .nav__item-parent .nav__item-child > li {
  background: rgba(0, 0, 0, 0.9);
  color: #fff;
  font-size: 12px;
}

.admin__nav .nav__item-parent .nav__item-child > li > a {
  display: block;
  padding: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.admin__nav .nav__item-parent .nav__item-child > li > a:hover {
  color: #fff;
  text-decoration: underline;
}

.admin__nav .nav__item-parent .nav__item-child li + li {
  border-top: 1px solid #ddd;
}

.admin__container {
  min-height: 100vh;
}

.admin__wrapper {
  background: #fff;
  padding: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.admin__wrapper .packages-card {
  width: 100%;
  display: block;
  background: #efefef;
  padding: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

.admin__wrapper .packages-card:hover {
  opacity: 0.8;
}

.admin__wrapper .packages-card > h2 {
  font-size: 20px;
}

.admin__wrapper .packages-card > p {
  font-size: 16px;
  margin-top: 10px;
  padding-left: 20px;
}

.users__alt-action-links {
  margin-top: 40px;
  width: 100%;
}

.users__action-link + .users__action-link {
  margin-top: 10px;
}

.users__action-link {
  color: #ff9201;
  text-align: center;
  text-decoration: underline;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

.users__action-link:hover {
  opacity: 0.6;
}

.products {
  width: 100%;
}

.products__tag {
  display: block;
}

.products__tag > label {
  display: block;
  padding: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-shadow: 0 0 5px #ccc;
  box-shadow: 0 0 5px #ccc;
  cursor: pointer;
  border-radius: 5px;
  margin-top: 10px;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

.products__tag > label:hover {
  opacity: 0.8;
}

.products__tag > input[type="checkbox"] {
  display: none;
}

.products__tag input[type="checkbox"]:checked + label {
  background: #34314c;
  color: #fff;
}

.products__header {
  width: 100%;
}

.products-page .product {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

@media screen and (max-width: 767px) {
  .products-page .product {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}

.products-page .product__image-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  width: 35%;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

@media screen and (max-width: 767px) {
  .products-page .product__image-wrap {
    width: 100%;
  }
}

.products-page .product__image-wrap .main-image {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 336px;
  height: 336px;
  overflow: hidden;
}

@media screen and (max-width: 1024px) {
  .products-page .product__image-wrap .main-image {
    width: 270px;
  }
}

@media screen and (max-width: 767px) {
  .products-page .product__image-wrap .main-image {
    width: 100%;
  }
}

.products-page .product__image-wrap .main-image > img {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

.products-page .product__image-wrap .sub-image {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  margin-top: 10px;
  cursor: pointer;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.products-page .product__image-wrap .sub-image + .sub-image {
  margin-left: 10px;
}

.products-page .product__description-wrap {
  width: 60%;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

@media screen and (max-width: 767px) {
  .products-page .product__description-wrap {
    width: 100%;
    margin-top: 10px;
  }
}

.products-page .product__description-wrap .lead {
  font-size: 18px;
}

@media screen and (max-width: 1024px) {
  .products-page .product__description-wrap .lead {
    font-size: 14px;
  }
}

.products-page .product__description-wrap .title {
  font-size: 36px;
  margin-top: 10px;
}

@media screen and (max-width: 1024px) {
  .products-page .product__description-wrap .title {
    font-size: 28px;
  }
}

@media screen and (max-width: 767px) {
  .products-page .product__description-wrap .title {
    font-size: 20px;
  }
}

.products-page .product__description-wrap .label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.products-page .product__description-wrap .label .label-logo {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 35px;
  z-index: 10;
}

.products-page .product__description-wrap .label .label-name {
  position: relative;
  padding: 5px 20px 5px 20px;
  margin-left: -15px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: #03243f;
  font-size: 12px;
  color: #fff;
}

.products-page .product__description-wrap .label .label-name:before {
  content: "";
  width: 0px;
  height: 0px;
  z-index: 1;
  position: absolute;
  top: 0;
  right: 0;
  border-width: 13px 10px 13px 0px;
  border-color: transparent #fff transparent transparent;
  border-style: solid;
}

.products-page .product__description-wrap > p {
  margin-top: 10px;
  font-size: 16px;
}

@media screen and (max-width: 1024px) {
  .products-page .product__description-wrap > p {
    font-size: 14px;
  }
}

.products-page .product__description-wrap .product-outer-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 20px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.products-page .product__description-wrap .shopping-buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-item-align: center;
  align-self: center;
  position: relative;
}

.products-page .product__description-wrap .button-webshop {
  font-size: 12px;
  color: #fff;
  background: #c41a22;
  padding: 5px 30px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 26px;
  text-align: center;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  cursor: pointer;
}

.products-page .product__description-wrap .button-webshop:hover {
  opacity: 0.8;
}

.products-page .product__description-wrap .shopping-check:checked + .ec-list {
  opacity: 1;
  visibility: visible;
}

.products-page .product__description-wrap .ec-list {
  position: absolute;
  top: -140px;
  left: 0;
  width: 60%;
  background: #fff;
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 25% 80%, 24% 100%, 19% 80%, 0 80%);
  clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 25% 80%, 24% 100%, 19% 80%, 0 80%);
  -webkit-box-shadow: 0 0 5px #ccc;
  box-shadow: 0 0 5px #ccc;
  padding: 20px 20px 40px;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.products-page .product__description-wrap .ec-list .ttl {
  font-size: 14px;
}

.products-page .product__description-wrap .ec-list .shops {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-top: 10px;
}

.products-page .product__description-wrap .ec-list .shop {
  width: calc((100% - 20px) / 2);
}

.products-page .product__description-wrap .ec-list .shop__logo {
  width: 100%;
}

.products-page .product__description-wrap .ec-list .shop + .shop {
  margin-left: 20px;
}

.products-page .product__description-wrap .button-store,
.products-page .product__description-wrap .button-fax {
  margin-left: 10px;
  font-size: 12px;
  color: #34314c;
  background: #fff;
  border: 1px solid #ddd;
  padding: 5px 30px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 26px;
  text-align: center;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

.products-page .product__description-wrap .button-store:hover,
.products-page .product__description-wrap .button-fax:hover {
  opacity: 0.8;
}

.products-page .product__description-wrap .material {
  margin-top: 10px;
  width: 100%;
  background: #fff6ee;
  padding: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.products-page .product__description-wrap .material__title {
  font-weight: bold;
  font-size: 14px;
}

.products-page .product__description-wrap .material__content {
  margin-top: 10px;
  font-size: 12px;
}

.products-page .product__bar {
  margin: 40px 0;
  border-color: #ddd;
}

.products-page .product__recipes .titles {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.products-page .product__recipes .titles > h2 {
  font-size: 24px;
}

.products-page .product__recipes .titles > p {
  margin-left: auto;
}

@media screen and (max-width: 1024px) {
  .products-page .product__recipes .titles {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .products-page .product__recipes .titles > h2 {
    font-size: 20px;
  }
  .products-page .product__recipes .titles > p {
    margin-left: 0;
    margin-top: 10px;
  }
}

.products-page .product-description {
  width: 100%;
}

.products-page .product-description .sub-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 26px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-top: 20px;
}

.products-page .product-description .sub-title:before {
  content: "";
  display: block;
  width: 7px;
  height: 36px;
  background: #34314c;
  border-radius: 7px;
  margin-right: 10px;
}

@media screen and (max-width: 1024px) {
  .products-page .product-description .sub-title {
    font-size: 20px;
  }
}

.products-page .product-description .sub-lead {
  font-size: 18px;
  padding: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  line-height: 1.7;
  background: #fff6ee;
}

@media screen and (max-width: 1024px) {
  .products-page .product-description .sub-lead {
    font-size: 14px;
  }
}

.products-page .product-description > ol,
.products-page .product-description > ol li {
  list-style-type: decimal;
}

.products-page .product-description > ol {
  margin: 20px 0;
  padding-left: 1.5em;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.products-page .product-description > ol li + li {
  margin-top: 10px;
}

.products-page .product-description > h3 {
  font-size: 20px;
  margin: 20px 0 10px;
}

@media screen and (max-width: 1024px) {
  .products-page .product-description > ol,
  .products-page .product-description > ol li,
  .products-page .product-description > p {
    font-size: 14px;
  }
  .products-page .product-description > h3 {
    font-size: 18px;
  }
}

.products-page .product-description .single-table {
  margin: 20px 0;
  width: 100%;
  background: #fff6ee;
  border-radius: 5px;
  overflow: hidden;
}

.products-page .product-description .single-table .table-head {
  background: #b7855c;
}

.products-page .product-description .single-table .table-head > h3 {
  width: 100%;
  color: #fff;
  font-size: 24px;
  padding: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
}

@media screen and (max-width: 1024px) {
  .products-page .product-description .single-table .table-head > h3 {
    font-size: 20px;
  }
}

.products-page .product-description .single-table .table-body {
  padding: 15px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.products-page .product-description .single-table .table-body .table-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.products-page .product-description .single-table .table-body .table-content > p {
  font-size: 14px;
}

.products-page .product-description .single-table .table-body .table-content > p:first-child {
  width: 30%;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.products-page .product-description .single-table .table-body .table-content + .table-content {
  margin-top: 10px;
}

.products-page .product-description .single-table .red-label {
  background: #c41a22;
}

.products-page .product-description .single-table + .single-table {
  margin-left: 10px;
}

@media screen and (max-width: 1024px) {
  .products-page .product-description .single-table + .single-table {
    margin-left: 0;
  }
}

.product-card-title {
  width: 60%;
}

@media screen and (max-width: 767px) {
  .product-card-title {
    width: 100%;
  }
}

.tags {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 10px;
}

.tags__item {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  display: block;
  margin-bottom: 10px;
}

.tags__item > label {
  display: block;
  padding: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-shadow: 0 0 5px #ccc;
  box-shadow: 0 0 5px #ccc;
  font-size: 14px;
  cursor: pointer;
  border-radius: 5px;
  margin-right: 10px;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

.tags__item > label:hover {
  opacity: 0.8;
}

.tags__item > input[type="checkbox"] {
  display: none;
}

.tags__item input[type="checkbox"]:checked + label {
  background: #34314c;
  color: #fff;
}

.tags__wrap {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.tags__wrap .tag {
  width: calc((100% - 60px) / 7);
  -ms-flex-negative: 0;
  flex-shrink: 0;
  background: #efefef;
  border: 1px solid #ddd;
  margin-right: 10px;
  padding: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 5px;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  margin-bottom: 10px;
}

.tags__wrap .tag:hover {
  opacity: 0.6;
}

.tags__wrap .tag:nth-child(7n) {
  margin-right: 0;
}

.tags__wrap .tag__title {
  font-size: 16px;
  text-align: center;
}

.recipes-tag {
  width: calc((100% - 30px) / 4);
  -ms-flex-negative: 0;
  flex-shrink: 0;
  background: #352511;
  margin-right: 10px;
  padding: 20px 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 5px;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  margin-bottom: 10px;
}

.recipes-tag:hover {
  opacity: 0.6;
}

.recipes-tag:nth-child(4n) {
  margin-right: 0;
}

.recipes-tag__title {
  width: 100%;
  font-size: 16px;
  text-align: center;
  color: #fff;
}

.recipes-tag .tag-size {
  font-size: 12px;
}

@media screen and (max-width: 767px) {
  .recipes-tag {
    width: calc((100% - 10px) / 2);
  }
  .recipes-tag:nth-child(7n) {
    margin-right: 10px;
  }
  .recipes-tag:nth-child(2n) {
    margin-right: 0;
  }
}

.news__container {
  width: 100%;
  min-height: 20vh;
  background: #fff;
  padding: 20px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 5px;
  -webkit-box-shadow: 0 0 5px #ccc;
  box-shadow: 0 0 5px #ccc;
}

.news__card {
  width: 100%;
  border: 1px solid #ddd;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 5px;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  background: #eee;
}

.news__card:hover {
  opacity: 0.6;
}

.news__card > a {
  display: block;
  padding: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.news__card > a > h2 {
  font-size: 20px;
}

.news__card > a > p {
  margin-top: 5px;
  font-size: 14px;
}

.news__card + .news__card {
  margin-top: 10px;
}

.news__title {
  font-size: 30px;
  padding-bottom: 5px;
  border-bottom: 2px solid #34314c;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-bottom: 20px;
}

@media screen and (max-width: 1024px) {
  .news__title {
    font-size: 25px;
  }
}

@media screen and (max-width: 767px) {
  .news__title {
    font-size: 20px;
  }
}

.news {
  width: 100%;
}

.news .news-card {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  border-bottom: 1px solid #ddd;
  padding: 40px 0;
}

.news .news-card:hover {
  opacity: 0.8;
}

@media screen and (max-width: 767px) {
  .news .news-card {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
  }
}

.news .news-card > .flex {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

.news .news-card .title {
  width: 100%;
  color: #34314c;
  margin-left: 15px;
  padding: 5px 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 14px;
}

@media screen and (max-width: 767px) {
  .news .news-card .title {
    margin-left: 0;
    margin-top: 10px;
  }
}

.news .news-card .date {
  width: 110px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  margin-left: 15px;
  white-space: nowrap;
  padding: 5px 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 14px;
}

.news .news-card .tag {
  width: 100px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding: 5px 10px;
  border-radius: 5px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: #ff9201;
  color: #fff;
  font-size: 12px;
  text-align: center;
}

.news-meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  margin-bottom: 10px;
}

.news-meta .news-meta-tag {
  padding: 5px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 12px;
  background: #c41a22;
  color: #fff;
  border-radius: 3px;
}

.news-meta .news-meta-date {
  font-size: 14px;
  margin-left: 10px;
}

.story {
  width: 100%;
}

.story .story-wrap {
  width: 100%;
}

.story .story-wrap p {
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: 0.04rem;
}

@media screen and (max-width: 1024px) {
  .story .story-wrap p {
    font-size: 14px;
  }
}

@media screen and (max-width: 767px) {
  .story .story-wrap p {
    font-size: 14px;
  }
}

.story__header {
  width: 100%;
  max-height: 580px;
  overflow: hidden;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
}

.story__header > picture {
  width: 100%;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.story__header > picture > img {
  width: 100%;
}

.story__title {
  width: 30%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

@media screen and (max-width: 1024px) {
  .story__title {
    width: 35%;
  }
}

@media screen and (max-width: 767px) {
  .story__title {
    width: 45%;
  }
}

.story__content-title {
  font-size: 36px;
  margin-bottom: 32px;
}

@media screen and (max-width: 1024px) {
  .story__content-title {
    font-size: 30px;
    margin-bottom: 18px;
  }
}

@media screen and (max-width: 767px) {
  .story__content-title {
    font-size: 24px;
    margin-bottom: 12px;
  }
}

.story__content-sub-title {
  display: inline-block;
  font-size: 24px;
  padding-bottom: 5px;
  border-bottom: 1px solid #34314c;
  margin-bottom: 12px;
}

@media screen and (max-width: 1024px) {
  .story__content-sub-title {
    font-size: 20px;
  }
}

@media screen and (max-width: 767px) {
  .story__content-sub-title {
    font-size: 17px;
  }
}

.story__content-mini-title {
  display: inline-block;
  font-size: 14px;
  padding: 5px 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: #c41a22;
  color: #fff;
  margin-bottom: 12px;
}

@media screen and (max-width: 1024px) {
  .story__content-mini-title {
    font-size: 14px;
  }
}

@media screen and (max-width: 767px) {
  .story__content-mini-title {
    font-size: 12px;
  }
}

.story__company-title {
  font-size: 26px;
  margin-bottom: 12px;
}

.story__company {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  border: 1px solid #34314c;
  padding: 30px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.story__company .content {
  width: 70%;
}

.story__company .logo-black {
  width: 20%;
  margin-left: auto;
}

.story__company .logo-black > img {
  width: 100%;
}

@media screen and (max-width: 1024px) {
  .story__company {
    padding: 20px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .story__company .content {
    width: 100%;
  }
  .story__company .logo-black {
    margin: 20px 0 0;
  }
}

.story__data {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.story__data > dt {
  width: 25%;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  margin-top: 10px;
}

.story__data > dd {
  width: calc(75% - 10px);
  -ms-flex-negative: 0;
  flex-shrink: 0;
  margin-top: 10px;
  margin-left: 10px;
}

.story__data > dd > a {
  text-decoration: underline;
}

@media screen and (max-width: 767px) {
  .story__data > dt {
    font-size: 14px;
  }
  .story__data > dd {
    font-size: 14px;
  }
}

.story .cl-ir-section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.story .cl-ir-section .content {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 70%;
}

.story .cl-ir-section .image {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: calc(30% - 15px);
  margin-left: 15px;
}

.story .cl-ir-section .image > img {
  width: 100%;
}

@media screen and (max-width: 1024px) {
  .story .cl-ir-section .content {
    width: 60%;
  }
  .story .cl-ir-section .image {
    width: calc(40% - 15px);
  }
}

@media screen and (max-width: 767px) {
  .story .cl-ir-section {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .story .cl-ir-section .content {
    width: 100%;
  }
  .story .cl-ir-section .image {
    width: 100%;
    margin: 10px 0 0;
  }
}

.story .cl-ir-section.image-bottom {
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
}

.story .cr-il-section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
  margin-top: 30px;
}

.story .cr-il-section .content {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 70%;
}

.story .cr-il-section .image {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: calc(30% - 15px);
  margin-right: 15px;
}

.story .cr-il-section .image > img {
  width: 100%;
}

@media screen and (max-width: 1024px) {
  .story .cr-il-section {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
  }
  .story .cr-il-section .content {
    width: 60%;
  }
  .story .cr-il-section .image {
    width: calc(40% - 15px);
  }
}

@media screen and (max-width: 767px) {
  .story .cr-il-section {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .story .cr-il-section .content {
    width: 100%;
  }
  .story .cr-il-section .image {
    width: 100%;
    margin: 10px 0 0;
  }
}

.story .cr-il-section.wide-image .content {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 50%;
}

.story .cr-il-section.wide-image .image {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: calc(50% - 15px);
  margin-right: 15px;
}

.story .cr-il-section.wide-image .image > img {
  width: 100%;
}

.story .single-section {
  width: 100%;
}

.story .single-section .image {
  margin-top: 20px;
}

.story .single-section .image > img {
  width: 100%;
}

.story .single-section .image + .image {
  margin-left: 10px;
}

.story .single-section .trash-list {
  width: 100%;
  margin-top: 40px;
  padding: 10px;
  padding-left: 40px;
  border: 1px solid #34314c;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

@media screen and (max-width: 767px) {
  .story .single-section .trash-list {
    margin-top: 24px;
  }
}

.story .single-section .trash-list__title {
  display: inline-block;
  position: relative;
  font-size: 16px;
  background: #fff;
  top: -32px;
  left: -16px;
  padding: 5px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

@media screen and (max-width: 767px) {
  .story .single-section .trash-list__title {
    font-size: 14px;
    top: -28px;
  }
}

.story .single-section .trash-list > ol {
  margin-top: -24px;
}

.story .single-section .trash-list > ol > li {
  list-style: decimal;
  font-size: 14px;
}

@media screen and (max-width: 767px) {
  .story .single-section .trash-list > ol > li {
    font-size: 12px;
  }
}

.story .single-section .trash-list > ol li + li {
  margin-top: 20px;
}

.story .why-list {
  width: 100%;
  padding-left: 20px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.story .why-list > li {
  list-style: decimal;
  font-size: 14px;
}

@media screen and (max-width: 767px) {
  .story .why-list > li {
    font-size: 12px;
  }
}

.story .why-list li + li {
  margin-top: 10px;
}

.story .one-point {
  display: inline-block;
  background: #c41a22;
  margin-bottom: 5px;
  padding: 3px 5px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #fff;
  font-size: 12px !important;
}

.story .image-city {
  width: 100%;
  padding-bottom: 300px;
  background: url(https://d3risj25c02mqp.cloudfront.net/material/stories/city.jpg) no-repeat center right/cover;
}

@media screen and (max-width: 767px) {
  .story .image-city {
    padding-bottom: 150px;
    background: url(https://d3risj25c02mqp.cloudfront.net/material/stories/city_sp.jpg) no-repeat center right/cover;
  }
}

.voices-page .voices {
  width: 100%;
}

.voices-page .voice {
  position: relative;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: #fff;
  padding: 15px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 5px;
  -webkit-box-shadow: 0 0 5px #ccc;
  box-shadow: 0 0 5px #ccc;
}

@media screen and (max-width: 767px) {
  .voices-page .voice {
    display: block;
  }
}

.voices-page .voice__image {
  width: 300px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  margin-right: 10px;
}

@media screen and (max-width: 767px) {
  .voices-page .voice__image {
    width: 100%;
    margin: 0;
    margin-bottom: 10px;
  }
}

.voices-page .voice__content .title {
  font-size: 20px;
  color: #34314c;
}

.voices-page .voice__content .content {
  margin-top: 10px;
  font-size: 16px;
  color: #34314c;
}

.voices-page .voice__content .from {
  margin-top: 10px;
  font-size: 14px;
  color: #34314c;
}

.voices-page .voice .edit {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 5px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: #1c23b8;
  color: #fff;
  border-radius: 3px;
  font-size: 14px;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

.voices-page .voice .edit:hover {
  opacity: 0.8;
}

.voices-page .voice .is_public {
  font-size: 12px;
  color: #c41a22;
  padding: 5px;
  border: 1px solid #c41a22;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.voices-page .voice + .voice {
  margin-top: 15px;
}

.stores-page .store_location__ttl {
  width: 100%;
  margin-top: 40px;
  background: #f8b39e;
  padding: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
  border-radius: 5px;
}

.stores-page .stores {
  width: 100%;
}

.stores-page .store {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: #fff;
  border-radius: 5px;
}

@media screen and (max-width: 767px) {
  .stores-page .store {
    display: block;
  }
}

.stores-page .store__img {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 300px;
}

.stores-page .store__img > img {
  width: 100%;
}

@media screen and (max-width: 767px) {
  .stores-page .store__img {
    width: 100%;
  }
}

.stores-page .store__meta {
  width: 100%;
  margin-left: 20px;
}

@media screen and (max-width: 767px) {
  .stores-page .store__meta {
    margin-left: 0;
    margin-top: 10px;
  }
}

.stores-page .store__name {
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: bold;
}

@media screen and (max-width: 767px) {
  .stores-page .store__name {
    font-size: 16px;
  }
}

.stores-page .store__data {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.stores-page .store__data > dt {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 90px;
  font-size: 14px;
}

@media screen and (max-width: 767px) {
  .stores-page .store__data > dt {
    width: 65px;
    font-size: 12px;
  }
}

.stores-page .store__data > dd {
  margin-left: 10px;
  font-size: 14px;
}

@media screen and (max-width: 767px) {
  .stores-page .store__data > dd {
    font-size: 12px;
  }
}

.stores-page .store .store__data + .store__data {
  margin-top: 10px;
}

.stores-page .store .edit {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 5px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: #1c23b8;
  color: #fff;
  border-radius: 3px;
  font-size: 14px;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

.stores-page .store .edit:hover {
  opacity: 0.8;
}

.stores-page .store + .store {
  margin-top: 20px;
}

.gift-page {
  padding-top: 0;
}

.gift-page > .container {
  background: #fff;
  padding: 30px 15px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.gift-page h1 {
  font-size: 32px;
}

@media screen and (max-width: 767px) {
  .gift-page h1 {
    font-size: 26px;
  }
}

.gift-page .target > p {
  margin-top: 10px;
  font-size: 24px;
  font-weight: bold;
}

@media screen and (max-width: 767px) {
  .gift-page .target > p {
    font-size: 20px;
  }
}

.gift-page .products {
  margin-top: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

@media screen and (max-width: 767px) {
  .gift-page .products {
    display: block;
  }
}

.gift-page .products .product {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: calc((100% - 20px) / 3);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 10px;
  margin-left: 10px;
}

@media screen and (max-width: 767px) {
  .gift-page .products .product {
    width: 100%;
    margin-left: 0;
  }
}

.gift-page .products .product:first-child {
  margin-left: 0;
}

.gift-page .products .product:nth-child(4n) {
  margin-left: 0;
}

.gift-page .products .product .image {
  position: relative;
  width: 100%;
  min-height: 203px;
  background: #000;
  overflow: hidden;
}

.gift-page .products .product .image > img {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

@media screen and (max-width: 767px) {
  .gift-page .products .product .image > img {
    position: static;
    -webkit-transform: none;
    transform: none;
  }
}

.gift-page .products .product__desc {
  min-height: 120px;
  padding: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: #fff6ee;
}

.gift-page .products .product__desc .ttl {
  font-size: 18px;
  font-weight: bold;
}

.gift-page .products .product__desc > p {
  font-size: 14px;
  line-height: 1.7;
}

.gift-page .flows {
  margin-top: 20px;
}

.gift-page .flows .flow__ttl {
  margin-top: 20px;
  font-size: 24px;
  padding-left: 10px;
  border-left: 5px solid #b7855c;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.gift-page .flows .flow__subttl {
  margin-top: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 16px;
}

.gift-page .flows .flow__subttl:before {
  content: "【";
  display: block;
}

.gift-page .flows .flow__subttl:after {
  content: "】";
  display: block;
}

.gift-page .flows .flow__list {
  margin-top: 10px;
  padding-left: 20px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.gift-page .flows .flow__list > li {
  font-size: 14px;
  list-style-type: decimal;
  line-height: 1.7;
}

.gift-page .flows .flow > p {
  font-size: 14px;
  margin-top: 10px;
}

.gift-page .flows .flow .bank > p {
  font-size: 14px;
  margin-top: 10px;
}

.gift-page .flows .flow + .flow {
  margin-top: 20px;
}

.gift-page .excel {
  margin-top: 20px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 3px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.gift-page .excel > p {
  margin-bottom: 10px;
  font-size: 16px;
}

.gift-page .excel .btn {
  text-decoration: underline;
  color: #ff9201;
  font-size: 14px;
}

.wave-wrapper {
  position: absolute;
  width: 100%;
  height: 200px;
  overflow: hidden;
  bottom: 0;
  left: 0;
  z-index: 10;
}

@media screen and (max-width: 1024px) {
  .wave-wrapper {
    display: none;
  }
}

.wave-wrapper .wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
}

.wave-wrapper .wave1 {
  -webkit-animation: animate1 200s linear infinite;
  animation: animate1 200s linear infinite;
  bottom: 0;
  z-index: 1000;
  opacity: 1;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

.wave-wrapper .wave2 {
  -webkit-animation: animate2 100s linear infinite;
  animation: animate2 100s linear infinite;
  bottom: 10px;
  z-index: 999;
  opacity: 0.3;
  -webkit-animation-delay: -5s;
  animation-delay: -5s;
}

.wave-wrapper .wave3 {
  -webkit-animation: animate1 200s linear infinite;
  animation: animate1 200s linear infinite;
  bottom: 0px;
  z-index: 998;
  opacity: 0.2;
  -webkit-animation-delay: -2s;
  animation-delay: -2s;
}

.wave-wrapper .wave4 {
  -webkit-animation: animate2 100s linear infinite;
  animation: animate2 100s linear infinite;
  bottom: 20px;
  z-index: 997;
  opacity: 0.5;
  -webkit-animation-delay: -5s;
  animation-delay: -5s;
}

@-webkit-keyframes animate1 {
  0% {
    background-position-x: 0;
  }
  50% {
    background-position-x: 1000%;
  }
  100% {
    background-position-x: 0;
  }
}

@keyframes animate1 {
  0% {
    background-position-x: 0;
  }
  50% {
    background-position-x: 1000%;
  }
  100% {
    background-position-x: 0;
  }
}

@-webkit-keyframes animate2 {
  0% {
    background-position-x: 0;
  }
  50% {
    background-position-x: 1000%;
  }
  100% {
    background-position-x: 0;
  }
}

@keyframes animate2 {
  0% {
    background-position-x: 0;
  }
  50% {
    background-position-x: 1000%;
  }
  100% {
    background-position-x: 0;
  }
}

.image-crossfader {
  width: 100%;
  overflow: hidden;
  position: relative;
  height: 0;
  padding-bottom: 540px;
}

@media screen and (max-width: 767px) {
  .image-crossfader {
    padding-bottom: 95%;
  }
}

.image-crossfader-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.image-crossfader-inner {
  background-size: cover;
  background-position: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0;
  -webkit-transition: opacity 3.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: opacity 3.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.image-crossfader-inner .image-crossfader-bg {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: -webkit-transform 3.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: -webkit-transform 3.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: transform 3.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: transform 3.5s cubic-bezier(0.455, 0.03, 0.515, 0.955),
    -webkit-transform 3.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.image-crossfader-inner.is-visible {
  opacity: 1;
}

.image-crossfader-inner.is-visible .image-crossfader-bg {
  z-index: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}

.image-crossfader-inner:nth-child(1) .image-crossfader-bg {
  background-image: url("https://d3risj25c02mqp.cloudfront.net/material/slide/01.jpg");
}

@media screen and (max-width: 1024px) {
  .image-crossfader-inner:nth-child(1) .image-crossfader-bg {
    background-image: url("https://d3risj25c02mqp.cloudfront.net/material/slide/01_tab.jpg");
  }
}

@media screen and (max-width: 767px) {
  .image-crossfader-inner:nth-child(1) .image-crossfader-bg {
    background-image: url("https://d3risj25c02mqp.cloudfront.net/material/slide/01_sp.jpg");
  }
}

.image-crossfader-inner:nth-child(2) .image-crossfader-bg {
  background-image: url("https://d3risj25c02mqp.cloudfront.net/material/slide/02.jpg");
}

@media screen and (max-width: 1024px) {
  .image-crossfader-inner:nth-child(2) .image-crossfader-bg {
    background-image: url("https://d3risj25c02mqp.cloudfront.net/material/slide/02_tab.jpg");
  }
}

@media screen and (max-width: 767px) {
  .image-crossfader-inner:nth-child(2) .image-crossfader-bg {
    background-image: url("https://d3risj25c02mqp.cloudfront.net/material/slide/02_sp.jpg");
  }
}

.image-crossfader-inner:nth-child(3) .image-crossfader-bg {
  background-image: url("https://d3risj25c02mqp.cloudfront.net/material/slide/03.jpg");
}

@media screen and (max-width: 1024px) {
  .image-crossfader-inner:nth-child(3) .image-crossfader-bg {
    background-image: url("https://d3risj25c02mqp.cloudfront.net/material/slide/03_tab.jpg");
  }
}

@media screen and (max-width: 767px) {
  .image-crossfader-inner:nth-child(3) .image-crossfader-bg {
    background-image: url("https://d3risj25c02mqp.cloudfront.net/material/slide/03_sp.jpg");
  }
}

.image-crossfader-inner:nth-child(4) .image-crossfader-bg {
  background-image: url("https://d3risj25c02mqp.cloudfront.net/material/slide/04.jpg");
}

@media screen and (max-width: 1024px) {
  .image-crossfader-inner:nth-child(4) .image-crossfader-bg {
    background-image: url("https://d3risj25c02mqp.cloudfront.net/material/slide/04_tab.jpg");
  }
}

@media screen and (max-width: 767px) {
  .image-crossfader-inner:nth-child(4) .image-crossfader-bg {
    background-image: url("https://d3risj25c02mqp.cloudfront.net/material/slide/04_sp.jpg");
  }
}

.tab_wrap {
  width: 100%;
}

input[type="radio"] {
  display: none;
}

.tab_area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.tab_area label {
  width: 100%;
  margin-right: 10px;
  display: inline-block;
  padding: 15px 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #999;
  background: #ddd;
  text-align: center;
  font-size: 15px;
  cursor: pointer;
  -webkit-transition: ease 0.2s opacity;
  transition: ease 0.2s opacity;
  border-radius: 5px;
}

.tab_area label:last-child {
  margin: 0;
}

.tab_area label:hover {
  opacity: 0.5;
}

@media screen and (max-width: 767px) {
  .tab_area label:hover {
    opacity: 1;
  }
}

.tab_panel {
  width: 100%;
  padding: 40px 0 0;
  display: none;
}

#tab1:checked ~ .tab_area .tab1_label {
  background: #b7855c;
  color: #fff;
}

#tab1:checked ~ .panel_area #panel1 {
  display: block;
}

#tab2:checked ~ .tab_area .tab2_label {
  background: #b7855c;
  color: #fff;
}

#tab2:checked ~ .panel_area #panel2 {
  display: block;
}

#tab3:checked ~ .tab_area .tab3_label {
  background: #b7855c;
  color: #fff;
}

#tab3:checked ~ .panel_area #panel3 {
  display: block;
}

#tab4:checked ~ .tab_area .tab4_label {
  background: #b7855c;
  color: #fff;
}

#tab4:checked ~ .panel_area #panel4 {
  display: block;
}

.introduction .tab_area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  padding-bottom: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.introduction .tab_area::-webkit-scrollbar {
  display: none;
}

.introduction .tab_area label {
  padding: 5px 8px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #fff;
  background: #9e9378;
  font-size: 15px;
  cursor: pointer;
  -webkit-transition: ease 0.2s;
  transition: ease 0.2s;
  border-radius: 25px;
  white-space: nowrap;
}

.introduction .tab_area label:hover {
  opacity: 0.8;
}

@media screen and (max-width: 1024px) {
  .introduction .tab_area label {
    font-size: 14px;
  }
}

@media screen and (max-width: 767px) {
  .introduction .tab_panel {
    padding: 10px 0 0;
  }
}

.introduction #tab1:checked ~ .tab_area .tab1_label {
  background: #a3892a;
  color: #fff;
}

.introduction #tab1:checked ~ .panel_area #panel1 {
  display: block;
}

.introduction #tab2:checked ~ .tab_area .tab2_label {
  background: #a3892a;
  color: #fff;
}

.introduction #tab2:checked ~ .panel_area #panel2 {
  display: block;
}

.introduction #tab3:checked ~ .tab_area .tab3_label {
  background: #a3892a;
  color: #fff;
}

.introduction #tab3:checked ~ .panel_area #panel3 {
  display: block;
}

.introduction #tab4:checked ~ .tab_area .tab4_label {
  background: #a3892a;
  color: #fff;
}

.introduction #tab4:checked ~ .panel_area #panel4 {
  display: block;
}

.sns__share {
  font-size: 40px;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

.sns__share:hover {
  opacity: 0.8;
}

.sns__share + .sns__share {
  margin-left: 10px;
}

.facebook {
  color: #3b5998;
}

.facebook:hover {
  color: #3b5998;
}

.twitter {
  color: #00aced;
}

.twitter:hover {
  color: #00aced;
}

.line {
  color: #00c300;
}

.line:hover {
  color: #00c300;
}