@charset "UTF-8";

/* リセット */
/*
  Made by Elly Loel - https://ellyloel.com/
*/
* {
  margin: 0;
  padding: 0;
  line-height: calc(0.25rem + 1em + 0.25rem)
}

*, ::before, ::after {
  box-sizing: border-box
}

*:where(:not(fieldset, progress, meter)) {
  border-width: 0;
  border-style: solid;
  background-origin: border-box;
  background-repeat: no-repeat
}

html {
  block-size: 100%;
  -webkit-text-size-adjust: none
}

@media (prefers-reduced-motion:no-preference) {
  html:focus-within {
    scroll-behavior: smooth
  }
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeSpeed;
  min-block-size: 100%
}

:where(img, svg, video, canvas, audio, iframe, embed, object) {
  display: block
}

:where(img, svg, video) {
  block-size: auto;
  max-inline-size: 100%
}

:where(svg) {
  stroke: none;
  fill: currentColor
}

:where(svg):where(:not([fill])) {
  stroke: currentColor;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round
}

:where(svg):where(:not([width])) {
  inline-size: 5rem
}

:where(input, button, textarea, select), :where(input[type="file"])::-webkit-file-upload-button {
  color: inherit;
  font: inherit;
  font-size: inherit;
  letter-spacing: inherit
}

:where(textarea) {
  resize: vertical
}

@supports (resize:block) {
  :where(textarea) {
    resize: block
  }
}

:where(p, h1, h2, h3, h4, h5, h6) {
  overflow-wrap: break-word
}

h1 {
  font-size: 2em
}

:where(ul, ol)[role="list"] {
  list-style: none
}

a:not([class]) {
  text-decoration-skip-ink: auto
}

:where(a[href], area, button, input, label[for], select, summary, textarea, [tabindex]:not([tabindex*="-"])) {
  cursor: pointer;
  touch-action: manipulation
}

:where(input[type="file"]) {
  cursor: auto
}

:where(input[type="file"])::-webkit-file-upload-button, :where(input[type="file"])::file-selector-button {
  cursor: pointer
}

@media (prefers-reduced-motion:no-preference) {
  :focus-visible {
    transition: outline-offset 145ms cubic-bezier(.25, 0, .4, 1)
  }

  :where(:not(:active)):focus-visible {
    transition-duration: 0.25s
  }
}

:where(:not(:active)):focus-visible {
  outline-offset: 5px
}

:where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"]), :where(input[type="file"])::-webkit-file-upload-button, :where(input[type="file"])::file-selector-button {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  text-align: center
}

:where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"])[disabled] {
  cursor: not-allowed
}

/* リセット */
html,
body {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.03em;
  height: 1.6;
}

img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

.btob_soup {
  position: relative;
}

.soup-wrappper {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

section {
  width: 100%;
}

/* =========================================================
   KV（メインビジュアルセクション）
   ========================================================= */
.kv__main__logo__wrap {
  width: 32%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

.kv__main__logo {
  width: 90%;
  opacity: 0.6;
  margin: 0 auto 4vw;
}

.kv__main__logo__en {
  width: 100%;
  opacity: 0.6;
  margin: 0 auto;
}

.kv__main__copy {
  width: 10.9375vw;
  position: absolute;
  top: 8%;
  right: 0%;
  transform: translate(-10%, 8%);
  z-index: 10;
}

@media (max-width: 768px) {
  .kv__main__logo__wrap {
    width: 68%;
    transform: translate(-50%, -70%);
  }

  .kv__main__copy {
    width: 29.3333333333vw;
  }
}

/* ------------------------------
   ズームアップアニメーション
------------------------------ */
.swiper-slide-active video,
.swiper-slide-duplicate-active video,
.swiper-slide-prev video {
  animation: zoomUp 10s linear 0s normal both;
}

/* ------------------------------
   メインスライダー
------------------------------ */
.main-swiper {
  position: relative;
  height: 100vh;
  z-index: 1;
}

/* ------------------------------
   メインスライダー内動画設定
------------------------------ */
.swiper-slide video {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  -o-object-fit: cover;
  object-fit: cover;
  display: block;
}

/* ------------------------------
   スマホ表示時（縦長対応）
------------------------------ */
@media (max-width: 768px) {

  .swiper,
  .swiper-slide,
  .swiper-img {
    position: relative;
  }

  .swiper-slide video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: 70% center;
    object-position: 70% center;
  }
}

/* =========================================================
   サブスライダー（fadeタイプ・常時重ね表示）
   ========================================================= */
/* ------------------------------
   サブスライダー共通設定
------------------------------ */
.thumb-swiper {
  position: absolute !important;
  bottom: 5vh;
  right: 9%;
  z-index: 10;
  width: 15.625vw;
  max-height: 590px;
  pointer-events: auto;
  overflow: visible;
}

/* ------------------------------
   スライド共通設定
------------------------------ */
.thumb-swiper .swiper-slide {
  background: transparent;
  opacity: 0;
  transition: opacity 0.8s ease;
  overflow: hidden;
}

/* ------------------------------
   フェード時のアクティブスライド
------------------------------ */
.thumb-swiper .swiper-slide-active {
  opacity: 1;
}

/* ------------------------------
   サムネイル画像設定
------------------------------ */
.thumb-swiper .swiper-slide img {
  width: 15.1515151515vw;
  max-width: 375px;
  height: auto;
  -o-object-fit: contain;
  object-fit: contain;
  display: block;
}

/* ------------------------------
   スマホ時（重ねたまま・位置維持）
------------------------------ */
@media (max-width: 768px) {
  .thumb-swiper {
    bottom: 5%;
    width: 36.4583333333vw;
    min-width: 200px;
    height: auto;
    left: 50%;
    transform: translateX(-50%);
    overflow: visible;
  }

  .thumb-swiper .swiper-slide img {
    border-radius: 6px;
    width: 53.3333333333vw;
    max-width: 200px;
  }
}

@media (max-width: 413px) {
  .thumb-swiper {
    bottom: -16%;
  }
}

/* =========================================================
   サブスライダーをメインに重ねる・余白防止
   ========================================================= */
.kv {
  position: relative;
  margin: 0;
  padding: 0;
}

.kv__inner {
  position: relative;
  overflow: hidden;
}

@keyframes zoomUp {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.2);
  }
}

.points {
  background: url(https://mygift-shop.jp/wp-content/themes/mygift/dist/images/soup/bg_wasi.jpg) center center;
  background-size: contain;
  padding-top: 5vw;
}

.points__inner {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
}

.points__block {
  position: relative;
  inset: 0;
  padding: 100px 0 0;
}

.points__btn {
  width: 90%;
  position: absolute;
  bottom: 35px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #ad0c0f;
  padding: 20px 80px;
  transition: 0.3s;
}

.points__btn a {
  display: inline-block;
  width: 100%;
  text-align: center;
  color: #fff;
  text-decoration: none;
  letter-spacing: 0.1em;
  font-size: 21px;
}

.points__btn:hover {
  background-color: #000;
}

@media (max-width: 820px) {
  .points__inner {
    width: calc(100% - 40px);
  }

  .points__btn {
    padding: 10px 20px;
  }
}

.worries {
  width: 100%;
  position: relative;
  inset: 0;
  background: url(https://mygift-shop.jp/wp-content/themes/mygift/dist/images/soup/bg_wasi.jpg) center center;
  background-size: contain;
  padding-top: 120px;
}

.worries__bg {
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translateY(100%);
  width: 100%;
  height: 100%;
  z-index: -1;
}

.worries__inner {
  width: 100%;
  max-width: 860px;
  position: relative;
  margin: 0 auto;
  background: #fff;
  border-radius: 20px;
  position: relative;
}

.worries__ttl__top {
  font-family: "Shippori Mincho", serif;
  font-size: 30px;
  position: absolute;
  white-space: nowrap;
  top: -16%;
  left: 50%;
  transform: translateX(-50%);
}

.worries__ttl__top span {
  font-size: 1.4em;
}

.worries__ttl__bottom {
  font-family: "Shippori Mincho", serif;
  font-size: 30px;
  text-align: center;
}

.worries__ttl__bottom {
  margin-top: 40px;
}

.worries__list {
  list-style: none;
  display: flex;
  align-items: center;
  margin: 0 auto;
  padding: 60px 0;
  width: 67%;
  flex-wrap: wrap;
}

.worries__item {
  background: url("https://mygift-shop.jp/wp-content/themes/mygift/dist/images/soup/worries/worries-list-icon.png") left 0px top 6px no-repeat;
  background-size: 15px auto;
  padding-left: 20px;
  line-height: 1.6em;
  width: 50%;
  font-size: 16px;
}

.worries__item:nth-of-type(3) {
  margin-top: 40px;
}

.worries__item:nth-of-type(4) {
  margin-top: 40px;
}

.worries__item span {
  background: #286081;
  color: #fff;
}

@media screen and (max-width: 820px) {
  .worries__inner {
    width: calc(100% - 40px);
  }

  .worries__ttl__top {
    font-size: clamp(21px, 3.6585vw, 30px);
    top: -9%;
  }

  .worries__ttl__bottom {
    font-size: clamp(21px, 3.6585vw, 30px);
  }

  .worries__list {
    width: 300px;
  }

  .worries__item {
    width: 100%;
  }

  .worries__item:nth-of-type(2) {
    margin-top: 40px;
  }

  .worries__item:nth-of-type(3) {
    margin-top: 40px;
  }

  .worries__item:nth-of-type(4) {
    margin-top: 40px;
  }

  .worries__item span {
    background: #286081;
    color: #fff;
  }
}

.grace {
  width: 100%;
  margin-top: 200px;
}

.grace__inner {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  inset: 0;
}

.grace__bg {
  width: 100%;
  max-width: 860px;
  min-width: 860px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}

.grace__ttl {
  font-family: "Shippori Mincho", serif;
  font-size: 30px;
  text-align: center;
}

.grace__contents {
  width: 100%;
}

.grace__logo {
  width: 333.77px;
  margin: 100px auto;
}

.grace__product {
  width: 400px;
  margin: 100px auto 0;
}

.swance__wrap {
  width: 100%;
  max-width: 630px;
  background: #fff9df;
  position: relative;
  margin: 160px auto 0;
}

.swance__ttl__wrap {
  background: #d7a955;
  padding: 15px 0;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  position: relative;
}

.swance__ttl__en {
  position: absolute;
  bottom: -20px;
  right: 15%;
  z-index: 1;
  width: 185px;
}

.swance__ttl {
  width: 458px;
  margin: 0 auto;
}

.swance__text {
  font-size: 16px;
  padding: 50px 30px;
}

.swance__bottom__item {
  width: 100%;
  max-width: 630px;
  margin: -55px auto;
  position: relative;
  z-index: 1;
}

@media screen and (max-width: 820px) {
  .grace {
    margin-top: 23vw;
  }

  .grace__ttl {
    font-size: clamp(21px, 3.6585vw, 30px);
  }

  .grace__bg {
    min-width: 560px;
    top: 15vw;
  }

  .grace__logo {
    width: 70%;
    margin: 20vw auto 0;
  }

  .grace__product {
    width: 80%;
    margin: 20vw auto 0;
  }

  .swance__wrap {
    margin-top: 23vw;
    width: calc(100% - 40px);
    max-width: none;
  }

  .swance__bottom__item {
    max-width: none;
  }

  .swance__ttl {
    width: 90%;
  }

  .swance__ttl__en {
    width: 43.7333333333vw;
    max-height: 240px;
    bottom: -5vw;
    right: 10%;
  }
}

.exp {
  margin-top: 200px;
  width: 100%;
}

.exp__ttl__wrap {
  position: relative;
  inset: 0;
  width: 100%;
  max-width: 630px;
  margin: 0 auto;
}

.exp__ttl {
  font-family: "Shippori Mincho", serif;
  font-size: 30px;
}

.exp__ttl__en {
  width: 278px;
  padding-top: 5px;
}

.exp--wrap {
  display: flex;
  width: 100%;
  max-width: 630px;
  margin: 60px auto 100px;
}

.exp__block {
  width: 50%;
}

.exp__content {
  width: 50%;
}

.exp__sub__ttl {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  line-height: 2.4;
  letter-spacing: 0.2em;
  font-size: 26px;
  position: relative;
  writing-mode: vertical-rl;
  text-orientation: upright;
  padding-right: 12px;
  margin-left: 50px;
  margin-right: auto;
}

.exp__sub__ttl.__left {
  margin-left: auto;
  margin-right: 50px;
}

.exp__sub__ttl span {
  padding-right: 5px;
  background: linear-gradient(to bottom, #000 0 100%) right/1px 100% no-repeat;
}

.exp__sub__ttl.__1 span:nth-of-type(2) {
  margin-top: 30px;
}

.exp__sub__ttl.__2 span:nth-of-type(2) {
  margin-top: 30px;
}

.exp__sub__ttl.__3 span:nth-of-type(2) {
  margin-top: 60px;
}

.exp__sub__ttl.__4 span:nth-of-type(2) {
  margin-top: 95px;
}

.exp__text {
  margin-top: 30px;
  font-size: 16px;
  line-height: 1.6;
}

@media screen and (max-width: 820px) {
  .exp {
    width: calc(100% - 40px);
    margin: 35vw auto 0;
  }

  .exp__ttl {
    font-size: clamp(21px, 3.6585vw, 30px);
  }

  .exp__ttl__en {
    width: 70%;
  }

  .exp__block {
    width: 65%;
  }

  .exp__content {
    width: 35%;
  }

  .exp__sub__ttl {
    margin-left: 5%;
  }

  .exp__sub__ttl.__left {
    margin-right: auto;
  }
}

.secret {
  margin-top: 200px;
  background: #f9f9f9;
}

.secret__ttl__wrap {
  position: relative;
  inset: 0;
  width: 100%;
  max-width: 630px;
  margin: 0 auto;
  padding: 60px 0;
}

.secret__ttl {
  font-family: "Shippori Mincho", serif;
  font-size: 30px;
}

.secret__ttl__en {
  width: 330px;
  padding-top: 5px;
}

.secret__wrap {
  display: flex;
  width: 100%;
  max-width: 1060px;
  gap: 40px;
  margin: 0 auto;
  padding: 0 30px;
}

.secret__block {
  width: 33%;
}

.secret__sub__ttl__wrap {
  display: flex;
  align-items: center;
}

.secret__sub__ttl__icon {
  width: 64px;
  height: auto;
}

.secret__sub__ttl {
  margin-left: 20px;
  font-family: "Shippori Mincho", serif;
  font-size: 18px;
  line-height: 1;
}

.secret__text {
  font-size: 16px;
  padding-top: 20px;
  padding-bottom: 60px;
}

@media screen and (max-width: 820px) {
  .secret {
    width: 100%;
    margin: 0 auto;
  }

  .secret__inner {
    padding: 0 5%;
  }

  .secret__ttl__wrap {
    padding: 12vw 0;
  }

  .secret__ttl {
    font-size: clamp(21px, 3.6585vw, 30px);
  }

  .secret__ttl__en {
    width: 70.4vw;
  }

  .secret__wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    padding: 0;
  }

  .secret__block {
    width: 100%;
  }
}

.products {
  background: #f9f9f9;
}

.products__inner {
  width: 100%;
  max-width: 1060px;
  padding: 0 30px;
  margin: 0 auto;
}

.products__contents {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
}

.product.--01 {
  border-top: 1px solid #286081;
}

.product__ttl.__1 {
  width: 240px;
}

.product__ttl__en {
  padding-top: 5px;
}

.product__ttl__en.__1 {
  width: 200px;
}

.product.--02 {
  border-top: 1px solid #ad0c0f;
}

.product__ttl.__2 {
  width: 257.59px;
}

.product__ttl__en.__2 {
  width: 260px;
}

.product.--03 {
  border-top: 1px solid #d7a955;
}

.product__ttl.__3 {
  width: 257px;
}

.product__ttl__en.__3 {
  width: 214px;
}

.product__ttl__wrap {
  padding: 100px 0 30px;
}

.product__content {
  padding: 100px 0 40px;
}

.product__image {
  position: relative;
  inset: 0;
}

.product__package {
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translate(-15%, 30%);
  width: auto;
}

.product__catchcopy {
  font-size: 24px;
  font-family: "Shippori Mincho", serif;
}

.product__text {
  margin-top: 30px;
  font-size: 16px;
}

.product__icon {
  width: 100%;
  margin: 3vw 0;
}

.product__gallery {
  margin-bottom: 3vw;
}

.product__gallery__block {
  display: flex;
  gap: 20px;
}

.product__gallery__contents {
  width: 50%;
}

.product__gallery__ttl {
  font-size: 18px;
  font-family: "Shippori Mincho", serif;
  margin: 10px 0;
}

.product__gallery__ttl, .product__gallery__text {
  padding: 0 10px;
}

@media screen and (max-width: 820px) {
  .product__ttl__wrap {
    padding: 12vw 0 6vw;
  }

  .products {
    padding-bottom: 12vw;
  }

  .product__catchcopy {
    font-size: clamp(21px, 3.6585vw, 30px);
    margin-bottom: 10px;
  }
}

@media screen and (max-width: 767px) {
  .product__gallery {
    margin-top: 8vw;
  }

  .product__gallery__block {
    flex-wrap: wrap;
    gap: 0;
  }

  .product__gallery__contents {
    width: 100%;
  }

  .product__gallery__contents:nth-of-type(1) {
    margin-bottom: 8vw;
  }
}

.recipe {
  background: url("https://mygift-shop.jp/wp-content/themes/mygift/dist/images/soup/bg_wasi.jpg");
  background-size: contain;
  width: 100%;
}

.recipe__inner {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
}

.exp__ttl__wrap.__recipe {
  margin: 0;
  padding-top: 3vw;
}

.recipe__gyu__wrap {
  padding-top: 100px;
}

.recipe__tomato__wrap {
  padding-top: 300px;
}

.recipe__miso__wrap {
  padding-top: 300px;
  padding-bottom: 400px;
}

.recipe__wrap {
  position: relative;
  inset: 0;
}

.recipe__img__wrap {
  position: relative;
  inset: 0;
}

.recipe__img {
  width: 55%;
  position: relative;
  inset: 0;
}

.recipe__img.__2 {
  width: 45%;
}

.recipe__img.__3 {
  width: 45%;
  margin-left: auto;
}

.recipe__name {
  font-size: 26px;
  font-family: "Shippori Mincho", serif;
  line-height: 2.4;
  letter-spacing: 0.2em;
  position: relative;
  writing-mode: vertical-rl;
  text-orientation: upright;
}

.recipe__name.__blue {
  background: #286081;
  color: #fff;
}

.recipe__name.__red {
  background: #ad0c0f;
  color: #fff;
}

.recipe__name.__orange {
  background: #d7a955;
  color: #fff;
}

.recipe__name.__1 {
  padding: 20px 5px;
  position: absolute;
  top: 0;
  left: 30px;
}

.recipe__wrap.__2 {
  margin-top: 60px;
}

.recipe__wrap.__3 {
  margin-top: -100px;
}

.recipe__name.__2 {
  padding: 20px 5px;
  position: absolute;
  top: -20px;
  left: -10px;
}

.recipe__wrap.__3 {
  margin-top: -100px;
}

.recipe__name.__3 {
  padding: 20px 5px;
  position: absolute;
  top: -100px;
  right: 5px;
}

.recipe__text__wrap {
  width: 50%;
  background: #fdfbef;
  padding: 20px;
  position: absolute;
  top: 80%;
  right: 25%;
  transform: translate(50%, -50%);
}

.recipe__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 16px;
  padding: 0 0 0 23px;
}

.recipe__list li {
  font-size: 16px;
}

.product__text p {
  padding: 20px 0;
}

.recipe__tomato__wrap,
.recipe__miso__wrap {
  margin-top: 60px;
}

.recipe__last-dish {
  padding: 0 0 200px;
}

@media screen and (max-width: 767px) {
  .recipe__inner {
    width: calc(100% - 40px);
  }

  .recipe__img {
    width: 100%;
  }

  .recipe__text__wrap {
    width: 100%;
    position: relative;
    inset: 0;
    transform: translate(5%, -5%);
  }

  .product__text {
    margin-top: 0;
  }

  .recipe__name {
    font-size: 19px;
  }

  .recipe__gyu__wrap {
    padding-top: 0;
  }

  .recipe__tomato__wrap {
    padding-top: 0;
  }

  .recipe__miso__wrap {
    padding-top: 0;
    padding-bottom: 23vw;
  }

  .recipe__img.__2 {
    width: 110%;
    margin-left: 10%;
  }

  .recipe__img.__3 {
    width: 110%;
    margin-left: -20%;
  }

  .recipe__wrap.__3 {
    margin-top: 23vw;
  }

  .recipe__name.__2.__sp__right {
    right: -10px;
    left: auto;
  }

  .recipe__wrap.__2 {
    margin-top: 23vw;
  }

  .recipe__last-dish {
    padding: 0 0 23vw;
  }

  .exp__ttl__wrap.__recipe {
    margin-bottom: 12vw;
  }
}

.sale {
  background: url("https://mygift-shop.jp/wp-content/themes/mygift/dist/images/soup/bg_wasi.jpg");
  background-size: contain;
  width: 100%;
}

.sale__inner {
  width: 100%;
  max-width: 1060px;
  padding: 0 30px;
  margin: 0 auto;
}

.sale__block.__gyu {
  border-top: 1px solid #286081;
}

.sale__block.__tomato {
  border-top: 1px solid #ad0c0f;
}

.sale__block.__miso {
  border-top: 1px solid #d7a955;
}

.sale__block.__all {
  border-top: 1px solid #fee9a0;
}

.sale__contents {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  padding: 100px 0;
}

.sale__product__wrap {
  width: 40%;
}

.sale__ov__wrap {
  width: 60%;
  padding-left: 60px;
}

.sale__ov__ttl {
  margin-bottom: 30px;
}

.sale__ov__btn {
  text-align: center;
  padding: 20px 0;
  transition: 0.3s;
}

.sale__ov__btn.__gyu {
  background: #286081;
}

.sale__ov__btn.__tomato {
  background: #ad0c0f;
}

.sale__ov__btn.__miso {
  background: #d7a955;
}

.sale__ov__btn:hover {
  background: #000;
}

.sale__ov__btn.__all {
  background: linear-gradient(45deg, #b67b03 0%, #daaf08 45%, #fee9a0 70%, #daaf08 85%, #b67b03 90% 100%);
  transition: 0.3s;
}

.sale__ov__btn.__all:hover {
  background: linear-gradient(45deg, #000000 0%, #000000 45%, #000000 70%, #000000 85%, #000000 90% 100%);
}

.sale__ov__btn a {
  color: #fff;
  text-decoration: none;
  letter-spacing: 0.1em;
  font-size: 21px;
}

.sale__ov__precautions {
  margin-top: 20px;
  font-size: 14px;
}

@media screen and (max-width: 767px) {
  .sale__inner {
    width: calc(100% - 40px);
    padding: 0;
  }

  .sale__contents {
    flex-wrap: wrap;
    padding: 16vw 0;
  }

  .sale__product__wrap {
    width: 100%;
  }

  .sale__ov__wrap {
    width: 100%;
    padding-left: 0;
  }
}

.order {
  background: url("https://mygift-shop.jp/wp-content/themes/mygift/dist/images/soup/bg_wasi.jpg");
  background-size: contain;
  width: 100%;
  padding-top: 60px;
    padding-bottom: 120px;
}

.order__inner {
  width: 100%;
  max-width: 630px;
  margin: 0 auto;
  background: #f2f2f2;
  outline: 1px solid rgb(0, 0, 0);
  outline-offset: -15px;
  padding: 40px 80px;
}

.order__ttl {
  font-family: "Shippori Mincho", serif;
  font-size: 30px;
  text-align: center;
  margin-bottom: 30px;
}

.order__text {
  font-size: 16px;
  margin-bottom: 30px;
}

.order__btn {
  text-align: center;
  padding: 20px 0;
  background: #000;
  transition: 0.3s;
}

.order__btn:hover {
  background: #ad0c0f;
}

.order__btn a {
  color: #fff;
  text-decoration: none;
  letter-spacing: 0.1em;
  font-size: 21px;
}

@media screen and (max-width: 820px) {
  .order {
    padding-top: 9vw;
    padding-bottom: 24vw;
  }

  .order__inner {
    width: calc(100% - 40px);
    padding: 40px 30px;
  }
}

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

.l-footer {
  width: 100%;
  height: auto;
  background-color: #fff;
}

.l-footer__inner {
  max-width: 100%;
  padding: 0 10px;
  margin: 0 auto;
}

.l-footer__explanation p {
  font-size: 14px;
  line-height: 1.6;
}

@media screen and (min-width: 1000px) {
  .l-footer__inner {
    max-width: 1000px;
  }
}

.l-footer__explanation {
  padding: 20px 0;
}

.l-footer__nav {
  padding: 20px 0;
}

.l-footer__nav-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.l-footer__nav-item {
  width: 50%;
  padding: 5px 0;
}

.l-footer__nav-item a {
  font-size: 14px;
  color: #000;
  transition: all .3s;
}

.l-footer__nav-item a:hover {
  color: rgb(180, 180, 180);
}

@media screen and (min-width: 1000px) {
  .l-footer__nav-item {
    width: 25%;
  }
}

.l-footer__copyright {
  border-top: 1px solid #efefef;
  text-align: center;
  padding: 5px 0;

  .l-footer__copyright__text {
    font-size: 14px;
  }
}

.l-header {
  width: 100%;
  height: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  background: #fff;
  box-shadow: 0px 1px 3px rgba(206, 206, 206, 0.774);
}

.l-header__inner {
  width: 100%;
  height: auto;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 10px;
  display: flex;
  align-items: center;
}

.l-header__wrapper {
  height: 70px;
  display: flex;
  align-items: center;
}

.l-header__shop-logo {
  max-width: 140px;
}

.l-header__shop-logo img {
  height: auto;
  width: 120px;
}

.l-header__right-box {
  margin: 0 0 0 auto;
}

.l-header__search--icon {
  font-size: 24px;
  color: #333;
  padding-right: 10px;
}

/*========= 検索窓を開くための虫眼鏡ボタン設定 ===========*/
.open-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: url("../../dist/images/common/search-icon.png") no-repeat 15px center;
  background-size: 20px 20px;
  width: 50px;
  height: 50px;
  cursor: pointer;
}

/*========= 検索窓の設定 ===============*/
/*==検索窓背景のエリア*/
#search-wrap {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: 0;
  transition: all 0.4s;
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
  display: none;
}

#search-wrap.is-panelactive {
  opacity: 1;
  z-index: 3;
  background: rgb(230, 230, 230);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

/*==検索窓のエリア*/
#search-wrap .search-area {
  display: none;
}

#search-wrap.is-panelactive .search-area {
  display: block;
  width: 80%;
  position: relative;
}

/*==検索フォームの設定*/
#search-wrap form {
  position: relative;
  height: 66px;
  width: 100%;
}

/*==テキスト入力とボタンinput共通設定*/
#search-wrap input {
  -webkit-appearance: none;
  /*SafariやChromeのデフォルトの設定を無効*/
  appearance: none;
  -moz-appearance: none;
  outline: none;
  cursor: pointer;
  /*カーソルを指マークに*/
  color: #333;
}

/*テキスト入力input設定*/
#search-wrap input[type=text] {
  width: 100%;
  padding: 20px;
  border: none;
  border-bottom: 2px solid rgb(255, 255, 255);
  transition: all 0.5s;
  letter-spacing: 0.05em;
}

#search-wrap input[type=text]:focus {
  background: rgb(255, 255, 255);
}

/*ボタンinput設定*/
#search-wrap input[type=submit] {
  position: absolute;
  top: 0;
  right: 10px;
  background: url("../../dist/images/common/search-icon.png") no-repeat 15px center;
  /*虫眼鏡アイコンを背景に表示*/
  background-size: 25px 25px;
  width: 60px;
  height: 60px;
}

/*=======　閉じるための×ボタン　========*/
.close-btn {
  position: absolute;
  top: 7px;
  right: 15px;
  z-index: 2;
  cursor: pointer;
  width: 50px;
  height: 50px;
}

.close-btn span {
  display: inline-block;
  position: absolute;
  left: 14px;
  height: 3px;
  border-radius: 2px;
  background-color: rgb(56, 56, 56);
}

/*×マーク*/
.close-btn span:nth-of-type(1) {
  top: 21px;
  left: 16px;
  transform: translateY(6px) rotate(-135deg);
  width: 50%;
}

.close-btn span:nth-of-type(2) {
  top: 32px;
  left: 16px;
  transform: translateY(-6px) rotate(135deg);
  width: 50%;
}

@media screen and (min-width: 821px) {
  .l-header__inner {
    max-width: 75%;
    padding: 0;
  }
}

.l-header-page__wrapper {
  height: 30px;
  display: flex;
  align-items: center;
}

.l-header-page__shop-logo img {
  height: auto;
  width: 80px;
}

.open-btn.open-btn--single {
  top: -10px;
  right: 4px;
  background-size: 17px 17px;
}

.close-btn.close-btn--single {
  top: -12px;
  right: 20px;
  width: 35px;
  height: 35px;
}

/*  ロード画面 */
.bl_loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  color: #fff;
  font-size: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  opacity: 1;
  visibility: visible;
  /*  transition: 0.3s; */
  z-index: 9999;
}

.bl_loading.loaded {
  opacity: 0;
  visibility: hidden;
}

@keyframes mygift-lpgo {
  50% {
    opacity: 0.6;
  }
}

.loadingText {
  width: 168px;
  height: auto;
  animation: 0.8s mygift-lpgo infinite;
}