@charset "UTF-8";
/*============================================================
*    メインCSS
* ========================================================= */
/*--------------------------------------------
フォント
---------------------------------------------*/
/*--------------------------------------------
カラー
---------------------------------------------*/
/*--------------------------------------------
サイト幅・ブレイクポイント
---------------------------------------------*/
/*--------------------------------------------
イージング
---------------------------------------------*/
/*--------------------------------------------
使い方
---------------------------------------------*/
/*--------------------------------------------
フォントサイズ・余白などのレスポンシブ対応
---------------------------------------------*/
/*--------------------------------------------
メディアクエリ
---------------------------------------------*/
/*--------------------------------------------
ホバー
---------------------------------------------*/
/*--------------------------------------------
上下左右中央配置（センター配置）
---------------------------------------------*/
/*--------------------------------------------
line-clamp
---------------------------------------------*/
/* =================================================
*    アニメーション(common)
* =============================================== */
@-webkit-keyframes shrinkImg {
  from {
    opacity: 0;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes shrinkImg {
  from {
    opacity: 0;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    width: 0;
  }
  to {
    opacity: 1;
    width: 49%;
  }
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    width: 0;
  }
  to {
    opacity: 1;
    width: 49%;
  }
}
@-webkit-keyframes loop {
  0% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}
@keyframes loop {
  0% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}
@-webkit-keyframes loop2 {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-200%);
            transform: translateX(-200%);
  }
}
@keyframes loop2 {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-200%);
            transform: translateX(-200%);
  }
}
/* パララックス */
.js-parallax {
  -webkit-transition: -webkit-transform 0.2s;
  transition: -webkit-transform 0.2s;
  transition: transform 0.2s;
  transition: transform 0.2s, -webkit-transform 0.2s;
  -webkit-transition-duration: 0.4s;
          transition-duration: 0.4s;
  will-change: transform;
}

/* フェードイン */
.js-slide-in {
  opacity: 0;
  -webkit-transition: opacity 1.2s, -webkit-transform 1.2s;
  transition: opacity 1.2s, -webkit-transform 1.2s;
  transition: opacity 1.2s, transform 1.2s;
  transition: opacity 1.2s, transform 1.2s, -webkit-transform 1.2s;
}
.js-slide-in.top {
  -webkit-transform: translateY(calc(-10 * var(--rate)));
          transform: translateY(calc(-10 * var(--rate)));
}
.js-slide-in.right {
  -webkit-transform: translateX(calc(10 * var(--rate)));
          transform: translateX(calc(10 * var(--rate)));
}
.js-slide-in.left {
  -webkit-transform: translateX(calc(-10 * var(--rate)));
          transform: translateX(calc(-10 * var(--rate)));
}
.js-slide-in.bottom {
  -webkit-transform: translateY(calc(10 * var(--rate)));
          transform: translateY(calc(10 * var(--rate)));
}
.js-slide-in.active {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}

/* =================================================
*    共通(common)
* =============================================== */
a {
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
@media (hover: none) {
  a {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  a:active {
    opacity: 0.7;
  }
}
@media (-ms-high-contrast: none), (-ms-high-contrast: active), (-moz-touch-enabled: 0), (hover: hover) {
  a:hover {
    opacity: 0.7;
  }
}

/* =================================================
*    ボタン(common)
* =============================================== */
.lp-btn-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
}
.lp-btn-wrap .lp-btn {
  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;
  color: var(--color-white);
  background-color: var(--color-bg-btn);
  width: calc(250 * var(--rate));
  font-size: calc(16 * var(--rate));
  padding: calc(14 * var(--rate)) calc(10 * var(--rate));
  border-radius: calc(30 * var(--rate));
  text-decoration: none;
}
.lp-btn-wrap .lp-btn-icon {
  width: calc(21 * var(--rate));
  margin-right: calc(10 * var(--rate));
}
.lp-btn-wrap--fixed {
  position: fixed;
  left: 0;
  bottom: calc(25 * var(--rate));
  z-index: 100;
  -webkit-transition: 0.3s opacity, 0.3s visibility;
  transition: 0.3s opacity, 0.3s visibility;
}
.lp-btn-wrap--fixed .lp-btn {
  padding: calc(9 * var(--rate)) calc(10 * var(--rate));
  border-radius: calc(25 * var(--rate));
}
.lp-btn-wrap--fixed.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none; /* クリック無効化 */
}

.c-btn-cart,
.c-btn-progress,
.c-btn {
  background-color: var(--color-title);
  border-color: var(--color-title);
}

.c-btn-cart.c-btn-cart--gray-border {
  border-color: var(--color-gray-dark);
  background-color: var(--color-white);
  color: var(--color-gray-dark) !important;
}

/* =================================================
*    タイトル(common)
* =============================================== */
.lp-area-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: var(--color-title);
}
.lp-area-title__inner {
  font-size: calc(26 * var(--rate));
  font-weight: var(--fw-bold);
  line-height: 1.23076923 !important;
  color: var(--color-title) !important;
  padding-bottom: calc(11.4 * var(--rate));
  background: url(../../img/cartlp/top/title_bottom.png) repeat-x bottom left/calc(228 * var(--rate)) calc(7 * var(--rate));
}

/* =================================================
*    レイアウト(common)
* =============================================== */
.formlp-front-section * {
  color: var(--color-text);
  font-family: var(--font-gothic);
  line-height: 2;
  letter-spacing: 0.1em;
}

.lp-wrapper {
  font-family: var(--font-gothic);
  color: var(--color-text);
  font-weight: var(--fw-medium);
  line-height: 2;
  letter-spacing: 0.1em;
}

.l-container-wrap {
  background-color: var(--color-white);
}

.lp-sp-wrapper {
  padding-bottom: calc(210 * var(--rate));
  background: url(../../img/cartlp/top/bg_bottom.png) no-repeat var(--color-bg-sp) bottom center/100% calc(160 * var(--rate));
  overflow-x: hidden;
}

/* =================================================
*    メインビジュアル(common)
* =============================================== */
.lp-mv-area {
  position: relative;
}
.lp-mv-area .lp-mv-main {
  width: 100%;
}
.lp-mv-area .lp-mv-deco {
  position: absolute;
}
.lp-mv-area .lp-mv-deco--shrink {
  opacity: 0;
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
  will-change: transform;
}
.lp-mv-area .lp-mv-deco--title-01,
.lp-mv-area .lp-mv-deco--title-02 {
  opacity: 0;
}
.lp-mv-area .lp-mv-deco--title-03,
.lp-mv-area .lp-mv-deco--title-04 {
  display: inline-block;
  opacity: 0;
  overflow: hidden;
  will-change: transform;
}
.lp-mv-area .lp-mv-deco--title-03 img,
.lp-mv-area .lp-mv-deco--title-04 img {
  max-width: initial;
}
.lp-mv-area .lp-mv-deco--title-01 {
  top: calc(32 * var(--rate));
  left: calc(62 * var(--rate));
  width: calc(260 * var(--rate));
  -webkit-transition: opacity 0.8s 1s;
  transition: opacity 0.8s 1s;
}
.lp-mv-area .lp-mv-deco--title-02 {
  top: calc(65.1 * var(--rate));
  left: calc(92.9 * var(--rate));
  width: calc(210 * var(--rate));
  -webkit-transition: opacity 0.8s 1.3s;
  transition: opacity 0.8s 1.3s;
}
.lp-mv-area .lp-mv-deco--title-03 {
  top: calc(100 * var(--rate));
  left: calc(105 * var(--rate));
}
.lp-mv-area .lp-mv-deco--title-03 img {
  width: calc(183 * var(--rate));
}
.lp-mv-area .lp-mv-deco--title-04 {
  top: calc(143 * var(--rate));
  left: calc(172 * var(--rate));
}
.lp-mv-area .lp-mv-deco--title-04 img {
  width: calc(183 * var(--rate));
}
.lp-mv-area .lp-mv-deco--hokkaido {
  top: calc(68.6 * var(--rate));
  left: calc(-1.1 * var(--rate));
  width: calc(98 * var(--rate));
}
.lp-mv-area .lp-mv-deco--rice {
  right: calc(8 * var(--rate));
  bottom: calc(-24 * var(--rate));
  width: calc(140 * var(--rate));
}
.lp-mv-area.loaded .lp-mv-deco--shrink {
  -webkit-animation: shrinkImg 2s forwards;
          animation: shrinkImg 2s forwards;
}
.lp-mv-area.loaded .lp-mv-deco--shrink.lp-mv-deco--hokkaido {
  -webkit-animation-delay: 1.6s;
          animation-delay: 1.6s;
}
.lp-mv-area.loaded .lp-mv-deco--shrink.lp-mv-deco--rice {
  -webkit-animation-delay: 2.5s;
          animation-delay: 2.5s;
}
.lp-mv-area.loaded .lp-mv-deco--title-03 {
  -webkit-animation: fadeInLeft 1.6s 1.9s forwards;
          animation: fadeInLeft 1.6s 1.9s forwards;
}
.lp-mv-area.loaded .lp-mv-deco--title-04 {
  -webkit-animation: fadeInLeft 1.6s 2.2s forwards;
          animation: fadeInLeft 1.6s 2.2s forwards;
}
.lp-mv-area.loaded .lp-mv-deco--title-01,
.lp-mv-area.loaded .lp-mv-deco--title-02 {
  opacity: 1;
}

/* =================================================
*    ページリード文(common)
* =============================================== */
.lp-page-lead-area {
  padding-top: calc(37 * var(--rate));
  padding-bottom: calc(74 * var(--rate));
}
.lp-page-lead-area .lp-page-lead__text {
  text-align: center;
  font-weight: bold;
  font-size: calc(16 * var(--rate));
}
.lp-page-lead-area .lp-page-lead__text--sm {
  font-size: calc(11 * var(--rate));
}

/* =================================================
*    おこめの特徴(common)
* =============================================== */
.lp-feature-area {
  position: relative;
  overflow: hidden;
  padding-top: calc(268 * var(--rate));
}
.lp-feature-area .lp-feature-bg {
  position: absolute;
  top: 0;
  left: 0;
  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;
  height: calc(268 * var(--rate));
}
.lp-feature-area .lp-feature-bg__img {
  width: calc(1184 * var(--rate));
}
.lp-feature-area .lp-feature-bg__img img {
  width: 100%;
}
.lp-feature-area .lp-feature-bg__img:nth-child(odd) {
  -webkit-animation: loop 100s -50s linear infinite;
          animation: loop 100s -50s linear infinite;
}
.lp-feature-area .lp-feature-bg__img:nth-child(even) {
  -webkit-animation: loop2 100s linear infinite;
          animation: loop2 100s linear infinite;
}
.lp-feature-area .lp-feature-img {
  position: relative;
  padding: 0 calc(10 * var(--rate));
  margin-top: calc(-86 * var(--rate));
}
.lp-feature-area .lp-feature-img img {
  width: calc(251 * var(--rate));
}
.lp-feature-area .lp-feature-list-area {
  margin-top: calc(20 * var(--rate));
}
.lp-feature-area .lp-feature-list-area .lp-feature-list {
  padding: 0 calc(20 * var(--rate));
  margin-top: calc(10 * var(--rate));
}
.lp-feature-area .lp-feature-list-area .lp-feature-list__title {
  text-align: center;
  font-weight: bold;
  line-height: 1.6;
  font-size: calc(20 * var(--rate));
}
.lp-feature-area .lp-feature-list-area .lp-feature-list__title--sm {
  font-size: calc(12 * var(--rate));
}
.lp-feature-area .lp-feature-list-area .lp-feature-list__item {
  font-weight: var(--fw-medium);
  line-height: 1.75;
  font-size: calc(16 * var(--rate));
  padding-left: calc(24 * var(--rate));
  background: url(../../img/cartlp/top/icon_check.svg) no-repeat center left/calc(14 * var(--rate)) calc(12 * var(--rate));
}
.lp-feature-area .lp-feature-list-area .lp-feature-list__item + .lp-feature-list__item {
  margin-top: calc(12 * var(--rate));
}

/* =================================================
*    商品ラインナップ(common)
* =============================================== */
.lp-lineup-area {
  font-weight: var(--fw-medium);
  margin-top: calc(77 * var(--rate));
}
.lp-lineup-area .lp-lineup-area-title {
  color: var(--color-white);
  padding: calc(84 * var(--rate)) 0 calc(111.6 * var(--rate));
  background: url(../../img/cartlp/top/title_lineup-bg.png) no-repeat top center/cover;
}
.lp-lineup-area .lp-lineup-area-title__inner {
  color: var(--color-white);
}
.lp-lineup-area .lp-lineup-area-title .lp-area-title__inner {
  color: var(--color-white) !important;
}
.lp-lineup-area .lp-lineup-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0 calc(15 * var(--rate));
  padding-bottom: calc(40 * var(--rate));
  margin-top: calc(-63 * var(--rate));
}
.lp-lineup-area .lp-lineup-nav__item {
  position: relative;
  width: calc(165 * var(--rate));
}
.lp-lineup-area .lp-lineup-nav__item:before {
  content: "";
  display: block;
  width: calc(165 * var(--rate));
  height: calc(165 * var(--rate));
  background: #fff;
  border-radius: calc(5 * var(--rate));
  position: absolute;
  z-index: -1;
}
.lp-lineup-area .lp-lineup-nav__link {
  display: block;
}
.lp-lineup-area .lp-lineup-nav__link img {
  width: 100%;
}
.lp-lineup-area .lp-lineup-box-wrap {
  position: relative;
}
.lp-lineup-area .lp-lineup-box-wrap--bg {
  position: absolute;
  top: calc(1400 * var(--rate));
  left: 0;
  display: block;
  width: 100%;
}
.lp-lineup-area .lp-lineup-box-wrap--bg img {
  width: 100%;
}
.lp-lineup-area .lp-lineup-box {
  position: relative;
  text-align: center;
  padding: calc(56 * var(--rate)) 0;
}
.lp-lineup-area .lp-lineup-box:before, .lp-lineup-area .lp-lineup-box:after {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: calc(56 * var(--rate));
  background-repeat: no-repeat;
  background-size: 100% calc(56 * var(--rate));
}
.lp-lineup-area .lp-lineup-box:before {
  top: 0;
  background-image: url(../../img/cartlp/top/bg-circle-top.svg);
  background-position: bottom center;
}
.lp-lineup-area .lp-lineup-box:after {
  bottom: 0;
  background-image: url(../../img/cartlp/top/bg-circle-bottom.svg);
  background-position: top center;
}
.lp-lineup-area .lp-lineup-box__inner {
  background-color: var(--color-white);
  padding: calc(2 * var(--rate)) 0 calc(24 * var(--rate));
}
.lp-lineup-area .lp-lineup-box--nanatsuboshi {
  margin-top: calc(119 * var(--rate));
}
.lp-lineup-area .lp-lineup-title {
  font-family: var(--font-mincho);
  font-weight: var(--fw-regular);
  font-size: calc(32 * var(--rate));
  color: var(--color-title);
  letter-spacing: 0.2em;
  line-height: 1.29 !important;
}
.lp-lineup-area .lp-lineup-title--sub {
  display: block;
  text-align: center;
  font-family: var(--font-mincho-zen);
  font-weight: var(--fw-black);
  font-size: calc(16 * var(--rate));
  color: var(--color-title);
}
.lp-lineup-area .lp-lineup-img {
  width: calc(360 * var(--rate));
  margin: calc(13 * var(--rate)) auto 0;
}
.lp-lineup-area .lp-lineup-img img {
  position: relative;
  left: calc(-3 * var(--rate));
  width: 100%;
}
.lp-lineup-area .lp-lineup-lead {
  font-size: calc(15 * var(--rate));
  margin-top: calc(11 * var(--rate));
}
.lp-lineup-area .lp-lineup-list {
  margin-top: calc(27 * var(--rate));
}
.lp-lineup-area .lp-lineup-list__title {
  font-weight: bold;
}
.lp-lineup-area .lp-lineup-list__title--feature {
  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;
  width: 100%;
  padding: calc(10 * var(--rate));
  font-size: calc(14 * var(--rate));
  background: url(../../img/cartlp/top/bg_feature_title.png) no-repeat center/calc(36 * var(--rate)) calc(48 * var(--rate));
}
.lp-lineup-area .lp-lineup-list__title--feature-text {
  position: relative;
  top: calc(2 * var(--rate));
}
.lp-lineup-area .lp-lineup-list__title--num {
  font-size: calc(21 * var(--rate));
  margin-left: calc(5 * var(--rate));
}
.lp-lineup-area .lp-lineup-list__title--text {
  display: block;
  font-size: calc(20 * var(--rate));
  margin-top: calc(9 * var(--rate));
}
.lp-lineup-area .lp-lineup-list__text {
  font-size: calc(15 * var(--rate));
  margin-top: calc(5 * var(--rate));
}
.lp-lineup-area .lp-lineup-list-item + .lp-lineup-list-item {
  margin-top: calc(12 * var(--rate));
}
.lp-lineup-area .lp-lineup-note-list {
  margin-top: calc(9 * var(--rate));
}
.lp-lineup-area .lp-lineup-note-list__item {
  font-size: calc(10 * var(--rate));
}
.lp-lineup-area .lp-lineup-note-list__item + .lp-lineup-note-list--item {
  margin-top: calc(4 * var(--rate));
}
.lp-lineup-area .lp-lineup-evaluate {
  width: calc(327 * var(--rate));
  margin: calc(47 * var(--rate)) auto 0;
}
.lp-lineup-area .lp-lineup-evaluate img {
  width: 100%;
}
.lp-lineup-area .lp-lineup-price {
  padding: 0 calc(16 * var(--rate));
  margin-top: calc(50 * var(--rate));
}
.lp-lineup-area .lp-lineup-price img {
  width: 100%;
}
.lp-lineup-area .lp-btn-wrap {
  margin-top: calc(50 * var(--rate));
}

/* =================================================
*    選び方ガイド(common)
* =============================================== */
.lp-guide-area {
  padding: 0 calc(15 * var(--rate));
  margin-top: calc(53 * var(--rate));
}
.lp-guide-area .lp-guide-lead {
  text-align: center;
  margin-top: calc(20 * var(--rate));
  font-size: calc(16 * var(--rate));
  font-weight: var(--fw-medium);
}
.lp-guide-area .lp-guide-img {
  margin-top: calc(20 * var(--rate));
}
.lp-guide-area .lp-guide-img img {
  width: 100%;
}

/*===========================================
* よくある質問（common）
===========================================*/
.lp-faq-area {
  padding: 0 calc(15 * var(--rate));
  margin-top: calc(53 * var(--rate));
}

/*===========================================
* アコーディオン（common）
===========================================*/
.lp-faq-accordion-area {
  width: 100%;
  margin-top: calc(26 * var(--rate));
}
.lp-faq-accordion-area .lp-faq-accordion-list {
  padding: calc(11 * var(--rate)) 0 calc(10 * var(--rate));
  border-top: calc(1 * var(--rate)) solid var(--color-text);
}
.lp-faq-accordion-area .lp-faq-accordion-list:last-child {
  border-bottom: calc(1 * var(--rate)) solid var(--color-text);
}
.lp-faq-accordion-area .lp-faq-accordion-title {
  position: relative;
}
.lp-faq-accordion-area .lp-faq-accordion-title__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-weight: var(--fw-bold);
  font-size: calc(16 * var(--rate));
}
.lp-faq-accordion-area .lp-faq-accordion-title .lp-faq-accordion-title--head,
.lp-faq-accordion-area .lp-faq-accordion-desc--head {
  color: var(--color-primary);
  width: calc(25 * var(--rate));
  font-size: calc(20 * var(--rate));
  line-height: 1.5;
}
.lp-faq-accordion-area .lp-faq-accordion-title--text {
  width: calc(100% - 25 * var(--rate));
  padding-top: calc(5 * var(--rate));
  padding-right: calc(30 * var(--rate));
  line-height: 1.3125;
}
.lp-faq-accordion-area .lp-faq-accordion-desc {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: calc(15 * var(--rate));
}
.lp-faq-accordion-area .lp-faq-accordion-desc--inner {
  padding-top: calc(7 * var(--rate));
  padding-right: calc(5 * var(--rate));
}
.lp-faq-accordion-area .lp-faq-accordion__link {
  text-decoration: underline;
}
.lp-faq-accordion-area .js-accordion-title {
  cursor: pointer;
}
.lp-faq-accordion-area .js-accordion-title .js-accordion-icon {
  position: absolute;
  display: block;
  top: calc(16 * var(--rate));
  right: calc(15 * var(--rate));
}
.lp-faq-accordion-area .js-accordion-title .js-accordion-icon:before, .lp-faq-accordion-area .js-accordion-title .js-accordion-icon:after {
  content: "";
  position: absolute;
  display: block;
  background-color: var(--color-text);
  width: calc(11 * var(--rate));
  height: calc(2 * var(--rate));
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  border-radius: calc(1 * var(--rate));
}
.lp-faq-accordion-area .js-accordion-title .js-accordion-icon:before {
  -webkit-transition: -webkit-transform 0.5s;
  transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  transition: transform 0.5s, -webkit-transform 0.5s;
  -webkit-transform: translate(-50%, -50%) rotate(90deg);
          transform: translate(-50%, -50%) rotate(90deg);
}
.lp-faq-accordion-area .js-accordion-title.active .js-accordion-icon:before {
  -webkit-transform: translate(-50%, -50%) rotate(0);
          transform: translate(-50%, -50%) rotate(0);
}

/* =====================================================================
*
*    pcレイアウト
*
* =================================================================== */
@media screen and (min-width: 992px) {
  :root {
    --rate: (450 / 375 * 1px);
  }
  /*--------------------------------------------
  フォント
  ---------------------------------------------*/
  /*--------------------------------------------
  カラー
  ---------------------------------------------*/
  /*--------------------------------------------
  サイト幅・ブレイクポイント
  ---------------------------------------------*/
  /*--------------------------------------------
  イージング
  ---------------------------------------------*/
  /*--------------------------------------------
  使い方
  ---------------------------------------------*/
  /*--------------------------------------------
  フォントサイズ・余白などのレスポンシブ対応
  ---------------------------------------------*/
  /*--------------------------------------------
  メディアクエリ
  ---------------------------------------------*/
  /*--------------------------------------------
  ホバー
  ---------------------------------------------*/
  /*--------------------------------------------
  上下左右中央配置（センター配置）
  ---------------------------------------------*/
  /*--------------------------------------------
  line-clamp
  ---------------------------------------------*/
  :root {
    --rate: 450 / 375 * 1px;
  }
  /* =================================================
  *    共通(pc)
  * =============================================== */
  /* =================================================
  *    ボタン(pc)
  * =============================================== */
  .lp-btn-wrap--fixed {
    display: none;
  }
  /* =================================================
  *    レイアウト(pc)
  * =============================================== */
  .lp-wrapper {
    position: relative;
    padding-top: 40px;
    padding-bottom: 80px;
  }
  .lp-wrapper-bg {
    position: fixed;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100vh;
    background: url(../../img/cartlp/top/bg_pc.png) no-repeat bottom left/cover;
    z-index: -1;
  }
  .lp-wrapper-inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    width: 870px;
    margin-inline: auto;
  }
  .lp-sidebar {
    width: 320px;
    padding-top: 40px;
  }
  .lp-sidebar--sticky {
    position: sticky;
    top: 80px;
  }
  .lp-sp-wrapper {
    width: 450px;
    border-radius: 20px;
    -webkit-box-shadow: 0 0 40px rgba(100, 88, 72, 0.16);
            box-shadow: 0 0 40px rgba(100, 88, 72, 0.16);
  }
  /* =================================================
  *    ローカルナビ(pc)
  * =============================================== */
  .lp-local-nav {
    margin-top: 45px;
  }
  .lp-local-nav li + li {
    margin-top: 8px;
  }
  .lp-local-nav a {
    position: relative;
    display: inline-block;
    font-size: 19px;
    font-weight: var(--fw-bold);
    -webkit-transition: -webkit-transform 0.4s;
    transition: -webkit-transform 0.4s;
    transition: transform 0.4s;
    transition: transform 0.4s, -webkit-transform 0.4s;
    will-change: transform;
  }
}
@media screen and (min-width: 992px) and (hover: none) {
  .lp-local-nav a {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  .lp-local-nav a:active {
    -webkit-transform: translateX(25px);
            transform: translateX(25px);
    opacity: 1;
  }
}
@media screen and (min-width: 992px) and (-ms-high-contrast: none), screen and (min-width: 992px) and (-ms-high-contrast: active), screen and (min-width: 992px) and (-moz-touch-enabled: 0), screen and (min-width: 992px) and (hover: hover) {
  .lp-local-nav a:hover {
    -webkit-transform: translateX(25px);
            transform: translateX(25px);
    opacity: 1;
  }
}
@media screen and (min-width: 992px) {
  .lp-local-nav__link {
    padding-left: 35px;
    background: url(../../img/cartlp/top/icon_arrow.svg) no-repeat center left/25px 25px;
  }
  .lp-local-under-nav {
    margin-top: 11px;
    margin-left: 36px;
  }
  .lp-local-under-nav__link {
    padding-left: 26px;
  }
  .lp-local-under-nav__link:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 18px;
    height: 2px;
    border-radius: 1px;
    background-color: var(--color-primary);
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  .lp-sidebar .lp-btn-wrap {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    margin-top: 46px;
  }
}
/* =====================================================================
*
*    spレイアウト
*
* =================================================================== */
@media screen and (max-width: 991.9px) {
  :root {
    --rate: (100vw / 375);
  }
  /*--------------------------------------------
  フォント
  ---------------------------------------------*/
  /*--------------------------------------------
  カラー
  ---------------------------------------------*/
  /*--------------------------------------------
  サイト幅・ブレイクポイント
  ---------------------------------------------*/
  /*--------------------------------------------
  イージング
  ---------------------------------------------*/
  /*--------------------------------------------
  使い方
  ---------------------------------------------*/
  /*--------------------------------------------
  フォントサイズ・余白などのレスポンシブ対応
  ---------------------------------------------*/
  /*--------------------------------------------
  メディアクエリ
  ---------------------------------------------*/
  /*--------------------------------------------
  ホバー
  ---------------------------------------------*/
  /*--------------------------------------------
  上下左右中央配置（センター配置）
  ---------------------------------------------*/
  /*--------------------------------------------
  line-clamp
  ---------------------------------------------*/
  /* =================================================
  *    レイアウト(sp)
  * =============================================== */
  .lp-sidebar {
    display: none;
  }
}