@charset "UTF-8";
.jumbotron {
  margin-bottom: 2rem;
  padding: 2rem 1rem;
  border-radius: .3rem;
  background-color: #e9ecef
}

@media (min-width:576px) {
  .jumbotron {
    padding: 4rem 2rem
  }
}

.jumbotron-fluid {
  padding-right: 0;
  padding-left: 0;
  border-radius: 0
}

.modal-open {
  overflow: hidden
}

.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto
}

.modal {
  display: none;
  z-index: 1050;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  outline: 0
}

.modal-dialog {
  position: relative;
  width: auto;
  margin: .5rem;
  pointer-events: none
}

.modal.fade .modal-dialog {
  transform: translate(0, -50px);
  transition: transform .3s ease-out
}

@media (prefers-reduced-motion:reduce) {
  .modal.fade .modal-dialog {
    transition: none
  }
}

.modal.show .modal-dialog {
  transform: none
}

.modal.modal-static .modal-dialog {
  transform: scale(1.02)
}

.modal-dialog-scrollable {
  display: flex;
  max-height: calc(100% - 1rem)
}

.modal-dialog-scrollable .modal-content {
  max-height: calc(100vh - 1rem);
  overflow: hidden
}

.modal-dialog-scrollable .modal-footer, .modal-dialog-scrollable .modal-header {
  flex-shrink: 0
}

.modal-dialog-scrollable .modal-body {
  overflow-y: auto
}

.modal-dialog-centered {
  display: flex;
  align-items: center;
  min-height: calc(100% - 1rem)
}

.modal-dialog-centered::before {
  display: block;
  height: calc(100vh - 1rem);
  height: -webkit-min-content;
  height: -moz-min-content;
  height: min-content;
  content: ""
}

.modal-dialog-centered.modal-dialog-scrollable {
  flex-direction: column;
  justify-content: center;
  height: 100%
}

.modal-dialog-centered.modal-dialog-scrollable .modal-content {
  max-height: none
}

.modal-dialog-centered.modal-dialog-scrollable::before {
  content: none
}

.modal-content {
  display: flex;
  position: relative;
  flex-direction: column;
  width: 100%;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: .3rem;
  outline: 0;
  background-clip: padding-box;
  background-color: #fff;
  pointer-events: auto
}

.modal-backdrop {
  z-index: 1040;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #000
}

.modal-backdrop.fade {
  opacity: 0
}

.modal-backdrop.show {
  opacity: .5
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1rem 1rem;
  border-bottom: 1px solid #dee2e6;
  border-top-right-radius: calc(.3rem - 1px);
  border-top-left-radius: calc(.3rem - 1px)
}

.modal-header .close {
  margin: -1rem -1rem -1rem auto;
  padding: 1rem 1rem
}

.modal-title {
  margin-bottom: 0;
  line-height: 1.5
}

.modal-body {
  position: relative;
  flex: 1 1 auto;
  padding: 1rem
}

.modal-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  padding: .75rem;
  border-top: 1px solid #dee2e6;
  border-bottom-right-radius: calc(.3rem - 1px);
  border-bottom-left-radius: calc(.3rem - 1px)
}

.modal-footer>* {
  margin: .25rem
}

.modal-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll
}

@media (min-width:576px) {
  .modal-dialog {
    max-width: 500px;
    margin: 1.75rem auto
  }
  .modal-dialog-scrollable {
    max-height: calc(100% - 3.5rem)
  }
  .modal-dialog-scrollable .modal-content {
    max-height: calc(100vh - 3.5rem)
  }
  .modal-dialog-centered {
    min-height: calc(100% - 3.5rem)
  }
  .modal-dialog-centered::before {
    height: calc(100vh - 3.5rem);
    height: -webkit-min-content;
    height: -moz-min-content;
    height: min-content
  }
  .modal-sm {
    max-width: 300px
  }
}

@media (min-width:992px) {
  .modal-lg, .modal-xl {
    max-width: 800px
  }
}

@media (min-width:1200px) {
  .modal-xl {
    max-width: 1140px
  }
}

.ranking_item [class^=col] {
  position: relative;
  padding: 1.2vw;
  overflow: hidden;
  border-radius: 6px;
  counter-increment: rank
}

.ranking_item [class^=col]:nth-of-type(1)::before {
  background: linear-gradient(135deg, #fceabb 0, #fccd4d 20%, #f8b500 21%, #fbdf93 100%)
}

.ranking_item [class^=col]:nth-of-type(2)::before {
  background: linear-gradient(135deg, #e6e6e6 0, #d9d9d9 20%, #cbcbcb 21%, #ddd 100%)
}

.ranking_item [class^=col]:nth-of-type(3)::before {
  background: linear-gradient(135deg, #f3e2c7 0, #c19e67 20%, #b68d4c 21%, #e9d4b3 100%)
}

.ranking_item [class^=col]::before {
  display: block;
  z-index: 970;
  position: absolute;
  top: 0;
  left: 0;
  width: 2.2em;
  height: 2.2em;
  border-radius: 50%;
  background-color: #412020;
  content: ""
}

.ranking_item [class^=col]::after {
  z-index: 980;
  position: absolute;
  top: .3em;
  left: .35em;
  width: 1.5em;
  color: #fff;
  font-weight: 700;
  line-height: initial;
  text-align: center;
  content: counter(rank)
}

#coupon {
  z-index: 998;
  position: relative
}

#coupon>img {
  margin-bottom: 20px;
  margin-bottom: .6em;
  margin-bottom: 1vw
}

#coupon .row {
  align-items: flex-end;
  justify-content: center
}

#coupon .col {
  max-width: 300px;
  transition: ease-in-out .2s
}

#coupon .col:hover {
  transform: translateY(-2px);
  transition: ease-in-out .3s
}

#coupon .col a {
  display: block;
  position: relative;
  background: #007b43;
  text-decoration: none
}

#coupon .col a::before {
  display: block;
  width: 100%;
  background-color: #fff;
  font-size: .6rem;
  font-weight: 700;
  line-height: 1.5
}

@media (min-width:768px) {
  #coupon .col a::before {
    font-size: 1.4rem;
    line-height: 2
  }
}

@media (min-width:768px) and (max-width:1200px) {
  #coupon .col a::before {
    font-size: calc(1.265rem + .18vw)
  }
}

#coupon .col a img {
  box-sizing: border-box;
  padding: .6vw
}

#coupon .col a::after {
  display: none;
  position: absolute;
  top: 0;
  left: 4px;
  width: 1.8rem;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  content: ""
}

@media (min-width:768px) {
  #coupon .col a::after {
    display: block
  }
}

#coupon .col:nth-of-type(1) a {
  background-color: #17184b
}

#coupon .col:nth-of-type(2) a {
  background: #a31313
}

#coupon .col:nth-of-type(4) {
  background-color: #762f07
}

#coupon .col:nth-of-type(5) {
  background-color: #250d00
}

#coupon .col:nth-of-type(6) {
  background-color: #666261
}

#coupon .col:nth-of-type(7) {
  background-color: #3d88ae
}

#coupon .col:nth-of-type(8) {
  background-color: #ea6262
}

#coupon .col:nth-of-type(9) {
  background-color: #522f60
}

#coupon .col.gold-rank {
  background: #9e7c3a
}

#coupon .col.gold-rank a::before {
  content: "ゴールド会員様限定"
}

#coupon .col.gold-rank a::after {
  background-image: url(https://www.rakuten.ne.jp/gold/kouragumi/img/ico/rank-badge-gold.png)
}

#coupon .col.silver-rank {
  background: #828080
}

#coupon .col.silver-rank a::before {
  content: "シルバー会員様限定"
}

#coupon .col.silver-rank a::after {
  background-image: url(https://www.rakuten.ne.jp/gold/kouragumi/img/ico/rank-badge-silver.png)
}

#coupon .col.regular-rank {
  background: #a31313
}

#coupon .col.regular-rank a::before {
  content: "レギュラー会員様限定"
}

#coupon .col.gakuwari {
  background: #4b93e7
}

#coupon .col.gakuwari a::before {
  content: "学割会員様限定"
}

.sales_period a, .sold_out a {
  display: inline-block;
  position: relative
}

.sold_out a::before {
  z-index: 10;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  border-radius: 3px;
  background-color: rgba(52, 58, 64, .2);
  content: ""
}

.sold_out a::after {
  z-index: 20;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 96%;
  margin: auto;
  transform: rotate(-10deg);
  background-image: url(https://www.rakuten.ne.jp/gold/kouragumi/img/ico/sold_out.png?=171225);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  content: ""
}

.sales_period a::after {
  display: flex;
  position: absolute;
  top: 0;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 3px;
  background-color: rgba(52, 58, 64, .5);
  color: #fff;
  font-family: YakuHanMPs, source-han-serif-japanese, "Sawarabi Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: 1.3rem;
  letter-spacing: .1em;
  content: "販売期間終了"
}

.pt_back {
  position: relative
}

.pt_back a>div {
  display: flex;
  z-index: 0;
  position: absolute;
  top: 200px;
  right: -14px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 110px;
  height: 110px;
  background: url(https://www.rakuten.ne.jp/gold/kouragumi/img/ico/point_back.svg) no-repeat 0 0;
  color: #fff;
  font-family: YakuHanMPs, source-han-serif-japanese, "Sawarabi Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  line-height: 1.2;
  text-align: center;
  pointer-events: none
}

.pt_back span {
  font-size: 2.3rem;
  font-weight: 700;
  letter-spacing: 1.1px;
  line-height: .9
}

.pt_back p::after {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 100%;
  margin-top: .5em;
  padding: .2em 1em;
  border-radius: 1em;
  background-color: #f7eecd;
  color: #dc3545;
  font-family: YakuHanMPs, source-han-serif-japanese, "Sawarabi Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: 1.1rem;
  font-weight: 700;
  text-align: center;
  content: "ポイント10倍"
}

.sticky-top.d-none.d-lg-block {
  position: relative
}

/* body {
  background-attachment: fixed;
  background-color: #f2f4e7;
  background-image: url(https://www.rakuten.ne.jp/gold/kouragumi/img/bg/asanoha_toumei.png);
  background-size: 60px
} */

@media (min-width:768px) {
  body {
    background-size: 122px
  }
}

.was-validated .form-control:valid {
  padding-right: .75rem!important;
  border-color: #ced4dd!important;
  background-image: none!important
}

.was-validated .form-control:valid:focus {
  box-shadow: 0 0 0 .2rem rgba(65, 32, 32, .25)!important
}

.small, small {
  font-weight: inherit
}

.sticky-top .nav-pills .nav-link.active, .sticky-top .nav-pills .show>.nav-link {
  background-color: #a31818
}

.sticky-top .nav-link {
  color: #fff
}

.sticky-top .nav-link:hover {
  color: #d84703
}

.sticky-top .nav-link.active:hover {
  background-color: #d84703;
  color: #fff
}

.sticky-top .dropdown.show .nav-link:hover {
  background-color: #d84703;
  color: #fff
}

.sticky-top .dropdown-item.active, .sticky-top .dropdown-item:active {
  background-color: #a31818
}

.svg-separator {
  display: block;
  z-index: 9;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  transform: translateY(-100%) translateY(2px);
  background: 0 0
}

.svg-separator.bottom {
  top: auto;
  bottom: 0
}

.sep1 {
  transform: translateY(-100%) translateY(2px) scale(1, 1);
  transform-origin: top
}

.sep4 {
  transform: translateY(-100%) translateY(2px) scale(1, 1);
  transform-origin: top
}

.wave_bg {
  bottom: -100px;
  left: 0;
  width: 100%;
  height: 200px;
  background-color: #4da1d2
}

.carousel.sticky-top {
  z-index: 1010;
  top: 100px
}

.carousel .badge {
  z-index: 1;
  position: absolute;
  top: .5rem;
  top: .3rem;
  border-radius: 0
}

@media (min-width:1200px) {
  .carousel .badge {
    top: 1rem
  }
}

.carousel-indicators {
  position: relative;
  height: 114px
}

.carousel-indicators li {
  width: 100%;
  max-width: 114px
}

.carousel-indicators li>div {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  overflow: hidden;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover
}

.carousel-indicators li>div::before {
  display: block;
  padding-top: 100%;
  content: ""
}

.sticky-top {
  position: sticky!important
}

.title {
  color: #412020;
  font-family: YakuHanMPs, source-han-serif-japanese, "Sawarabi Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: 3.4rem
}

@media (max-width:1200px) {
  .title {
    font-size: calc(1.465rem + 2.58vw)
  }
}

.svg-icon {
  width: 1.3em;
  height: 1.3em;
  vertical-align: text-bottom
}

.svg-icon path, .svg-icon polygon, .svg-icon rect {
  fill: #fff
}

.svg-icon circle {
  stroke: #fff;
  stroke-width: 1
}

#osusume .list-unstyled .svg-icon path, #osusume .list-unstyled .svg-icon polygon, #osusume .list-unstyled .svg-icon rect {
  fill: #28a745
}

#osusume .list-unstyled .svg-icon circle {
  stroke: #28a745;
  stroke-width: 1
}

.favorite {
  color: #e25663
}

.favorite .svg-icon path, .favorite .svg-icon polygon, .favorite .svg-icon rect {
  fill: #e25663
}

.favorite .svg-icon circle {
  stroke: #e25663
}

.favorite:hover {
  color: #dc3545;
  text-decoration: underline
}

.favorite:hover .svg-icon path, .favorite:hover .svg-icon polygon, .favorite:hover .svg-icon rect {
  fill: #dc3545
}

.favorite:hover .svg-icon circle {
  stroke: #dc3545
}

.favorite_circle .svg-icon path, .favorite_circle .svg-icon polygon, .favorite_circle .svg-icon rect {
  fill: #412020
}

.favorite_circle .svg-icon circle {
  stroke: #412020
}

.favorite_circle:hover .svg-icon path, .favorite_circle:hover .svg-icon polygon, .favorite_circle:hover .svg-icon rect {
  fill: #fff
}

.favorite_circle:hover .svg-icon circle {
  stroke: #fff
}

.breadcrumb a {
  color: #ef6461
}

.breadcrumb a:hover {
  color: #e8201c;
  text-decoration: underline
}

.product-card {
  border: 0;
  transition: all .15s ease-in-out
}

@media (min-width:768px) {
  .product-card:hover:not(.card-static) {
    z-index: 10;
    border-color: #fff;
    box-shadow: 0 .3rem 1.525rem -.375rem rgba(0, 0, 0, .1)
  }
}

.title-box {
  background-color: #ea9a3e;
  background-image: linear-gradient(45deg, #e8902c 25%, #e8902c 25%, transparent 25%, transparent 75%, #e8902c 75%, #e8902c 75%), linear-gradient(-135deg, #e8902c 25%, #e8902c 25%, transparent 25%, transparent 75%, #e8902c 75%, #e8902c 75%);
  background-position: 0 0, 1rem 1rem;
  background-size: 2rem 2rem
}

@media (min-width:768px) {
  .title-box {
    background-position: 0 0, 1.3rem 1.3rem;
    background-size: 2.6rem 2.6rem
  }
}

.title-box .badge {
  padding: 1px 6px;
  border-radius: 0;
  background-color: #f7eecd;
  color: #d3381c;
  font-feature-settings: palt;
  font-size: 1.25rem;
  font-weight: 500;
  text-transform: uppercase
}

.title-box h2 {
  color: #f7eecd
}

.cart label {
  display: inline-block;
  font-size: .8rem;
  letter-spacing: .12em
}

.input_area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.8rem
}

.input_area input {
  padding: .6rem;
  border: none;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
  background-color: #f5f5f5;
  box-shadow: 0 2px 0 0 grey;
  font-size: 1rem;
  font-size: 1.2rem
}

.input_area input:focus {
  outline: 0
}

input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0
}

input[type=number] {
  -moz-appearance: textfield
}

.btnspinner {
  -ms-user-select: none;
  -moz-user-select: -moz-none;
  -webkit-user-select: none;
  padding: .6rem .85rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;
  user-select: none
}

.btnspinner:hover {
  background-color: #f8f9fa
}

.btnspinner:focus {
  border-color: #6c757d;
  outline: 0;
  box-shadow: 0 0 0 .2rem rgba(108, 117, 125, .5)
}

.cart button[type=submit] {
  width: 100%;
  padding: .9em .5em;
  border: none;
  border-radius: 4px;
  background-color: #bf0000;
  color: #fff;
  letter-spacing: .12em;
  cursor: pointer
}

.cart button[type=submit]:hover {
  background-color: rgba(191, 0, 0, .95)
}

.cart button[type=submit]:focus {
  outline: 0;
  box-shadow: 0 0 0 .2rem rgba(220, 53, 69, .5)
}

form .btn {
  background-color: #bf0000
}

form .btn:hover {
  background-color: rgba(191, 0, 0, .95)
}

form .btn:focus {
  outline: 0;
  box-shadow: 0 0 0 .2rem rgba(220, 53, 69, .5)
}

@media (min-width:768px) {
  #contents-wrapper {
    background-attachment: fixed;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100%
  }
}

@media (min-width:992px) {
  #contents-wrapper {
    background-position: center center
  }
}

.bg_switcher_lt, .bg_switcher_rt {
  height: auto;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover
}

.header_bg_lt, .header_bg_rt {
  position: relative;
  width: 100%;
  margin: 0;
  overflow: hidden
}

.header_bg__child {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(https://shopping.geocities.jp/kouragumi/sale/BBQ/img/bbq_bg_2024.jpg);
}


@-webkit-keyframes rotate_up {
  0% {
    transform: scale(1) rotateZ(0)
  }
  100% {
    transform: scale(1.1) rotateZ(.001deg)
  }
}

@keyframes rotate_up {
  0% {
    transform: scale(1) rotateZ(0)
  }
  100% {
    transform: scale(1.1) rotateZ(.001deg)
  }
}

#page_header {
  position: relative;
  max-height: 800px;
  padding: 0;
  overflow: hidden;
  background-color: #fbfaf5;
  background-image: url(https://www.rakuten.ne.jp/gold/kouragumi/img/bg/texture_hantoumei-8.png);
  background-size: 150px
}

@media (min-width:768px) {
  #page_header {
    background-size: auto
  }
}

#page_header::before {
  display: block;
  z-index: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 3rem 0 4rem;
  padding: 0;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: 110%;
  content: ""
}

@media (min-width:768px) {
  #page_header::before {
    z-index: 1000;
    background-size: 110%
  }
}

@media (min-width:768px) {
  #page_header::before {
    z-index: 0;
    background-size: 120%
  }
}

@media (min-width:1200px) {
  #page_header::before {
    z-index: 1000;
    background-position: center;
    background-size: cover
  }
}

#page_header img {
  position: relative;
  margin: 0 auto
}

#yuge_wrap {
  z-index: 1030;
  position: relative;
  width: 100%;
  margin: 0 auto;
  background: url(https://www.rakuten.ne.jp/gold/kouragumi/special-edition/wintergift/img/kaninabe-slim.gif) no-repeat;
  background-position: bottom center;
  background-size: contain
}

@media (min-width:768px) {
  #yuge_wrap {
    max-width: 604px
  }
}

.yuge, .yuge2 {
  display: none
}

@media (min-width:768px) {
  .yuge, .yuge2 {
    display: inline;
    z-index: 99999
  }
}

#photo {
  z-index: 100;
  position: relative
}

@media (max-width:1199.98px) {
  #photo img {
    max-width: 60%
  }
}

.move, .yuge {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  max-width: 80%;
  margin: 0 auto
}

@media (min-width:768px) {
  .move, .yuge {
    max-width: inherit
  }
}

.yuge {
  -webkit-animation: yuge 1.5s infinite linear;
  z-index: 2;
  animation: yuge 1.5s infinite linear;
  transition: all 1.5s
}

.move {
  -webkit-animation: yuge 1.5s infinite linear;
  z-index: 3;
  animation: yuge 1.5s infinite linear;
  transition: all 1.5s
}

.yuge2 {
  display: none
}

@-webkit-keyframes yuge {
  0% {
    top: -180px;
    width: 100%;
    transform: rotateY(0);
    transform: scale(1, 1);
    filter: blur(10px);
    opacity: 0
  }
  33% {
    width: 150%;
    transform: rotateY(40deg);
    transform: scale(.6, 1.2);
    opacity: .25
  }
  66% {
    transform: rotateY(2deg);
    transform: scaleY(1.2, .4);
    opacity: .35
  }
  100% {
    top: -600px;
    transform: rotateY(50deg);
    transform: scaleY(1.4, 1.2);
    filter: blur(16px);
    opacity: 0
  }
}

@keyframes yuge {
  0% {
    top: -180px;
    width: 100%;
    transform: rotateY(0);
    transform: scale(1, 1);
    filter: blur(10px);
    opacity: 0
  }
  33% {
    width: 150%;
    transform: rotateY(40deg);
    transform: scale(.6, 1.2);
    opacity: .25
  }
  66% {
    transform: rotateY(2deg);
    transform: scaleY(1.2, .4);
    opacity: .35
  }
  100% {
    top: -600px;
    transform: rotateY(50deg);
    transform: scaleY(1.4, 1.2);
    filter: blur(16px);
    opacity: 0
  }
}

form .svg-icon {
  width: 1.5em;
  height: 1.5em;
  vertical-align: text-bottom
}

form .svg-icon path, form .svg-icon polygon, form .svg-icon rect {
  fill: #fff
}

form .svg-icon circle {
  stroke: #fff;
  stroke-width: 1
}

#category form .svg-icon {
  width: 1.3em;
  height: 1.3em
}

.box_shadow8 {
  position: relative
}

.box_shadow8::after, .box_shadow8::before {
  z-index: 0;
  position: absolute;
  bottom: 10px;
  width: 50%;
  height: 10%;
  box-shadow: 0 10px 15px rgba(0, 0, 0, .5);
  content: ''
}

.box_shadow8::before {
  left: 25px;
  transform: rotate(-4deg)
}

.box_shadow8::after {
  right: 25px;
  transform: rotate(4deg)
}

.box_shadow8 img {
  z-index: 1000;
  position: relative
}

.box_shadow8 .noshi::before {
  left: 10px
}

.box_shadow8 .noshi::after {
  right: 10px
}

@media (min-width:768px) {
  .h4 {
    font-size: 2rem
  }
}

.message {
  font-family: YakuHanMPs, source-han-serif-japanese, "Sawarabi Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.45
}

.image_illust {
  max-width: 120px
}

@media (min-width:768px) {
  .image_illust {
    max-width: 150px
  }
}

@media (min-width:768px) {
  .step .card .d-flex {
    min-height: 200px
  }
}

@media (max-width:767.98px) {
  .horizontal_scroll>* {
    flex: 0 0 70%;
    min-width: 70%
  }
}

#pagenav {
  border-bottom: 2px solid #f73302
}

@media (min-width:992px) {
  #pagenav {
    border-bottom-width: 4px
  }
}

#pagenav .nav {
  justify-content: space-evenly;
  width: 100%;
  max-width: 800px
}

@media (max-width:767.98px) {
  #pagenav .nav {
    justify-content: center
  }
}

@media (min-width:992px) {
  #pagenav a {
    font-size: 1.125rem
  }
}

#noshi {
  padding: 3rem 0;
  background-color: #fbfaf5;
  background-image: url(https://www.rakuten.ne.jp/gold/kouragumi/img/bg/texture_hantoumei-8.png);
  background-size: 150px;
  text-align: center
}

@media (min-width:768px) {
  #noshi {
    background-size: auto
  }
}

#noshi img {
  margin: 0 auto
}

#noshi>:not(:last-child) {
  display: inline-block;
  margin-bottom: 8px
}

@media (min-width:768px) {
  #noshi>:not(:last-child) {
    margin-bottom: 20px
  }
}

.noshi_image {
  align-items: center;
  max-width: 680px;
  margin: 0 auto;
  margin-bottom: 2rem;
  padding: 2rem 0
}

@media (min-width:768px) {
  .noshi_image {
    margin-bottom: 5rem
  }
}

.noshi_image img {
  position: relative
}

.noshi_image>div {
  position: relative
}

.noshi_image>div::before {
  display: block;
  z-index: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  width: 55vw;
  height: 300px;
  height: 55vw;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-color: rgba(188, 226, 232, .3);
  content: ""
}

@media (min-width:768px) {
  .noshi_image>div::before {
    width: 390px;
    height: 390px
  }
}

.noshi_image>div:nth-of-type(1) {
  padding: 2rem 1.5rem 0;
  text-align: center
}

@media (min-width:768px) {
  .noshi_image>div:nth-of-type(1)::before {
    width: 330px;
    height: 330px
  }
}

.noshi_image>div:nth-of-type(1) img {
  max-width: 287px;
  margin: 0 auto
}

.noshi_image>div:nth-of-type(1) p {
  font-size: .8rem
}

.noshi_image .noshi .row {
  justify-content: center
}

.noshi_image .noshi section {
  max-width: 74px
}

#item_nav .nav {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden
}

#item_nav .nav-link {
  line-height: 34px;
  white-space: nowrap
}

#item_nav .btn {
  white-space: nowrap
}

.category_image {
  top: -10vw;
  left: 50%;
  width: 20vw;
  height: 20vw;
  overflow: hidden;
  transform: translateX(-50%);
  border-width: 6px;
  box-shadow: 0 0 0 20px #fff
}

@media (min-width:768px) {
  .category_image {
    top: -70px;
    width: 140px;
    height: 140px
  }
}

.sub_image {
  width: 30vw;
  height: 30vw;
  overflow: hidden
}

@media (min-width:768px) {
  .sub_image {
    width: 240px;
    height: 240px
  }
}

.floating_bun {
  z-index: 1030;
  right: 5px;
  bottom: 16px
}

@media (min-width:768px) {
  .floating_bun {
    right: 10px;
    bottom: 174px
  }
}

@media (min-width:768px) {
  .floating_bun .btn {
    font-size: 1.25rem
  }
}

.bg {
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-image: url(https://shopping.geocities.jp/kouragumi/sale/BBQ/img/bbq_bg_2024.jpg);
  }