@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap");
:root {
  --vw: 1vw;
  --gutter: 2.5rem;
}

body,
input,
select,
textarea,
button {
  font-family: "Noto Sans JP", Helvetica, Arial, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Hiragino Sans", "メイリオ", "Meiryo", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

.u-bold {
  font-weight: 700;
}

.u-black {
  font-weight: 900;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  min-inline-size: 0;
}

html,
body,
h1,
h2,
h3,
h4,
ul,
ol,
dl,
li,
dt,
dd,
p,
div,
span,
img,
a,
table,
tr,
th,
td {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
}

article,
header,
footer,
main,
aside,
figure,
figcaption,
nav,
section {
  display: block;
}

html {
  font-size: max(1rem, 14px);
}
@media screen and (max-width: 1280px) {
  html {
    font-size: 1.25vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 4.2666666667vw;
  }
}

body {
  color: #614D40;
  background-color: #FAF4E8;
  margin: 0;
  padding: 0;
  line-height: 1.5;
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
  word-break: break-all;
  overflow-wrap: break-word;
  line-break: strict;
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  clear: both;
}

p {
  margin: 0;
}

strong {
  font-weight: bold;
}

hr {
  border: solid 1px #e6e6e6;
  margin: 0 0 20px;
}

img {
  max-width: 100%;
  width: 100%;
  height: auto;
  vertical-align: bottom;
  border: 0;
  outline: 0;
  transition: all 0.3s ease;
}

figure {
  padding: 0;
  margin: 0;
}

ol,
ul {
  margin: 0;
  padding: 0;
}

ul {
  list-style-type: "";
}

input,
textarea,
button {
  margin: 0;
  padding: 0;
  border-radius: 0;
  outline: 0;
  background: none;
}

button {
  border: 0;
  color: #614D40;
}

table {
  border-collapse: collapse;
}

a {
  color: #614D40;
  text-decoration: none;
  transition: all 300ms ease-in;
}
a img {
  backface-visibility: hidden;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  transition: opacity 300ms ease;
}
a[href^="tel:"] {
  pointer-events: none;
}
@media screen and (max-width: 768px) {
  a[href^="tel:"] {
    pointer-events: auto;
  }
}

@keyframes fade_up {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.l-container {
  overflow: hidden;
}
.l-container__header {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 10;
}

.l-header {
  padding: 2.5rem 0;
}
@media screen and (max-width: 768px) {
  .l-header {
    padding: 1.25rem 0;
  }
}
.l-header__logo {
  width: 8.75rem;
}

.l-footer {
  background-color: #FF0000;
  padding: 1rem 0;
}
.l-footer__copy {
  text-align: center;
  color: #fff;
  font-size: max(0.75rem, 10px);
}

.l-inner {
  position: relative;
  z-index: 1;
  width: calc(75rem + var(--gutter) * 2);
  padding: 0 calc(var(--gutter));
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .l-inner {
    width: 100%;
    padding: 0 1.25rem;
  }
}

.c-cs {
  border: 0.1875rem solid #473B33;
  border-radius: 0.625rem;
  background-color: #fff;
  padding: 4.1rem 0;
}
@media screen and (max-width: 768px) {
  .c-cs {
    padding: 5.7rem 0;
  }
}
.c-cs__txt {
  margin: 0 auto;
  width: 17rem;
}
@media screen and (max-width: 768px) {
  .c-cs__txt {
    width: 9.6rem;
  }
}

.p-fv {
  position: relative;
  background: url(/special/yawamochi-hotcake/assets/img/bg_fv01_01.png) no-repeat bottom center/cover;
  padding: 5.5rem 0 12.8rem;
}
@media screen and (max-width: 768px) {
  .p-fv {
    background-image: url(/special/yawamochi-hotcake/assets/img/bg_fv01_01_sp.png);
    padding: 5.8rem 0 5rem;
  }
}
.p-fv::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(/special/yawamochi-hotcake/assets/img/bg_fv01_02.png) no-repeat top center/100%;
}
@media screen and (max-width: 768px) {
  .p-fv::before {
    background-image: url(/special/yawamochi-hotcake/assets/img/bg_fv01_02_sp.png);
  }
}
.p-fv__ttl {
  width: 19.25rem;
  margin: 0 auto;
  padding-left: 4.9rem;
  box-sizing: content-box;
}
@media screen and (max-width: 768px) {
  .p-fv__ttl {
    width: 11.3125rem;
    padding-left: 2.9rem;
  }
}
.p-fv__imgs {
  position: relative;
  text-align: center;
  margin-top: 1.2rem;
}
@media screen and (max-width: 768px) {
  .p-fv__imgs {
    margin-top: 2rem;
  }
}
.p-fv__imgs > img {
  position: relative;
  z-index: 2;
  width: 75rem;
}
@media screen and (max-width: 768px) {
  .p-fv__imgs > img {
    width: 100%;
  }
}
.p-fv__img01 {
  position: absolute;
  width: 10.6875rem;
  top: -6.2rem;
  left: calc(50% - 21.3rem);
  transform: translateX(-50%);
}
@media screen and (max-width: 768px) {
  .p-fv__img01 {
    width: 4.3rem;
    top: -2.7rem;
    left: 1.15rem;
    transform: none;
  }
}
.p-fv__img02 {
  position: absolute;
  width: 13.3125rem;
  top: -4.2rem;
  left: calc(50% + 20.1rem);
  transform: translateX(-50%);
}
@media screen and (max-width: 768px) {
  .p-fv__img02 {
    top: -2rem;
    left: initial;
    right: -0.6rem;
    transform: none;
    width: 5.4rem;
  }
}
.p-fv__img02 > img {
  position: relative;
  z-index: 1;
}
.p-fv__img02-txt {
  position: absolute;
  top: -8.4rem;
  left: 1.2rem;
  width: 22.625rem;
}
@media screen and (max-width: 768px) {
  .p-fv__img02-txt {
    width: 8.1875rem;
    top: -4.2rem;
    left: -2.5rem;
  }
}
.p-fv__allergen {
  position: relative;
  z-index: 1;
  max-width: 50rem;
  margin: 3.8rem auto 0;
  border-radius: 1.25rem;
  background-color: #7C3C12;
  background: url(/special/yawamochi-hotcake/assets/img/bg_allergen01.png) no-repeat bottom center/cover !important;
  padding: 3.125rem 2.65625rem 3.8125rem;
}
@media screen and (max-width: 768px) {
  .p-fv__allergen {
    margin-top: 3.5rem;
    background-image: url(/special/yawamochi-hotcake/assets/img/bg_allergen01_sp.png);
    padding: 2.4rem;
    text-align: center;
  }
}
.p-fv__allergen-inner {
  display: grid;
  align-items: center;
  grid-template-columns: 11.3125rem 1fr;
  gap: 1.875rem;
}
@media screen and (max-width: 768px) {
  .p-fv__allergen-inner {
    display: block;
  }
}
@media screen and (max-width: 768px) {
  .p-fv__allergen-img {
    width: 8.4375rem;
    margin: 0 auto;
  }
}
.p-fv__allergen-txts {
  color: #fff;
}
@media screen and (max-width: 768px) {
  .p-fv__allergen-txts {
    margin-top: 1.7rem;
  }
}
.p-fv__allergen-txt {
  font-size: max(1rem, 14px);
  line-height: 1.35;
}
.p-fv__allergen-txt-sub--l {
  font-size: 2.125rem;
}
@media screen and (max-width: 768px) {
  .p-fv__allergen-txt-sub--l {
    display: block;
  }
}
.p-fv__allergen-txt-sub--m {
  font-size: max(1.3125rem, 16px);
}
@media screen and (max-width: 768px) {
  .p-fv__allergen-txt-sub--m {
    display: block;
  }
}
.p-fv__allergen-note {
  font-size: 0.84375rem;
  white-space: nowrap;
  position: relative;
  padding-left: 1em;
  margin-top: 1rem;
}
@media screen and (max-width: 768px) {
  .p-fv__allergen-note {
    padding-left: 0;
    white-space: wrap;
    font-size: 0.75rem;
  }
}
.p-fv__allergen-note::before {
  content: "※";
  position: absolute;
  top: 0;
  left: 0;
}
@media screen and (max-width: 768px) {
  .p-fv__allergen-note::before {
    position: relative;
  }
}
.p-fv__intro {
  margin-top: 3.75rem;
}
@media screen and (max-width: 768px) {
  .p-fv__intro {
    margin-top: 4.3rem;
  }
}
.p-fv__intro-inner {
  display: grid;
  grid-template-columns: 26.25rem 1fr;
  gap: 3.75rem;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .p-fv__intro-inner {
    display: block;
  }
}
@media screen and (max-width: 768px) {
  .p-fv__txts {
    margin-top: 2.65rem;
  }
}
.p-fv__txt02 {
  font-size: max(1.75rem, 18px);
  line-height: 2;
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  .p-fv__txt02 {
    font-size: 1.375rem;
    margin-top: 1.5rem;
  }
}

.p-story {
  padding: 6.3rem 0 3.75rem;
}
@media screen and (max-width: 768px) {
  .p-story {
    padding: 4.8rem 0 2.2rem;
  }
}
.p-story__ttl {
  width: 27.125rem;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .p-story__ttl {
    width: 15.75rem;
  }
}
.p-story__txt {
  text-align: center;
  font-size: max(1.375rem, 16px);
  line-height: 2;
  margin-top: 2.4rem;
}
@media screen and (max-width: 768px) {
  .p-story__txt {
    font-size: 1rem;
    text-align: justify;
    margin-top: 2rem;
  }
}
.p-story__imgs {
  margin-top: 1.9rem;
}
@media screen and (max-width: 768px) {
  .p-story__imgs {
    margin-top: 0.2rem;
  }
}
.p-story__imgs-inner {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
@media screen and (max-width: 768px) {
  .p-story__imgs-inner {
    gap: 0.7rem;
  }
}
.p-story__img02 {
  width: 36.25rem;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .p-story__img02 {
    margin-top: 1.2rem;
    width: 100%;
  }
}

.p-feature {
  padding: 3.75rem 0 7.7rem;
}
@media screen and (max-width: 768px) {
  .p-feature {
    padding: 2.2rem 0 5.6rem;
  }
}
.p-feature__ttl {
  width: 15.5rem;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .p-feature__ttl {
    width: 9rem;
  }
}
.p-feature__block {
  position: relative;
  margin-top: 4rem;
}
@media screen and (max-width: 768px) {
  .p-feature__block {
    margin-top: 2rem;
  }
}
.p-feature__block + .p-feature__block {
  margin-top: 6.45rem;
}
@media screen and (max-width: 768px) {
  .p-feature__block + .p-feature__block {
    margin-top: 3.2rem;
  }
}
.p-feature__ttl-sub {
  width: 10.3125rem;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .p-feature__ttl-sub {
    width: 7.5625rem;
  }
}
.p-feature__inner {
  display: grid;
  grid-template-columns: 1fr 36.25rem;
  gap: 2.5rem;
  margin-top: 1.875rem;
}
@media screen and (max-width: 768px) {
  .p-feature__inner {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    margin-top: 1.55rem;
  }
}
.p-feature__inner--narrow {
  gap: 1.5625rem;
}
@media screen and (max-width: 768px) {
  .p-feature__inner--narrow {
    gap: 2.5rem;
  }
}
.p-feature__inner--adj {
  margin-top: 3.2rem;
}
@media screen and (max-width: 768px) {
  .p-feature__inner--adj {
    flex-direction: column;
    margin-top: 1.1rem;
    gap: 1.8rem;
  }
}
.p-feature__inner--adj + .p-feature__inner--adj {
  margin-top: 2.2rem;
}
@media screen and (max-width: 768px) {
  .p-feature__inner--adj + .p-feature__inner--adj {
    margin-top: 0.7rem;
  }
}
.p-feature__img {
  background-color: #FAF4E8;
}
.p-feature__img--adj {
  margin-top: 1rem;
}
.p-feature__img > img {
  display: block;
  mix-blend-mode: darken;
}
.p-feature__txts {
  padding-top: 0.65rem;
}
.p-feature__txts-ttl01 {
  width: 32.5rem;
}
@media screen and (max-width: 768px) {
  .p-feature__txts-ttl01 {
    width: 17.5rem;
  }
}
.p-feature__txts-ttl02 {
  width: 16.25rem;
}
@media screen and (max-width: 768px) {
  .p-feature__txts-ttl02 {
    width: 8.6rem;
  }
}
.p-feature__txts-ttl03 {
  font-size: 1.5rem;
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  .p-feature__txts-ttl03 {
    font-size: 1.25rem;
  }
}
.p-feature__txts-ttl03-txt {
  display: block;
  font-size: 2.25rem;
}
@media screen and (max-width: 768px) {
  .p-feature__txts-ttl03-txt {
    font-size: 1.5625rem;
  }
}
.p-feature__txts-ttl03 + .p-feature__txts-txt {
  margin-top: 1.4rem;
}
@media screen and (max-width: 768px) {
  .p-feature__txts-ttl03 + .p-feature__txts-txt {
    margin-top: 0.8rem;
  }
}
.p-feature__txts-txt {
  font-size: max(1.375rem, 14px);
  line-height: 2;
  margin-top: 4.1rem;
}
@media screen and (max-width: 768px) {
  .p-feature__txts-txt {
    font-size: 1rem;
    margin-top: 1.8rem;
  }
}
.p-feature__txts-note {
  font-size: 0.90625rem;
  position: relative;
  margin-top: 1rem;
}
@media screen and (max-width: 768px) {
  .p-feature__txts-note {
    font-size: 0.75rem;
    line-height: 2;
    margin-top: 0.8rem;
  }
}
@media screen and (max-width: 768px) {
  .p-feature__txts-note .u-sp {
    display: inline-block !important;
  }
}
.p-feature__txt {
  width: 35rem;
  margin-top: 2.5rem;
}
@media screen and (max-width: 768px) {
  .p-feature__txt {
    width: 18.9rem;
    margin-top: 2.2rem;
  }
}
.p-feature__deco01 {
  position: absolute;
  top: -4.4rem;
  right: -35.3rem;
  width: 33.875rem;
}
.p-feature__deco02 {
  position: absolute;
  top: 5.4rem;
  left: -23.8rem;
  width: 13.5rem;
}
.p-feature__deco03 {
  position: absolute;
  top: -3.7rem;
  right: -28.8rem;
  width: 25.5625rem;
}

.p-information {
  background: url(/special/yawamochi-hotcake/assets/img/bg_info01.jpg) no-repeat top center/cover;
  padding: 7.5rem 0 7.75rem;
}
@media screen and (max-width: 768px) {
  .p-information {
    background-image: url(/special/yawamochi-hotcake/assets/img/bg_info01_sp.png);
    padding: 5rem 0 0;
  }
}
.p-information__recipe {
  margin-top: 2.5rem;
}
@media screen and (max-width: 768px) {
  .p-information__recipe {
    margin-top: 1.8rem;
  }
}
.p-information__recipe-ttl {
  width: 11.375rem;
}
@media screen and (max-width: 768px) {
  .p-information__recipe-ttl {
    width: 6.75rem;
  }
}
.p-information__recipe-txt {
  margin-top: -5rem;
}
@media screen and (max-width: 768px) {
  .p-information__recipe-txt {
    margin-top: -3.8rem;
    width: 101.5%;
  }
}
.p-information__flow {
  margin-top: 2.5rem;
}
.p-information__flow-ttl {
  width: 11.375rem;
}
@media screen and (max-width: 768px) {
  .p-information__flow-ttl {
    width: 6.75rem;
  }
}
.p-information__flow-list {
  margin-top: 2.4375rem;
  display: flex;
  gap: 1.25rem;
}
@media screen and (max-width: 768px) {
  .p-information__flow-list {
    margin-top: 1.1875rem;
    flex-direction: column;
    gap: 0.625rem;
  }
}
.p-information__flow-item {
  width: calc((100% - 3.75rem) / 4);
  background-color: #fff;
  border: 0.3125rem solid #C09058;
  border-radius: 1.875rem;
  overflow: hidden;
  padding: 1.45rem 1.45rem 1.6rem;
}
@media screen and (max-width: 768px) {
  .p-information__flow-item {
    width: 100%;
    border-radius: 0.9375rem;
    padding: 1.5rem 1.6rem 2.3rem;
  }
}
@media screen and (max-width: 768px) {
  .p-information__flow-item > img {
    display: block;
    width: 14.0625rem;
    margin: 0 auto;
  }
}
.p-information__flow-item-ttl {
  font-size: max(1.375rem, 18px);
  font-weight: 700;
  margin-top: 1.5rem;
}
.p-information__flow-item-txt {
  font-size: max(1rem, 14px);
  margin-top: 0.7rem;
}
.p-information__product {
  margin-top: 2.4rem;
  background-color: #fff;
  border: 0.3125rem solid #C09058;
  border-radius: 14.375rem;
  overflow: hidden;
  padding: 5.2rem;
}
@media screen and (max-width: 768px) {
  .p-information__product {
    margin-top: 3.1rem;
    border-radius: 2.5rem;
    padding: 3.2rem 1rem 3.4rem;
  }
}
.p-information__product-ttl {
  width: 11.5rem;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .p-information__product-ttl {
    width: 8.6rem;
  }
}
.p-information__product-inner {
  margin: 3.1rem auto 0;
  max-width: 46rem;
  display: grid;
  grid-template-columns: 15.125rem 1fr;
  gap: 3.75rem;
}
@media screen and (max-width: 768px) {
  .p-information__product-inner {
    display: block;
    margin-top: 2.4rem;
    max-width: initial;
  }
}
@media screen and (max-width: 768px) {
  .p-information__product-img {
    width: 8.1rem;
    margin: 0 auto;
  }
}
@media screen and (max-width: 768px) {
  .p-information__product-txts {
    margin-top: 2rem;
  }
}
.p-information__product-txts-ttl {
  width: 24.5625rem;
}
@media screen and (max-width: 768px) {
  .p-information__product-txts-ttl {
    width: 16.3rem;
  }
}
.p-information__product-txts-txt {
  font-size: max(1rem, 14px);
  margin-top: 1.8rem;
  text-align: justify;
  padding-right: 3rem;
}
@media screen and (max-width: 768px) {
  .p-information__product-txts-txt {
    font-size: 1rem;
    margin-top: 1rem;
    padding-right: 0;
  }
}
.p-information__product-txts-btn {
  margin-top: 2.6rem;
}
@media screen and (max-width: 768px) {
  .p-information__product-txts-btn {
    text-align: center;
    margin-top: 1.8rem;
  }
}
.p-information__product-txts-btn > a {
  border: 0.1875rem solid #614D40;
  display: inline-block;
  font-size: max(1.125rem, 16px);
  color: #fff;
  background-color: #614D40;
  border-radius: 999rem;
  padding: 0.7rem 3.5rem 0.9rem;
}
@media (hover: hover) {
  .p-information__product-txts-btn > a:hover {
    background-color: #fff;
    color: #614D40;
  }
}
.p-information__product-deco {
  position: absolute;
  bottom: -5.2rem;
  right: 2.5rem;
  width: 15.75rem;
}

.p-recipe {
  background: url(/special/yawamochi-hotcake/assets/img/bg_recipe01.png) no-repeat top center/cover;
  padding-bottom: 7.2rem;
}
@media screen and (max-width: 768px) {
  .p-recipe {
    padding: 4.7rem 0 6rem;
    background-image: url(/special/yawamochi-hotcake/assets/img/bg_recipe01_sp.png);
  }
}
.p-recipe__ttl {
  width: 27.0625rem;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .p-recipe__ttl {
    width: 15.8rem;
  }
}
@media screen and (max-width: 768px) {
  .p-recipe__list-wrap {
    padding: 0 1.25rem;
  }
}
.p-recipe__list.slick-dotted.slick-slider {
  margin: 3rem 0 1.25rem;
}
@media screen and (max-width: 768px) {
  .p-recipe__list.slick-dotted.slick-slider {
    margin: 2rem 0 1.92rem;
  }
}
.p-recipe__list .slick-list {
  margin: 0 -0.75rem;
}
.p-recipe__list .slick-slide {
  margin: 0 0.75rem;
}
.p-recipe__list .slick-arrow {
  z-index: 1;
  width: 4.375rem;
  height: 4.375rem;
  transition: opacity 300ms ease-in;
}
@media (hover: hover) {
  .p-recipe__list .slick-arrow:hover {
    opacity: 0.75;
  }
}
@media screen and (max-width: 768px) {
  .p-recipe__list .slick-arrow {
    width: 2.5rem;
    height: 2.5rem;
  }
}
.p-recipe__list .slick-arrow::before {
  display: none;
}
.p-recipe__list .slick-prev {
  left: 7.4rem;
  background: url(/special/yawamochi-hotcake/assets/img/icn_arrow_prev.png) no-repeat center/100%;
}
@media screen and (max-width: 768px) {
  .p-recipe__list .slick-prev {
    left: 0;
    background-image: url(/special/yawamochi-hotcake/assets/img/icn_arrow_prev_sp.png);
  }
}
.p-recipe__list .slick-next {
  right: 7.4rem;
  background: url(/special/yawamochi-hotcake/assets/img/icn_arrow_next.png) no-repeat center/100%;
}
@media screen and (max-width: 768px) {
  .p-recipe__list .slick-next {
    right: 0;
    background-image: url(/special/yawamochi-hotcake/assets/img/icn_arrow_next_sp.png);
  }
}
.p-recipe__list-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.p-recipe__list-dots .slick-dots {
  position: relative;
  bottom: initial;
  line-height: 0;
}
.p-recipe__list-dots li {
  margin: 0 4px;
  width: auto;
  height: auto;
}
@media screen and (max-width: 768px) {
  .p-recipe__list-dots li {
    margin: 0 0.25rem;
  }
}
.p-recipe__list-dots li.slick-active button::before {
  color: #473B33;
  opacity: 1;
}
.p-recipe__list-dots li button::before {
  font-size: 14px;
}
@media screen and (max-width: 768px) {
  .p-recipe__list-dots li button::before {
    font-size: 0.875rem;
  }
}
.p-recipe__list-btn button {
  width: 32px;
  height: 32px;
  background-color: #473B33;
  border-radius: 2px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: opacity 300ms ease-in;
}
@media screen and (max-width: 768px) {
  .p-recipe__list-btn button {
    width: 2rem;
    height: 2rem;
    border-radius: 0.125rem;
  }
}
@media (hover: hover) {
  .p-recipe__list-btn button:hover {
    opacity: 0.75;
  }
}
.p-recipe__list-btn button::before {
  content: "";
  background: linear-gradient(90deg, #fff 0%, #fff 33.3%, transparent 33%, transparent 66.6%, #fff 66.6%, #fff 100%);
  width: 30%;
  height: 40%;
}
.p-recipe__list-btn button.is-paused::before {
  content: "▶︎";
  width: auto;
  height: auto;
  background: none;
  color: #fff;
  line-height: 0;
  font-size: 0.85em;
  padding: 0 0 0 0.1rem;
}
.p-recipe__item img {
  border-radius: 0.5rem;
}
.p-recipe__item-ttl {
  font-size: max(1.125rem, 14px);
  line-height: 1.8;
  font-weight: 700;
  margin-top: 1rem;
}
@media screen and (max-width: 768px) {
  .p-recipe__item-ttl {
    margin-top: 0.8rem;
  }
}

.p-movie {
  padding: 6.2rem 0 3.7rem;
}
@media screen and (max-width: 768px) {
  .p-movie {
    padding: 4.4rem 0 2.15rem;
  }
}
.p-movie__block {
  margin-top: 3.2rem;
}
@media screen and (max-width: 768px) {
  .p-movie__block {
    margin-top: 2rem;
  }
}
.p-movie__ttl {
  margin: 0 auto;
  width: 15.5rem;
}
@media screen and (max-width: 768px) {
  .p-movie__ttl {
    width: 9rem;
  }
}

.p-voice {
  padding: 3.7rem 0 7.6rem;
}
@media screen and (max-width: 768px) {
  .p-voice {
    padding: 2.15rem 0 6.2rem;
  }
}
.p-voice__block {
  margin-top: 3.2rem;
}
@media screen and (max-width: 768px) {
  .p-voice__block {
    margin-top: 2rem;
  }
}
.p-voice__ttl {
  margin: 0 auto;
  width: 19.375rem;
}
@media screen and (max-width: 768px) {
  .p-voice__ttl {
    width: 11.2rem;
  }
}

.u-sp {
  display: none !important;
}

@media screen and (max-width: 768px) {
  .u-pc {
    display: none !important;
  }
  .u-sp {
    display: block !important;
  }
}
.u-clearfix::after {
  content: "";
  display: block;
  block-size: 0;
  font-size: 0;
  clear: both;
  visibility: hidden;
}