/** Shopify CDN: Minification failed

Line 1427:13 Expected ":"

**/
@charset "utf-8";

html {
  scroll-behavior: smooth;
}
:root {
  --sp-width: 700;
}

h1, h2, h3 {
  margin: 0;
}
.nav-01 {
  width: min(100%, 1920px);
  margin-inline: auto;
  position: fixed;
  top: 0;
  inset-inline: 0;
  margin: auto;
  z-index: 10;
  background-color: white;
}
.nav-01-in {
  width: 95%;
  margin-inline: auto; 
  height: 80px;
  padding: 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
  align-items: center;
}
.hlogo {
  display: block;
  width: 93px;
}

#headermenu-btn,
#headermenu {
  display: none;
}
@media screen and (max-width: 999.9px) {
  #headermenu-btn {
    display: block;
    width: 45px;/*★*/
    height: 45px;/*★*/
    position: relative;
    background-color: white;
    cursor: pointer;
    z-index: 2;
  }
  #headermenu-btn span {
    position: absolute;
    display: block;
    width: 55.556%;
    height: 5px;
    background-color: #666;
    left: 0;
    right: 0;
    margin: auto;
    transition: all .3s;
  }
  #headermenu-btn span:first-child {
    top: 22.223%;
  }
  #headermenu-btn span:nth-child(2) {
    top: 0;
    bottom: 0;
    opacity: 1;
  }
  #headermenu-btn span:nth-child(3) {
    bottom: 22.223%;
  }
  #headermenu-btn.clicked span:first-child {
    transform: rotate(45deg);/*★*/
    top: 47%;
  }
    #headermenu-btn.clicked span:nth-child(2) {
    opacity: 0;
  }
  #headermenu-btn.clicked span:nth-child(3) {
    transform: rotate(-45deg);/*★*/
    bottom: 41%;
  }

  #headermenu {
    display: none;  /* 最初は非表示 */
    z-index: 2;
    position: absolute;
    width: 100%;
    background-color: #e22310;
    padding: 32px 16px;
    top: 50px;
    left: 0;
    /*border-top: 2px solid #e22310;*/
    border-bottom: 2px solid white;
    /*filter: drop-shadow(0px 0px 3px rgba(0,0,0, 0.6));*/

  }

  .headermenu-list {
    list-style-type: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 16px; 
  }
  .headermenu-list > li {
  }
  .headermenu-list > li > a {
    display: block;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    color: white;
  }

}

.article__karamyon {
  background-color: white;
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
}
.contents-wrap {
  width: min(100%, 1920px);
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  position: relative;
  padding-top: 80px;
}
/*.contents-bg {
  width: min(100%, 1920px);
  height: 100vh;
  background: url(./images/kmy-002-pc.webp) no-repeat 50% 0;
  background-size: 1290px auto;
  position: fixed;
  top: 134px;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 0;
}*/
.contents-left-wrap {
  flex: 1105 1 0;
  position: relative;
  z-index: 1;
  background-color: #e22310;
}
.contents-right-wrap {
  flex: 344 1 0;
  position: relative;
  z-index: 1;
  background-color: #e22310;
}
.contents-left {
  position: sticky;
  top: 140px;
  container-type: inline-size;
  width: min(100%, 800px);
  margin-inline: auto;
  aspect-ratio: 10 / 9;
}
.contents-right {
  position: sticky;
  /*top: 150px;*/
  container-type: inline-size;
  
  top: calc(80px + 16px); /* ヘッダー高さ + 余白 */
  align-self: flex-start; /* ← これが必須！ */

  /* ビューポートからヘッダーを引いた高さを最大に */
  height: calc(100vh - 80px - 32px);

  /* 縦中央配置 */
  display: flex;
  flex-direction: column;
  align-items: center;

  /* フォールバック（Safari用） */
  justify-content: flex-start;
  /* safe対応ブラウザではこちらが上書き */
  justify-content: safe center;

  overflow-y: auto;  /* 万が一はみ出た場合のスクロール保険 */

}

.contents-center {
  position: relative;
  container-type: inline-size;
  width: min(100%, 471px);
  margin-inline: auto;
  border-right: 12px solid white;
  border-left: 12px solid white;
  z-index: 2;
  overflow: hidden;
}


.demae-0001a {
  list-style-type: none;
  position: absolute;
  display: block;
  width: calc(700 / 800 * 100cqi);
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 3;
}
.demae-0001c {
  list-style-type: none;
  position: absolute;
  display: block;
  width: calc(320 / 800 * 100cqi);
  top: calc(221 / 800 * 100cqi);
  right: calc(58 / 800 * 100cqi);

  z-index: 2;
}
.demae-0001b {
  list-style-type: none;
  position: absolute;
  display: block;
  width: calc(800 / 800 * 100cqi);
  top: calc(-35 / 800 * 100cqi);
  left: 0;
  right: 0;
  margin: auto;
  pointer-events: none;
}

.demae__yuge {
  position: absolute;
  top: calc(100 / 800 * 100cqi);
  left: 0;
  width: 100%;
  aspect-ratio: 100 / 60;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  mask-image: linear-gradient(to top, transparent 0%, black 5%, black 95%, transparent 100%);
  /*border: 1px solid white;*/
}
.yuge-img {
  position: absolute;
  opacity: 0;
  inset-inline: 0;
  margin: auto;
  width: 100%;
  transform-origin: bottom center;
}
#yuge-ani-1 {
  animation: 3.3s ease-out 0s infinite;
}
#yuge-ani-2 {
  animation: 3.3s ease-out 1.1s infinite;
}
#yuge-ani-3 {
  animation: 3.3s ease-out 2.2s infinite;
}
#yuge-ani-1,
#yuge-ani-2,
#yuge-ani-3 {
  animation-name: yuge-1-pc
}
@keyframes yuge-1-pc {
  0% {
    opacity: 0;
    bottom: -20%;
    scale: 0.8 1;
  }
  50% {
    opacity: 0.7;
  }
  100% {
    opacity: 0;
    bottom: 0;
    scale: 1.1 1.5;
  }
}

.demae__list-01 {
  list-style-type: none;
  /*position: absolute;*/
  display: block;
  width: min(90%, 240px);
  /*top: calc(70 / 344 * 100cqi);
  left: 0;
  right: 0;
  margin: auto;*/
}
.demae__list-01 > li:not(:last-child) {
  margin-bottom: calc(30 / 344 * 100cqi);
}

@media screen and (max-width: 999.9px) {

  .nav-01-in {
    height: 50px;
    padding: 0;
  }
  .hlogo {
    width: 60px;
  }
  .contents-wrap {
    background-color: #e22310;
    padding-top: 50px;
  }

  .contents-left-wrap,
  .contents-right-wrap {
    display: none;
  }
  .contents-center {
    border-right: none;
    border-left: none;
  }

}
@media screen and (max-width: 809.9px) {


  .contents-wrap {
    background-image: none;
  }

}

.c-announcement-bar {
  display: none;
}
.breadcrumb {
  display: none;
}
.shopify-section-group-footer-group {
  z-index: 2;
  position: relative;
  background-color: white;
}
/*.ProductList {
  margin-bottom: 0 !important;
}*/

.fv__wrap {
  background-color: #e22310;

}
.fv {
  position: relative;
  aspect-ratio: 700 / 1540;
  container-type: inline-size;
  width: 75%;
  margin-inline: auto;
}


.demae__title {
  width: calc(598 / var(--sp-width) * 100cqi);
  position: absolute;
  top: calc(22 / var(--sp-width) * 100cqi);
  left: 0;
  right: 0;
  margin: auto;
  transform: scale(2);
  opacity: 0;
}
.karamyon__title img {
  display: block;
}
.demae__title__anime {
  animation-duration: 0.5s;
  animation-fill-mode: both;
  animation-iteration-count: 1;
  animation-name: poyon;
  transform-origin: center center;
  animation-timing-function: ease-out;
}
@keyframes poyon {
  /*0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  15%  { transform: scale(0.9, 0.9) translate(0%, 5%); }
  30%  { transform: scale(1.3, 0.8) translate(0%, 10%); }
  50%  { transform: scale(0.8, 1.3) translate(0%, -10%); }
  70%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }*/
  0%   { transform: scale(2); opacity: 0; }
  100% { transform: scale(1.0); opacity: 1; }
}
/* 坊や */
.demae-003 {
  opacity: 0;
  transform: translateY(20px);
}
.demae-003anime {
  animation: fadeIn 1s ease 0.3s forwards;
}
@keyframes fadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* 昔なつかし中華そば */
.demae-005 {
  width: calc(690 / var(--sp-width) * 100cqi);
  position: absolute;
  bottom: calc(-20 / var(--sp-width) * 100cqi);
  left: 0;
  right: 0;
  margin: auto;
  z-index: 4;
  opacity: 0;
  /*transform: translateY(20px);*/
}
.demae-005anime {
  animation: fadeIn 1s ease 0.3s forwards;
}
/* どんぶり */
.demae-007 {
  opacity: 0;
  max-width: none;
  width: calc(1000 / var(--sp-width) * 100cqi);
  position: absolute;
  top: calc(669 / var(--sp-width) * 100cqi);
  inset-inline: -100px;
  margin: auto;
  transform: translateY(20px) scale(0.8,0.8);
  z-index: 3;
}
.demae-007anime0 {
  animation: fadeIn2 1s ease-out 0.3s forwards;
}
@keyframes fadeIn2 {
  to {
    opacity: 1;
    transform: translateY(0) scale(0.8,0.8);
  }
}
.demae-007anime {
  animation-duration: 0.5s;
  animation-fill-mode: both;
  animation-iteration-count: 1;
  animation-name: don1;
  transform-origin: center center;
  animation-timing-function: ease-in-out;
  /*animation-name: heartBeat;
  animation-duration: 1.3s;
  animation-timing-function: ease-in-out;*/

}

@keyframes don1 {
	0% {
		/*animation-timing-function: linear;*/
		transform: scale(0.8,0.8);
		opacity: 1.0;
	}
  70% {
    transform: scale(1.25);
  }
    100% {
		/*animation-timing-function: ease-in-out;*/
		transform: scale(1,1);
		opacity: 1.0;
	}
}
@keyframes heartBeat {
  0% {
    transform: scale(1)
  }
  14% {
    transform: scale(1.3)
  }
  28% {
    transform: scale(1)
  }
  42% {
    transform: scale(1.3)
  }
  70% {
    transform: scale(1)
  }
  100% {
    transform: scale(1)
  }
}

/* だじょ */
.demae-037 {
  width: calc(514 / var(--sp-width) * 100cqi);
  position: absolute;
  top: calc(305 / var(--sp-width) * 100cqi);
  left: calc(23 / var(--sp-width) * 100cqi);
  opacity: 0;
}
.demae-037anime {
  /*animation-duration: 0.8s;
  animation-fill-mode: both;
  animation-iteration-count: 1;
  animation-name: bounceIn;
  transform-origin: center center;
  animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);*/
  animation-duration: 0.2s;
  animation-fill-mode: both;
  animation-iteration-count: 1;
  animation-name: don1;
  transform-origin: center center;
}
@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(.3);
  }
  20% {
    transform: scale(1.3);
  }
  40% {
    transform: scale(.9);
  }
  60% {
    opacity: 1;
    transform: scale(1.2);
  }
  80% {
    transform: scale(.97);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}



.fv__next {
  position: relative;
  background-color: #086591;
}
.fv__next:before {
  content: "";
  width: 100%;
  aspect-ratio: 700 / 57;
  background: url(/cdn/shop/files/demae-006.webp) no-repeat 50% 0;
  background-size: contain;
  position: absolute;
  top: 0;
  inset-inline: 0;
  margin: auto;
}

.demae-008-00 {
  display: block;
  position: absolute;
  width: 100%;
  top: calc(127 / var(--sp-width) * 100cqi);
  left: 0;
}
.demae-038-01, 
.demae-038-02, 
.demae-038-03, 
.demae-038-04, 
.demae-038-05, 
.demae-038-06, 
.demae-038-07, 
.demae-038-08, 
.demae-038-09, 
.demae-038-10, 
.demae-038-11, 
.demae-038-12, 
.demae-038-13 {
  display: block;
  position: absolute;
  width: 100%;
  left: 0;
}

.demae-038-01 {
  top: calc(124 / var(--sp-width) * 100cqi);
}
.demae-038-02 {
  top: calc(172 / var(--sp-width) * 100cqi);
}
.demae-038-03 {
  top: calc(346 / var(--sp-width) * 100cqi);
}
.demae-038-04 {
  top: calc(401 / var(--sp-width) * 100cqi);
}
.demae-038-05 {
  top: calc(504 / var(--sp-width) * 100cqi);
}
.demae-038-06 {
  top: calc(617 / var(--sp-width) * 100cqi);
}
.demae-038-07 {
  top: calc(680 / var(--sp-width) * 100cqi);
}
.demae-038-08 {
  top: calc(746 / var(--sp-width) * 100cqi);
  width: calc(532 / var(--sp-width) * 100cqi);
  inset-inline: 0;
  margin: auto;
}
.demae-038-09 {
  top: calc(851 / var(--sp-width) * 100cqi);
}
.demae-038-10 {
  top: calc(907 / var(--sp-width) * 100cqi);
}
.demae-038-11 {
  top: calc(1010 / var(--sp-width) * 100cqi);
}
.demae-038-12 {
  top: calc(1124 / var(--sp-width) * 100cqi);
}
.demae-038-13 {
  top: calc(1181 / var(--sp-width) * 100cqi);
}

.fuwa01 {
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);

  opacity: 0;
  translate: 0 20px; 
}
.fuwa01.is-active {
    opacity: 1;
    translate: 0;
    transition-timing-function:
      opacity var(--ease-out-cubic),
      translate var(--ease-out-quint);
    transition-duration: 1.8s;
}
.fuwa02 {
  opacity: 0;
/*  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);

  opacity: 1;
  translate: -50% 10px;*/
}
.fuwa02.is-active {
 	animation-duration: 1s;
	animation-fill-mode: both;
	animation-iteration-count: 1;
  animation-name: fuwa02;
  transform-origin: center center;
/*    opacity: 1;
    translate: 0;
    transition-timing-function:
      opacity var(--ease-out-cubic),
      translate var(--ease-out-quint);
    transition-duration: 1.8s;*/
}
@keyframes fuwa02 {
	from {
		animation-timing-function: ease-in-out;
		transform: translate(-100%,0px);
		opacity: 1.0;
	} to {
		animation-timing-function: linear;
		transform: translate(0px,0px);
		opacity: 1;
	} 
}
.fuwa03 {
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);

  opacity: 0;
  translate: 0 10px;
  scale: 0.25 1;
  transform-origin: 0 100%;
}
.fuwa03.is-active {
    opacity: 1;
    translate: 0;
    scale: 1;
    transition-timing-function:
      opacity var(--ease-out-cubic),
      translate var(--ease-out-quint);
    transition-duration: 1s;
}
.fuwa04 {
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);

  opacity: 0;
  translate: 0; 
}
.fuwa04.is-active {
    opacity: 1;
    translate: 0;
    transition-timing-function:
      opacity var(--ease-out-cubic),
      translate var(--ease-out-quint);
    transition-duration: 2s;
}

/*-----------------------------------------------------
@@ sec01
------------------------------------------------------*/
.sec01 {
  background-color: #e22310;
  margin-top: -1px;
  padding-bottom: calc(77 / var(--sp-width) * 100cqi);
  position: relative;
}

.character_title {
  margin: 0;
}

/* キャラクター */
/* 出前坊や */
.demae-chara-01 {
  position: relative;
  aspect-ratio: 700 / 665;
  /*overflow: hidden;*/
}
.demae-chara-01-back {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left:0;
  background-color: #fcea00;
  clip-path: polygon(0 23.9%, 100% 1.5%, 100% 100%, 0 100%);
}
.demae-chara-01-p {
  font-size: calc(24 / var(--sp-width) * 100cqi);
  font-weight: 700;
  line-height: 1.5;
  width: calc(620 / var(--sp-width) * 100cqi);
  position: absolute;
  inset-inline: 0;
  bottom: calc(41 / var(--sp-width) * 100cqi);
  margin: auto;
  font-feature-settings: "palt" 1;
}
.demae-chara-01-title {
  display: block;
  margin: 0;
  height: calc(121 / var(--sp-width) * 100cqi);
  aspect-ratio: 309 / 121;
  position: absolute;
  top: calc(52 / var(--sp-width) * 100cqi);
  left: calc(11 / var(--sp-width) * 100cqi);
}
.demae-chara-01-chara {
  display: block;
  margin: 0;
  width: calc(567 / var(--sp-width) * 100cqi);
  position: absolute;
  top: calc(5 / var(--sp-width) * 100cqi);
  left: calc(95 / var(--sp-width) * 100cqi);
}
.demae-chara-01-fukidasi {
  display: block;
  margin: 0;
  width: calc(123 / var(--sp-width) * 100cqi);
  position: absolute;
  top: calc(144 / var(--sp-width) * 100cqi);
  right: calc(12 / var(--sp-width) * 100cqi);
}

/* 出前パパ */
.demae-chara-02 {
  position: relative;
  aspect-ratio: 700 / 431;
  /*overflow: hidden;*/
}
.demae-chara-02-back {
  width: calc(667 / var(--sp-width) * 100cqi);
  height: calc(322 / var(--sp-width) * 100cqi);
  position: absolute;
  bottom: 0;
  left:0;
  background-color: #fcea00;
  border-radius: 0 calc(161 / var(--sp-width) * 100cqi) 0 0;
}
.demae-chara-02-p {
  font-size: calc(24 / var(--sp-width) * 100cqi);
  font-weight: 700;
  line-height: 1.5;
  width: calc(332 / var(--sp-width) * 100cqi);
  position: absolute;
  left: calc(41 / var(--sp-width) * 100cqi);
  bottom: calc(41 / var(--sp-width) * 100cqi);
  margin: auto;
  font-feature-settings: "palt" 1;
}
.demae-chara-02-title {
  display: block;
  margin: 0;
  height: calc(121 / var(--sp-width) * 100cqi);
  aspect-ratio: 309 / 121;
  position: absolute;
  top: calc(52 / var(--sp-width) * 100cqi);
  left: calc(34 / var(--sp-width) * 100cqi);
}
.demae-chara-02-chara {
  display: block;
  margin: 0;
  width: calc(211 / var(--sp-width) * 100cqi);
  position: absolute;
  top: calc(151/ var(--sp-width) * 100cqi);
  right: calc(62 / var(--sp-width) * 100cqi);
}
.demae-chara-02-fukidasi {
  display: block;
  margin: 0;
  width: calc(119 / var(--sp-width) * 100cqi);
  position: absolute;
  top: calc(142 / var(--sp-width) * 100cqi);
  right: calc(10 / var(--sp-width) * 100cqi);
}

/* 出前ママ */
.demae-chara-03 {
  position: relative;
  aspect-ratio: 700 / 376;
  /*overflow: hidden;*/
}
.demae-chara-03-back {
  width: calc(667 / var(--sp-width) * 100cqi);
  height: calc(262/ var(--sp-width) * 100cqi);
  position: absolute;
  bottom: 0;
  right:0;
  background-color: #fcea00;
  border-radius: calc(131 / var(--sp-width) * 100cqi) 0 0 0;
}
.demae-chara-03-p {
  font-size: calc(24 / var(--sp-width) * 100cqi);
  font-weight: 700;
  line-height: 1.5;
  width: calc(320 / var(--sp-width) * 100cqi);
  position: absolute;
  right: calc(41 / var(--sp-width) * 100cqi);
  bottom: calc(41 / var(--sp-width) * 100cqi);
  margin: 0;
  font-feature-settings: "palt" 1;
}
.demae-chara-03-title {
  display: block;
  margin: 0;
  height: calc(121 / var(--sp-width) * 100cqi);
  aspect-ratio: 309 / 121;
  position: absolute;
  top: calc(51 / var(--sp-width) * 100cqi);
  left: calc(326 / var(--sp-width) * 100cqi);
}
.demae-chara-03-chara {
  display: block;
  margin: 0;
  width: calc(233 / var(--sp-width) * 100cqi);
  position: absolute;
  top: calc(200 / var(--sp-width) * 100cqi);
  left: calc(66 / var(--sp-width) * 100cqi);
}
.demae-chara-03-fukidasi {
  display: block;
  margin: 0;
  width: calc(116 / var(--sp-width) * 100cqi);
  position: absolute;
  top: calc(87 / var(--sp-width) * 100cqi);
  left: calc(10 / var(--sp-width) * 100cqi);
}

/* 出前ちゃん */
.demae-chara-04 {
  position: relative;
  aspect-ratio: 700 / 380;
  /*overflow: hidden;*/
}
.demae-chara-04-back {
  width: calc(667 / var(--sp-width) * 100cqi);
  height: calc(262/ var(--sp-width) * 100cqi);
  position: absolute;
  bottom: 0;
  left:0;
  background-color: #fcea00;
  border-radius: 0 calc(131 / var(--sp-width) * 100cqi) 0 0;
}
.demae-chara-04-p {
  font-size: calc(24 / var(--sp-width) * 100cqi);
  font-weight: 700;
  line-height: 1.5;
  width: calc(320 / var(--sp-width) * 100cqi);
  position: absolute;
  left: calc(41 / var(--sp-width) * 100cqi);
  bottom: calc(41 / var(--sp-width) * 100cqi);
  margin: 0;
  font-feature-settings: "palt" 1;
}
.demae-chara-04-title {
  display: block;
  margin: 0;
  height: calc(121 / var(--sp-width) * 100cqi);
  aspect-ratio: 376 / 121;
  position: absolute;
  top: calc(59 / var(--sp-width) * 100cqi);
  left: calc(34 / var(--sp-width) * 100cqi);
}
.demae-chara-04-chara {
  display: block;
  margin: 0;
  width: calc(202 / var(--sp-width) * 100cqi);
  position: absolute;
  top: calc(243/ var(--sp-width) * 100cqi);
  right: calc(71 / var(--sp-width) * 100cqi);
}
.demae-chara-04-fukidasi {
  display: block;
  margin: 0;
  width: calc(113 / var(--sp-width) * 100cqi);
  position: absolute;
  top: calc(107 / var(--sp-width) * 100cqi);
  right: calc(13 / var(--sp-width) * 100cqi);
}

/* 出前ばあちゃん */
.demae-chara-05 {
  position: relative;
  aspect-ratio: 700 / 376;
  /*overflow: hidden;*/
}
.demae-chara-05-back {
  width: calc(667 / var(--sp-width) * 100cqi);
  height: calc(262/ var(--sp-width) * 100cqi);
  position: absolute;
  bottom: 0;
  right:0;
  background-color: #fcea00;
  border-radius: calc(131 / var(--sp-width) * 100cqi) 0 0 0;
}
.demae-chara-05-p {
  font-size: calc(24 / var(--sp-width) * 100cqi);
  font-weight: 700;
  line-height: 1.5;
  width: calc(320 / var(--sp-width) * 100cqi);
  position: absolute;
  right: calc(41 / var(--sp-width) * 100cqi);
  bottom: calc(41 / var(--sp-width) * 100cqi);
  margin: 0;
  font-feature-settings: "palt" 1;
}
.demae-chara-05-title {
  display: block;
  margin: 0;
  height: calc(121 / var(--sp-width) * 100cqi);
  aspect-ratio: 376 / 121;
  position: absolute;
  top: calc(59 / var(--sp-width) * 100cqi);
  left: calc(306 / var(--sp-width) * 100cqi);
}
.demae-chara-05-chara {
  display: block;
  margin: 0;
  width: calc(203 / var(--sp-width) * 100cqi);
  position: absolute;
  top: calc(200 / var(--sp-width) * 100cqi);
  left: calc(67 / var(--sp-width) * 100cqi);
}
.demae-chara-05-fukidasi {
  display: block;
  margin: 0;
  width: calc(118 / var(--sp-width) * 100cqi);
  position: absolute;
  top: calc(67 / var(--sp-width) * 100cqi);
  left: calc(13 / var(--sp-width) * 100cqi);
}


.demae-chara-cover-l,
.demae-chara-cover-r {
 aspect-ratio: 1 / 1;
 position: absolute;
 bottom: 0;
}
.demae-chara-cover-l {
 background: url(/cdn/shop/files/demae-chara-cover-l.webp) no-repeat 0 100%;
 background-size: contain;
 left: calc(33 / var(--sp-width) * 100cqi);
}
.demae-chara-cover-r {
 background: url(/cdn/shop/files/demae-chara-cover-r.webp) no-repeat 100% 100%;
 background-size: contain;
 right: calc(33 / var(--sp-width) * 100cqi);
}
.demae-chara-cover-r-01 {
  width: calc(161 / var(--sp-width) * 100cqi);
}
.demae-chara-cover-l-02,
.demae-chara-cover-r-02 {
  width: calc(131 / var(--sp-width) * 100cqi);
}

.demae-chara-01-title img,
.demae-chara-02-title img,
.demae-chara-03-title img,
.demae-chara-04-title img,
.demae-chara-05-title img {
  display: block;
  /*max-width: max-content;
  max-height: 100%;*/
}

.demae-chara-wrap-r, 
.demae-chara-wrap-l {
  display: block;
  width: calc(317 / var(--sp-width) * 100cqi);
  aspect-ratio: 317 / 500;
  position: absolute;
  bottom: 0;
  overflow: hidden;
}
.demae-chara-wrap-r {
  right: calc(33 / var(--sp-width) * 100cqi);
}
.demae-chara-wrap-l {
  left: calc(33 / var(--sp-width) * 100cqi);
}

.demae-chara-01-chara_anime {
  animation: chara1 0.8s ease-in-out 0s 1;
}
@keyframes chara1 {
  /*0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  15%  { transform: scale(0.9, 0.9) translate(0%, 5%); }
  30%  { transform: scale(1.3, 0.8) translate(0%, 10%); }
  50%  { transform: scale(0.8, 1.3) translate(0%, -10%); }
  70%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }*/
  0%   { transform: translate(0%, 0%); }
  15%  { transform: translate(0%, 5%); }
  50%  { transform: translate(0%, -18%); }
  100% { transform: translate(0%, 0%); }
}

/* レイアウトシフト対策 */
.slider01 > div.slider01__item:not(:first-child),
.slider02 > div.slider02__item:not(:first-child) {
    display: none;
}

/*.slider01__wrap {
  aspect-ratio: 700 / 954;
}*/
/*.slider01.slick-slider {
  width: 70%;
  margin-inline: auto;
}*/
.slider01__item {
}
.slider01__image {
  width: 88.572%;
  margin-inline: auto;
  border-radius: 25px;
}
.slider01 .slick-prev,
.slider01 .slick-next {
  display: block;
  width: calc(83 / var(--sp-width) * 100cqi);
  aspect-ratio: 1/ 1;
  border: none;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
  position: absolute;
  inset-block: 0;
  margin: auto;
  z-index: 2;
}
.slider01 .slick-prev {
  left: 8px;
  background: url(/cdn/shop/files/demae-017l.webp) no-repeat 50% 50%;
  background-size: contain;
}
.slider01 .slick-next {
  right: 8px;
  background: url(/cdn/shop/files/demae-017r.webp) no-repeat 50% 50%;
  background-size: contain;
}

/*-----------------------------------------------------
@@ sec02
------------------------------------------------------*/
.sec02 {
  background-color: #fff045;
  margin-top: -1px;
  padding-bottom: calc(40 / var(--sp-width) * 100cqi);
  position: relative;
}


/*-----------------------------------------------------
@@ .sec03
------------------------------------------------------*/
.sec03 {
  background-color: #e1230e;
  margin-top: -1px;
  position: relative;
}

.demae__box-01 {
  background: #e1230e url(/cdn/shop/files/demae-022.webp) repeat-x 0 100%;
  background-size: auto 100%;
}
.demae-021 {
  display: block;
  width: calc(589 / var(--sp-width) * 100cqi);
  margin-inline: auto;
}
.demae-048 {
  margin-bottom: 20px;
}
.movie__wrap {
  width: 90%;
  margin-inline: auto;
}
.video169, .video34 {
  width:100%;
  height: auto;
  position: relative;
}
.video169 {aspect-ratio: 16 / 9;}
.video34  {aspect-ratio: 4 / 3;}

.video169 iframe, .video34 iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.demae__box-03 {
  background: transparent url(/cdn/shop/files/demae-025.webp) no-repeat 0 100%;
  background-size: 100% auto;
}
.demae__box-03-1 {
  width: 100%;
  aspect-ratio: 700 / 780;
  position: relative;
}
.demae-039-1 {
  display: block;
  width: calc(620 / var(--sp-width) * 100cqi);
  aspect-ratio: 620 / 39;
  position: absolute;
  top: calc(49 / var(--sp-width) * 100cqi);
  inset-inline: 0;
  margin: auto;
  opacity: 0;
}
.demae-039-2 {
  display: block;
  width: calc(620 / var(--sp-width) * 100cqi);
  aspect-ratio: 620 / 133;
  position: absolute;
  top: calc(108 / var(--sp-width) * 100cqi);
  inset-inline: 0;
  margin: auto;
  opacity: 0;
}
.demae-039-3 {
  display: block;
  width: calc(426 / var(--sp-width) * 100cqi);
  aspect-ratio: 426 / 254;
  position: absolute;
  top: calc(381 / var(--sp-width) * 100cqi);
  inset-inline: 0;
  margin: auto;
  opacity: 0;
}

.graph-01-wrap {
  display: block;
  width: calc(494/ var(--sp-width) * 100cqi);
  aspect-ratio: 1 / 1;
  position: absolute;
  top: calc(261 / var(--sp-width) * 100cqi);
  inset-inline: 0;
  margin: auto;
  opacity: 0;
}
.graph-01 {
  width: 100%;
  height: 100%;
  transform-origin: center;
  transform: rotate(-90deg);/* グラフのスタート位置を反時計回りに90度回転 */
  border-radius: 100vmax;
  background-color: #720922;
}
.graph-01-01 {
  display: block;
  fill: none;
  stroke:#fff100;
  stroke-width: 50%;
  stroke-dasharray: 0, 100;
}


.demae-039-1-anime {
 	animation: fadeIn 1s ease 0.3s forwards;
}
.demae-039-2-anime {
 	animation: fadeIn 1s ease 0.3s forwards;
}
.graph-01-wrap-anime {
 	animation: fadeIn 1s ease 0.3s forwards;
}
.demae-039-3-anime {
  animation: fadeIn 1s ease 0.3s forwards;
}
.graph-01-01-anime {
  animation: graph01 1.5s 0s forwards ease-in-out;
}

@keyframes graph01 {
  0% {
    stroke-dasharray: 0,100;
  }
  50%, 100% {
    stroke-dasharray: 81,100;
  }
}


.demae__box-03-2 {
  position: relative;
  aspect-ratio: 700 / 446;
}
.demae-043-1 {
  display: block;
  width: calc(427/ var(--sp-width) * 100cqi);
  aspect-ratio: 427 / 182;
  position: absolute;
  top: calc(21 / var(--sp-width) * 100cqi);
  left: calc(30 / var(--sp-width) * 100cqi);
  opacity: 0;
}
.demae-043-2 {
  display: block;
  width: calc(466/ var(--sp-width) * 100cqi);
  aspect-ratio: 466 / 182;
  position: absolute;
  top: calc(223 / var(--sp-width) * 100cqi);
  right: calc(39 / var(--sp-width) * 100cqi);
  opacity: 0;
}

.demae-043-1_anime {
  /*animation: fukidashi1 0.8s linear 0s 1 forwards;*/
  animation: fadeIn 1s ease 0.3s forwards;
}
@keyframes fukidashi1 {
  0%   { transform: scale(1.0, 1.0) translate(0%, 0%); opacity: 0;}
  15%  { transform: scale(0.9, 0.9) translate(5%, 0%); opacity: 1;}
  30%  { transform: scale(1.3, 0.8) translate(10%, 0%); }
  50%  { transform: scale(0.8, 1.3) translate(-10%, 0%); }
  70%  { transform: scale(1.1, 0.9) translate(5%, 0%); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); opacity: 1;}
}
.demae-043-2_anime {
  /*animation: fukidashi2 0.8s linear 0s 1 forwards;*/
  animation: fadeIn 1s ease 0.3s forwards;
}
@keyframes fukidashi2 {
  0%   { transform: scale(1.0, 1.0) translate(0%, 0%); opacity: 0;}
  15%  { transform: scale(0.9, 0.9) translate(5%, 0%); opacity: 1;}
  30%  { transform: scale(0.8, 1.3) translate(10%, 0%); }
  50%  { transform: scale(1.3, 0.8) translate(-10%, 0%); }
  70%  { transform: scale(0.9, 1.1) translate(5%, 0%); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); opacity: 1;}
}




.demae__box-02 {
  /*background: #e1230e url(/cdn/shop/files/demae-025.webp) repeat-x 0 100%;
  background-size: 100% auto;*/
}

.demae__p-01__wrap {
  background-color: rgba(225,35,14, 0.7);
  padding-block: calc(18 / var(--sp-width) * 100cqi);
}
.demae__p-01 {
  font-size: calc(18 / var(--sp-width) * 100cqi);
  line-height: 1.556;
  color: white;
  width: calc(661 / var(--sp-width) * 100cqi);
  margin-inline: auto;
}
/*-----------------------------------------------------
@@ sec04
------------------------------------------------------*/
.sec04 {
  background: #fce843 url(/cdn/shop/files/demae-031.webp) no-repeat 50% 50%;
  background-size: cover;
  margin-top: -1px;
  position: relative;
  padding-bottom: calc(114 / var(--sp-width) * 100cqi);
}

.demae-027 {
  display: block;
  width: calc(155 / var(--sp-width) * 100cqi);
  position: absolute;
  top: calc(86 / var(--sp-width) * 100cqi);
  right: calc(54 / var(--sp-width) * 100cqi);
  z-index: 3;
}

.slider02__wrap {
  padding-top: calc(50 / var(--sp-width) * 100cqi);
  padding-bottom: calc(192 / var(--sp-width) * 100cqi);
  position: relative;
}
.slider02 {
  width: calc(500 / var(--sp-width) * 100cqi);
  margin-inline: auto;
  background-color: black;
}
.slider02__item {
}
.slider02__image {
  width: 88.572%;
  margin-inline: auto;
  border-radius: 25px;
}
.slider02 .slick-prev,
.slider02 .slick-next {
  display: block;
  width: calc(52 / var(--sp-width) * 100cqi);
  aspect-ratio: 52/ 64;
  border: none;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
  position: absolute;
  inset-block: 0;
  margin: auto;
  z-index: 2;
}
.slider02 .slick-prev {
  left: calc(-98 / var(--sp-width) * 100cqi);
  background: url(/cdn/shop/files/demae-030l.webp) no-repeat 50% 50%;
  background-size: contain;
}
.slider02 .slick-next {
  right: calc(-98 / var(--sp-width) * 100cqi);
  background: url(/cdn/shop/files/demae-030r.webp) no-repeat 50% 50%;
  background-size: contain;
}

.demae-029 {
  display: block;
  width: calc(544 / var(--sp-width) * 100cqi);
  position: absolute;
  top: 0;
  inset-inline: 0;
  margin: auto;
  z-index: 2;
  pointer-events: none;
}


.mame {
  display: none;
  position: relative;
}

.mame.is-active {
  display: block;
  border: 6px solid #e22310;
  background-color: rgba(255,255,255, 0.9);
  padding: 16px;
  width: 80%;
  position: absolute;
  top: calc(30 / var(--sp-width) * 100cqi);
  min-height: calc(350 / var(--sp-width) * 100cqi);
  inset-inline: 0;
  margin: auto;
  z-index: 4;
  border-radius: 10px;
}

/* ×ボタン */
.mame__close {
  position: absolute;
  top: -20px;
  right: -20px;
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: block;
  cursor: pointer;
  background: url(/cdn/shop/files/demae-032.webp) no-repeat 50% 50%;
  background-size: contain;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
.mame p {
  font-size: 18px;
  font-weight: 700;
  line-height. 1,5;
}
/*-----------------------------------------------------
@@ sec05
------------------------------------------------------*/
.sec05 {
  background: #e22310;
  margin-top: -1px;
  position: relative;
  padding-bottom: calc(50 / var(--sp-width) * 100cqi);
}

.demae__box-04 {
  position: relative;
}

.demae-041 {/* 出前一丁をあえてネットで買ってみる */
  display: block;
  width: calc(620 / var(--sp-width) * 100cqi);
  aspect-ratio: 620 / 165;
  position: absolute;
  top: calc(446 / var(--sp-width) * 100cqi);
  inset-inline: 0;
  margin: auto;
}
.demae-045 {/* 出前一丁をあえてネットで買ってみる */
  display: block;
  width: calc(620 / var(--sp-width) * 100cqi);
  aspect-ratio: 620 / 185;
  position: absolute;
  top: calc(426 / var(--sp-width) * 100cqi);
  inset-inline: 0;
  margin: auto;
  opacity: 0;
}
.demae-044 {/* あえて */
  display: block;
  width: calc(188 / var(--sp-width) * 100cqi);
  aspect-ratio: 188 / 101;
  position: absolute;
  top: calc(425 / var(--sp-width) * 100cqi);
  left: calc(355 / var(--sp-width) * 100cqi);
  opacity: 0;
}
.demae-044-anime {
    animation: aete 0.3s ease 0.3s forwards;
}

.demae-042-01 {/* あ */
  display: block;
  width: calc(80 / var(--sp-width) * 100cqi);
  aspect-ratio: 80 / 103;
  position: absolute;
  top: calc(425 / var(--sp-width) * 100cqi);
  left: calc(351 / var(--sp-width) * 100cqi);
  opacity: 0;
}
.demae-042-02 {/* え */
  display: block;
  width: calc(80 / var(--sp-width) * 100cqi);
  aspect-ratio: 80 / 103;
  position: absolute;
  top: calc(425 / var(--sp-width) * 100cqi);
  left: calc(412 / var(--sp-width) * 100cqi);
  opacity: 0;
}
.demae-042-03 {/* て */
  display: block;
  width: calc(80 / var(--sp-width) * 100cqi);
  aspect-ratio: 80 / 103;
  position: absolute;
  top: calc(425 / var(--sp-width) * 100cqi);
  left: calc(465 / var(--sp-width) * 100cqi);
  opacity: 0;
}

.demae-042-anime {
    animation: aete 0.5s ease 0.3s forwards;
}
@keyframes aete {
  0% {
    opacity: 0;
    transform: scale(1.75);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}


.ProductList--grid {
  padding: 0 !important;
}
.ProductList--removeMargin[data-desktop-count="2"] {
  margin-inline: auto;
  gap: 10px 0;
  width: 88.572%;
}
.ProductList--grid[data-desktop-count="2"]>.Grid__Cell {
  padding: 0;
}
.ProductList--grid[data-desktop-count="2"]>.Grid__Cell {
  margin-bottom: 0;
}
@media screen and (min-width: 1140px) {
}
  .\31\/2--lap-and-up, .\32\/4--lap-and-up, .\36\/12--lap-and-up {
    width: 100%;
  }
@media screen and (min-width: 1008px) {
}


/*-----------------------------------------------------
@@ sec06
------------------------------------------------------*/
.sec06 {
  background: #e22310;
  margin-top: -1px;
  position: relative;
  padding-bottom: calc(108 / var(--sp-width) * 100cqi);
}

.slider03__item {
}
.slider03__image {
  width: 83.857%;
  margin-inline: auto;
  border-radius: 25px;
}
.slider03 .slick-prev,
.slider03 .slick-next {
  display: block;
  width: calc(83 / var(--sp-width) * 100cqi);
  aspect-ratio: 1/ 1;
  border: none;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
  position: absolute;
  inset-block: 0;
  margin: auto;
  z-index: 2;
}
.slider03 .slick-prev {
  left: 8px;
  background: url(/cdn/shop/files/demae-017l.webp) no-repeat 50% 50%;
  background-size: contain;
}
.slider03 .slick-next {
  right: 8px;
  background: url(/cdn/shop/files/demae-017r.webp) no-repeat 50% 50%;
  background-size: contain;
}