@charset "UTF-8";
html {
  background: #f0f0f0;
  font-size: min(0.733vw, 10px);
  font-family: "Noto Sans JP", sans-serif;
  color: #1f1f1f;
}
@media screen and (max-width: 768px) {
  html {
    font-size: min(1.334vw, 10px);
  }
}

body, h1, h2, h3, h4, p, figure, ul, ol, dl, dt, dd {
  margin: 0;
  padding: 0;
}

ul, ol, li {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
  transition: 0.2s linear;
}

img, svg {
  max-width: 100%;
  max-height: 100%;
  vertical-align: bottom;
}

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

@media screen and (max-width: 768px) {
  .pc-only {
    display: none !important;
  }
}

@media screen and (min-width: 769px) {
  .sp-only {
    display: none !important;
  }
}

.js-animation.fadeIn {
  opacity: 0;
  transition: opacity 0.4s linear;
}
.js-animation.fadeIn.is-animated {
  opacity: 1;
}

.wrapper {
  position: relative;
  width: 100%;
}
.wrapper:has(.kv_section.is-loading) {
  height: 100dvh;
  overflow: hidden;
}
.wrapper:has(.kv_section.is-loading) + .header_outer {
  opacity: 0;
}

.header_outer {
  position: fixed;
  fill: #fff;
  left: 0;
  right: 0;
  top: 0;
  color: #fff;
  transition: opacity 0.4s linear 0.4s;
  z-index: 500;
}
@media screen and (min-width: 769px) {
  .header_outer {
    height: 10rem;
  }
}
@media screen and (max-width: 768px) {
  .header_outer {
    height: 12.8rem;
  }
}
.header_outer img.black {
  display: none;
}
.wrapper:has(.js-section.white.is-current) + .header_outer {
  fill: #1f1f1f;
  color: #1f1f1f;
}
.wrapper:has(.js-section.white.is-current) + .header_outer img.black {
  display: block;
}
.wrapper:has(.js-section.white.is-current) + .header_outer img.white {
  display: none;
}
.wrapper:has(.js-section.white.is-current) + .header_outer .header_cartlink {
  fill: #fff;
}
.wrapper:has(.js-section.white.is-current) + .header_outer .header_cartlink::before {
  background: #1f1f1f;
}
.header_inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  margin: 0 auto;
}
@media screen and (min-width: 769px) {
  .header_inner {
    max-width: 1366px;
    padding: 0 3.7rem 0 4.9rem;
  }
}
@media screen and (max-width: 768px) {
  .header_inner {
    padding: 0 4.7rem 0 4.9rem;
  }
}
.header_logo {
  flex-shrink: 0;
  position: relative;
  z-index: 5;
}
@media screen and (min-width: 769px) {
  .header_logo {
    width: 14.5rem;
  }
}
@media screen and (max-width: 768px) {
  .header_logo {
    width: 20.8rem;
  }
  .header_logo:has(~ .nav_outer.is-opened) img.black {
    display: block;
  }
  .header_logo:has(~ .nav_outer.is-opened) img.white {
    display: none;
  }
}
.header_logo:hover {
  opacity: 0.5;
}
.header_pagetitle {
  flex-shrink: 0;
  position: relative;
  z-index: 5;
}
@media screen and (min-width: 769px) {
  .header_pagetitle {
    width: 8rem;
    margin-left: 2.5rem;
  }
}
@media screen and (max-width: 768px) {
  .header_pagetitle {
    width: 12.6rem;
    margin-left: 5.5rem;
  }
  .header_pagetitle:has(~ .nav_outer.is-opened) img.black {
    display: block;
  }
  .header_pagetitle:has(~ .nav_outer.is-opened) img.white {
    display: none;
  }
}
.header_pagetitle h2 {
  pointer-events: none;
}
.header_pagetitle:hover {
  opacity: 0.5;
}
.header_lang {
  aspect-ratio: 1/1;
  position: relative;
  z-index: 5;
}
@media screen and (min-width: 769px) {
  .header_lang {
    height: 3rem;
    margin-left: 4rem;
  }
}
@media screen and (max-width: 768px) {
  .header_lang {
    height: 5rem;
    margin-left: auto;
  }
  .nav_outer.is-opened + .header_lang {
    fill: #1f1f1f;
    color: #1f1f1f;
  }
}
.header_lang::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid;
  inset: 0;
}
.header_lang:hover {
  opacity: 0.5;
}
.header_cartlink {
  aspect-ratio: 1/1;
  fill: #1f1f1f;
  position: relative;
  height: 4.6rem;
  margin-left: 2.3rem;
}
@media screen and (max-width: 768px) {
  .header_cartlink {
    display: none;
  }
}
.header_cartlink::before {
  content: "";
  position: absolute;
  background: #fff;
  border-radius: 50%;
  inset: 0;
}
.header_cartlink svg {
  position: relative;
}
.header_cartlink:hover {
  opacity: 0.5;
}

@media screen and (min-width: 769px) {
  .nav_outer {
    margin-left: auto;
  }
}
@media screen and (max-width: 768px) {
  .nav_outer {
    position: fixed;
    background: #f0f0f0;
    fill: #1f1f1f;
    height: 0;
    left: 0;
    right: 0;
    top: 0;
    overflow: hidden;
  }
  .nav_outer.is-opened {
    height: 100%;
  }
}
.nav_inner {
  display: flex;
}
@media screen and (max-width: 768px) {
  .nav_inner {
    flex-direction: column;
    justify-content: center;
    background-image: url(../img/base/nav_bg_sp.png);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 100% auto;
    height: 100%;
    padding: 12.8rem 0 5rem 11.5rem;
  }
}
.nav_list {
  display: flex;
}
@media screen and (min-width: 769px) {
  .nav_list {
    align-items: center;
    column-gap: 3rem;
  }
}
@media screen and (max-width: 768px) {
  .nav_list {
    flex-direction: column;
    align-items: flex-start;
    row-gap: 9rem;
    padding-bottom: 12rem;
  }
}
@media screen and (min-width: 769px) {
  .nav_list > li.top {
    display: none;
  }
}
.nav_list > li:nth-of-type(1) .nav_list_link {
  aspect-ratio: 111/40;
}
.nav_list > li:nth-of-type(2) .nav_list_link {
  aspect-ratio: 435/40;
}
.nav_list > li:nth-of-type(3) .nav_list_link {
  aspect-ratio: 197/40;
}
.nav_list > li:nth-of-type(4) .nav_list_link {
  aspect-ratio: 216/40;
}
.nav_list > li:nth-of-type(5) .nav_list_link {
  aspect-ratio: 184/40;
}
.nav_list_link {
  display: block;
  line-height: 1;
}
@media screen and (min-width: 769px) {
  .nav_list_link {
    height: 1.1rem;
  }
}
@media screen and (max-width: 768px) {
  .nav_list_link {
    height: 4rem;
  }
}
.nav_list_link svg {
  pointer-events: none;
}
.nav_list_link:hover {
  opacity: 0.5;
}
.nav_cartlink {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  column-gap: 2rem;
}
@media screen and (min-width: 769px) {
  .nav_cartlink {
    display: none;
  }
}
.nav_cartlink span {
  aspect-ratio: 1/1;
  border-radius: 50%;
  background: #1f1f1f;
  fill: #fff;
  height: 6.9rem;
}
.nav_cartlink p {
  aspect-ratio: 344/35;
  height: 3.5rem;
}
.nav_switch {
  aspect-ratio: 1/1;
  position: relative;
  width: 6rem;
  margin-left: 3rem;
  cursor: pointer;
  z-index: 5;
}
@media screen and (min-width: 769px) {
  .nav_switch {
    display: none;
  }
}
.nav_switch::before, .nav_switch::after {
  content: "";
  position: absolute;
  border-bottom: 1px solid;
  width: 96.667%;
  height: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.nav_switch::before {
  top: 38.334%;
}
.nav_switch::after {
  bottom: 38.334%;
}
.nav_switch.is-opened {
  color: #1f1f1f;
}
.nav_switch.is-opened::before, .nav_switch.is-opened::after {
  width: 108.334%;
  inset: 0;
  margin: auto;
}
.nav_switch.is-opened::before {
  rotate: 26.5deg;
}
.nav_switch.is-opened::after {
  rotate: -26.5deg;
}

.kv_section {
  position: relative;
  background: #000;
  width: 100dvw;
  height: 200dvh;
  color: #fff;
}
.kv_section.is-animated .kv_block {
  opacity: 1;
}
.kv_section.is-animated .ribbon1, .kv_section.is-animated .ribbon2 {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.kv_bg {
  position: fixed;
  width: 100dvw;
  height: 100dvh;
  inset: 0 0 auto;
  pointer-events: none;
}
.kv_bg video {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.kv_ribbon {
  position: fixed;
  width: 100dvw;
  height: 100dvh;
  inset: 0 0 auto;
  pointer-events: none;
}
.kv_ribbon .ribbon1 {
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  position: absolute;
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: contain;
  left: 0;
  bottom: 0;
  transition: clip-path 0.6s ease;
}
@media screen and (min-width: 769px) {
  .kv_ribbon .ribbon1 {
    background-image: url(../img/kv/ribbon1_pc.png);
    width: 16.8rem;
    height: 29.6rem;
  }
}
@media screen and (max-width: 768px) {
  .kv_ribbon .ribbon1 {
    background-image: url(../img/kv/ribbon1_sp.png);
    width: 18.7rem;
    height: 33.3rem;
  }
}
.kv_ribbon .ribbon2 {
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  position: absolute;
  background-position: right bottom;
  background-repeat: no-repeat;
  background-size: contain;
  right: 0;
  bottom: 0;
  transition: clip-path 0.7s ease 0.6s;
}
@media screen and (min-width: 769px) {
  .kv_ribbon .ribbon2 {
    background-image: url(../img/kv/ribbon2_pc.png);
    width: 26.3rem;
    height: 45.2rem;
  }
}
@media screen and (max-width: 768px) {
  .kv_ribbon .ribbon2 {
    background-image: url(../img/kv/ribbon2_sp.png);
    width: 19.1rem;
    height: 33.3rem;
  }
}
.kv_block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100dvw;
  height: 100dvh;
  opacity: 0;
  transition: opacity 0.4s linear 0.6s;
  scroll-snap-align: start;
}
@media screen and (min-width: 769px) {
  .kv_block {
    padding: 10rem 0;
  }
}
@media screen and (max-width: 768px) {
  .kv_block {
    padding: 15rem 0;
  }
}
@media screen and (min-width: 769px) {
  .kv_lead1 {
    width: 12.95rem;
  }
}
@media screen and (max-width: 768px) {
  .kv_lead1 {
    width: 24.012rem;
  }
}
@media screen and (min-width: 769px) {
  .kv_lead2 {
    width: 30.35rem;
    margin-top: 1.9rem;
  }
}
@media screen and (max-width: 768px) {
  .kv_lead2 {
    width: 53.8rem;
    margin-top: 5rem;
  }
}
@media screen and (min-width: 769px) {
  .kv_title {
    width: 36.55rem;
    margin-top: 4.2rem;
  }
}
@media screen and (max-width: 768px) {
  .kv_title {
    width: 46.8rem;
    margin-top: 7rem;
  }
}

.about_block {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 100dvw;
  height: 100dvh;
  scroll-snap-align: start;
}
@media screen and (min-width: 769px) {
  .about_block {
    row-gap: 4rem;
    padding: 10rem 0;
  }
}
@media screen and (max-width: 768px) {
  .about_block {
    row-gap: 4rem;
    padding: 15rem 0;
  }
}
@media screen and (min-width: 769px) {
  .about_title {
    width: 35.1rem;
  }
}
@media screen and (max-width: 768px) {
  .about_title {
    width: 58.4rem;
  }
}
.about_lead {
  letter-spacing: 0.02em;
  text-align: center;
}
@media screen and (min-width: 769px) {
  .about_lead {
    line-height: 1.778;
    font-size: 1.8rem;
  }
}
@media screen and (max-width: 768px) {
  .about_lead {
    padding-top: 8rem;
    line-height: 1.53;
    font-size: 3.4rem;
  }
}
.about_link {
  display: flex;
  align-items: center;
  letter-spacing: 0.05em;
  font-weight: 500;
}
@media screen and (min-width: 769px) {
  .about_link {
    column-gap: 2rem;
    line-height: 2;
    font-size: 1.6rem;
  }
}
@media screen and (max-width: 768px) {
  .about_link {
    column-gap: 2rem;
    margin-top: 18rem;
    line-height: 1.067;
    font-size: 3rem;
  }
}
.about_link span {
  fill: #2c2c2c;
  background: #fff;
  border-radius: 50%;
}
@media screen and (min-width: 769px) {
  .about_link span {
    width: 6rem;
    height: 6rem;
  }
}
@media screen and (max-width: 768px) {
  .about_link span {
    width: 7.6rem;
    height: 7.6rem;
  }
}

.movie_section {
  position: relative;
  background: #e0e0e0;
}
@media screen and (min-width: 769px) {
  .movie_section {
    height: 350dvh;
  }
}
.movie_inner {
  display: flex;
  width: 100dvw;
}
@media screen and (min-width: 769px) {
  .movie_inner {
    position: sticky;
    height: 100dvh;
    top: 0;
    overflow-x: scroll;
    scrollbar-width: none;
  }
  .movie_inner::-webkit-scrollbar {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .movie_inner {
    padding: 0 0 73.7rem;
  }
}
.movie_blocks {
  display: flex;
  position: relative;
  height: 100%;
}
@media screen and (max-width: 768px) {
  .movie_blocks {
    flex-direction: column;
  }
}
.movie_bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.movie_bg .bg1, .movie_bg .bg3 {
  position: absolute;
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: cover;
}
@media screen and (min-width: 769px) {
  .movie_bg .bg1, .movie_bg .bg3 {
    width: 26.4rem;
    height: 22.2rem;
    bottom: 0;
  }
}
.movie_bg .bg1 {
  background-image: url(../img/movie/bg1.png);
}
@media screen and (min-width: 769px) {
  .movie_bg .bg1 {
    left: 36.604%;
  }
}
@media screen and (max-width: 768px) {
  .movie_bg .bg1 {
    width: 31.4rem;
    height: 26.4rem;
    left: 0;
    top: 27.2rem;
  }
}
.movie_bg .bg3 {
  background-image: url(../img/movie/bg3.png);
}
@media screen and (min-width: 769px) {
  .movie_bg .bg3 {
    left: 36.531%;
  }
}
@media screen and (max-width: 768px) {
  .movie_bg .bg3 {
    width: 26.4rem;
    height: 22.2rem;
    left: 0;
    top: 34.2rem;
  }
}
.movie_bg .bg2, .movie_bg .bg4 {
  position: absolute;
  background-position: left top;
  background-repeat: no-repeat;
  background-size: contain;
}
@media screen and (min-width: 769px) {
  .movie_bg .bg2, .movie_bg .bg4 {
    width: 23.3rem;
    height: 19.6rem;
    top: 0;
  }
}
@media screen and (max-width: 768px) {
  .movie_bg .bg2, .movie_bg .bg4 {
    width: 31.4rem;
    height: 26.4rem;
    right: 0;
  }
}
.movie_bg .bg2 {
  background-image: url(../img/movie/bg2.png);
}
@media screen and (min-width: 769px) {
  .movie_bg .bg2 {
    left: 87.921%;
  }
}
@media screen and (max-width: 768px) {
  .movie_bg .bg2 {
    bottom: -23.6rem;
  }
}
.movie_bg .bg4 {
  background-image: url(../img/movie/bg4.png);
}
@media screen and (min-width: 769px) {
  .movie_bg .bg4 {
    left: 85.725%;
  }
}
@media screen and (max-width: 768px) {
  .movie_bg .bg4 {
    bottom: -26rem;
  }
}
.movie_ribbon {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
@media screen and (max-width: 768px) {
  .movie_ribbon {
    z-index: 2;
  }
}
.movie_ribbon > * {
  position: absolute;
  background-repeat: no-repeat;
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
}
.movie_ribbon > *.is-animated {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) !important;
}
.movie_ribbon .ribbon1 {
  background-position: left top;
  background-size: contain;
  left: 0;
  top: 0;
  transition: clip-path 0.4s linear;
}
@media screen and (min-width: 769px) {
  .movie_ribbon .ribbon1 {
    background-image: url(../img/movie/ribbon1_pc.png);
    width: 11.6rem;
    height: 17.8rem;
  }
}
@media screen and (max-width: 768px) {
  .movie_ribbon .ribbon1 {
    background-image: url(../img/movie/ribbon1_sp.png);
    width: 19.1rem;
    height: 36.2rem;
  }
}
.movie_ribbon .ribbon2 {
  background-position: left bottom;
  transition: clip-path 1.8s linear;
}
@media screen and (min-width: 769px) {
  .movie_ribbon .ribbon2 {
    background-image: url(../img/movie/ribbon2_pc.png);
    background-size: 100% 100%;
    width: 49.9rem;
    height: 100%;
    left: 91.435%;
    bottom: 0;
  }
}
@media screen and (max-width: 768px) {
  .movie_ribbon .ribbon2 {
    background-image: url(../img/movie/ribbon2_sp.png);
    background-size: contain;
    width: 100%;
    height: 141.8rem;
    left: 0;
    top: 59.231%;
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  }
}
.movie_ribbon .ribbon3 {
  background-position: left top;
  background-size: contain;
  transition: clip-path 2s linear;
}
@media screen and (min-width: 769px) {
  .movie_ribbon .ribbon3 {
    background-image: url(../img/movie/ribbon3_pc.png);
    width: 60rem;
    height: 28.1rem;
    left: 82.138%;
    top: 0;
  }
}
@media screen and (max-width: 768px) {
  .movie_ribbon .ribbon3 {
    background-image: url(../img/movie/ribbon3_sp.png);
    width: 100%;
    height: 52.9rem;
    left: 0;
    bottom: -56rem;
  }
}
.movie_ribbon .ribbon4 {
  background-position: left bottom;
  background-size: contain;
  transition: clip-path 1s linear;
}
@media screen and (min-width: 769px) {
  .movie_ribbon .ribbon4 {
    background-image: url(../img/movie/ribbon4_pc.png);
    width: 44.2rem;
    height: 33.9rem;
    left: 87.848%;
    bottom: 0;
  }
}
@media screen and (max-width: 768px) {
  .movie_ribbon .ribbon4 {
    background-image: url(../img/movie/ribbon4_sp.png);
    width: 100%;
    height: 71.3rem;
    left: 0;
    bottom: -73.6rem;
  }
}
.movie_ribbon .ribbon5 {
  background-position: left bottom;
  background-size: contain;
  bottom: 0;
  transition: clip-path 0.6s linear;
}
@media screen and (min-width: 769px) {
  .movie_ribbon .ribbon5 {
    background-image: url(../img/movie/ribbon5_pc.png);
    width: 20rem;
    height: 12.8rem;
    left: 64.665%;
  }
}
@media screen and (max-width: 768px) {
  .movie_ribbon .ribbon5 {
    display: none;
  }
}
.movie_block {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100dvw;
}
@media screen and (min-width: 769px) {
  .movie_block {
    height: 100%;
  }
}
@media screen and (min-width: 769px) {
  .movie_block.last {
    width: 56.6rem;
  }
}
.movie_lead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
@media screen and (min-width: 769px) {
  .movie_lead {
    column-gap: 22.475%;
    padding: 0 20rem 0 11rem;
  }
}
@media screen and (max-width: 768px) {
  .movie_lead {
    height: 130rem;
    padding: 1rem 0 0 5rem;
  }
}
.movie_title {
  flex-shrink: 0;
}
@media screen and (min-width: 769px) {
  .movie_title {
    width: 60.1rem;
  }
}
@media screen and (max-width: 768px) {
  .movie_title {
    width: 49.4rem;
  }
}
.movie_scroll {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  column-gap: 1.4rem;
}
@media screen and (max-width: 768px) {
  .movie_scroll {
    display: none;
  }
}
.movie_scroll p {
  flex-shrink: 0;
  width: 6.8rem;
}
.movie_scroll span {
  flex-shrink: 0;
  fill: #1f1f1f;
  position: relative;
  width: 6rem;
  height: 6rem;
}
.movie_scroll span::before {
  content: "";
  position: absolute;
  border: 1px solid #ccc;
  border-radius: 50%;
  inset: 0;
}
.movie_detail {
  display: flex;
}
@media screen and (min-width: 769px) {
  .movie_detail {
    column-gap: 9rem;
    padding: 0 13rem 0 11rem;
  }
}
@media screen and (max-width: 768px) {
  .movie_detail {
    flex-direction: column;
    align-items: center;
    padding: 51rem 0 7rem;
    z-index: 2;
  }
}
.movie_start {
  display: block;
  position: relative;
  cursor: pointer;
}
@media screen and (min-width: 769px) {
  .movie_start {
    width: 54.9rem;
  }
}
@media screen and (max-width: 768px) {
  .movie_start {
    width: 67rem;
  }
}
.movie_start figure {
  aspect-ratio: 549/463;
  position: relative;
  overflow: hidden;
  pointer-events: none;
}
@media screen and (min-width: 769px) {
  .movie_start figure {
    box-shadow: 3rem 3rem 3rem rgba(0, 0, 0, 0.08);
  }
}
.movie_start figure img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.movie_start figure::after {
  content: "";
  aspect-ratio: 1/1;
  display: block;
  position: absolute;
  background-image: url(../img/base/c_play_w.svg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  pointer-events: none;
}
@media screen and (min-width: 769px) {
  .movie_start figure::after {
    width: 12.6rem;
  }
}
.movie_caption {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
@media screen and (min-width: 769px) {
  .movie_caption {
    width: 48.4rem;
  }
}
@media screen and (max-width: 768px) {
  .movie_caption {
    width: 67rem;
    padding-top: 10rem;
  }
}
.movie_caption_title {
  letter-spacing: 0.02em;
  font-weight: 500;
}
@media screen and (min-width: 769px) {
  .movie_caption_title {
    margin-top: -0.2225em;
    line-height: 1.445;
    font-size: 3.6rem;
  }
}
@media screen and (max-width: 768px) {
  .movie_caption_title {
    line-height: 1.4;
    font-size: 5rem;
  }
}
.movie_caption_text {
  text-align: justify;
}
@media screen and (min-width: 769px) {
  .movie_caption_text {
    padding-top: 4rem;
    padding-bottom: 3rem;
    line-height: 1.889;
    font-size: 1.8rem;
  }
}
@media screen and (max-width: 768px) {
  .movie_caption_text {
    padding-top: 4.8rem;
    padding-bottom: 8rem;
    line-height: 1.589;
    font-size: 3.4rem;
  }
}
.movie_button {
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
}
@media screen and (min-width: 769px) {
  .movie_button {
    column-gap: 1.4rem;
    margin-left: auto;
  }
}
@media screen and (max-width: 768px) {
  .movie_button {
    column-gap: 1.6rem;
  }
}
.movie_button p {
  line-height: 1;
  pointer-events: none;
  font-weight: 500;
}
@media screen and (min-width: 769px) {
  .movie_button p {
    font-size: 1.6rem;
  }
}
@media screen and (max-width: 768px) {
  .movie_button p {
    font-size: 3rem;
  }
}
.movie_button span {
  fill: #1f1f1f;
  position: relative;
  pointer-events: none;
}
@media screen and (min-width: 769px) {
  .movie_button span {
    width: 6rem;
    height: 6rem;
  }
}
@media screen and (max-width: 768px) {
  .movie_button span {
    width: 7.6rem;
    height: 7.6rem;
  }
}
.movie_button span::after {
  content: "";
  position: absolute;
  border: 1px solid #bebebe;
  border-radius: 50%;
  inset: 0;
}

.recipe_section {
  position: relative;
  background: #e0e0e0;
  width: 100dvw;
}
.recipe_ribbon {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.recipe_ribbon .ribbon1 {
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  position: absolute;
  background-repeat: no-repeat;
  background-position: right top;
  background-size: contain;
  right: 0;
  top: 0;
  transition: clip-path 0.4s linear;
}
@media screen and (min-width: 769px) {
  .recipe_ribbon .ribbon1 {
    background-image: url(../img/recipe/ribbon1_pc.png);
    width: 37.6rem;
    height: 39.7rem;
  }
}
.recipe_ribbon .ribbon1.is-animated {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) !important;
}
.recipe_caption {
  position: relative;
  margin: 0 auto;
}
@media screen and (min-width: 769px) {
  .recipe_caption {
    max-width: 1366px;
    padding: 20rem 11rem 8rem;
  }
}
@media screen and (max-width: 768px) {
  .recipe_caption {
    padding: 16rem 4rem 7rem;
  }
}
@media screen and (min-width: 769px) {
  .recipe_title {
    width: 21rem;
  }
}
@media screen and (max-width: 768px) {
  .recipe_title {
    width: 33rem;
  }
}
@media screen and (min-width: 769px) {
  .recipe_lead {
    width: 60.95rem;
    padding-top: 6rem;
  }
}
@media screen and (max-width: 768px) {
  .recipe_lead {
    width: 62.9rem;
    padding-top: 10rem;
  }
}
.recipe_lead img {
  display: block !important;
}
.recipe_text {
  text-align: justify;
}
@media screen and (min-width: 769px) {
  .recipe_text {
    width: 76rem;
    padding-top: 2.5rem;
    line-height: 1.625;
    font-size: 1.6rem;
  }
}
@media screen and (max-width: 768px) {
  .recipe_text {
    padding-top: 5rem;
    line-height: 1.688;
    font-size: 3.2rem;
  }
}
.recipe_list {
  display: grid;
}
@media screen and (min-width: 769px) {
  .recipe_list {
    grid-template-columns: repeat(2, 1fr);
    align-items: stretch;
    column-gap: 1px;
  }
}
.recipe_list > li {
  display: flex;
  position: relative;
  border-top: 1px solid #f0f0f0;
}
@media screen and (min-width: 769px) {
  .recipe_list > li:nth-of-type(2n+1) {
    justify-content: flex-end;
  }
  .recipe_list > li:nth-of-type(2n) {
    justify-content: flex-start;
  }
  .recipe_list > li:nth-of-type(2n)::before {
    content: "";
    position: absolute;
    border-left: 1px solid #f0f0f0;
    top: 0;
    bottom: 0;
  }
}
.recipe_card {
  display: grid;
  position: relative;
  cursor: pointer;
}
@media screen and (min-width: 769px) {
  .recipe_card {
    grid-template-columns: 15.7rem 1fr;
    grid-template-rows: min-content 1fr;
    gap: 4rem;
    width: 68.2rem;
    padding: 5rem 4rem;
  }
}
@media screen and (max-width: 768px) {
  .recipe_card {
    width: 100%;
    padding: 8rem 4rem 16rem;
  }
}
.recipe_card::before, .recipe_card::after {
  content: "";
  position: absolute;
  background: #454545;
  height: 1px;
  pointer-events: none;
}
@media screen and (min-width: 769px) {
  .recipe_card::before, .recipe_card::after {
    width: 2.6rem;
    right: 2.4rem;
    bottom: 3.7rem;
  }
}
@media screen and (max-width: 768px) {
  .recipe_card::before, .recipe_card::after {
    width: 6rem;
    right: 5.2rem;
    bottom: 9.5rem;
  }
}
.recipe_card::after {
  transform: rotateZ(90deg);
}
.recipe_card_image {
  position: relative;
  overflow: hidden;
  pointer-events: none;
}
@media screen and (min-width: 769px) {
  .recipe_card_image {
    grid-column: 1/2;
    grid-row: 1/3;
  }
}
@media screen and (max-width: 768px) {
  .recipe_card_image {
    justify-self: center;
    width: 38.4rem;
  }
}
.recipe_card_index {
  pointer-events: none;
}
@media screen and (min-width: 769px) {
  .recipe_card_index {
    grid-column: 2/3;
    height: 1.4rem;
  }
}
@media screen and (max-width: 768px) {
  .recipe_card_index {
    height: 2.7rem;
    margin-top: 9rem;
  }
}
.recipe_card_caption {
  pointer-events: none;
}
@media screen and (min-width: 769px) {
  .recipe_card_caption {
    grid-column: 2/3;
  }
}
@media screen and (max-width: 768px) {
  .recipe_card_caption {
    padding-top: 2rem;
  }
}
.recipe_card_position {
  font-weight: 500;
}
@media screen and (min-width: 769px) {
  .recipe_card_position {
    line-height: 1.445;
    font-size: 1.8rem;
  }
}
@media screen and (max-width: 768px) {
  .recipe_card_position {
    line-height: 1.417;
    font-size: 3.6rem;
  }
}
.recipe_card_name {
  font-weight: 500;
}
@media screen and (min-width: 769px) {
  .recipe_card_name {
    padding-top: 0.1rem;
    line-height: 1.567;
    font-size: 3rem;
  }
}
@media screen and (max-width: 768px) {
  .recipe_card_name {
    padding-top: 0.8rem;
    line-height: 1.449;
    font-size: 5.8rem;
  }
}

.lineup_section {
  position: relative;
  background: #e0e0e0;
  width: 100dvw;
}
.lineup_section::before {
  content: "";
  position: absolute;
  background: #f0f0f0;
  inset: 0;
  opacity: 0;
  transition: opacity 1s linear 0.2s;
  pointer-events: none;
}
.lineup_section.is-animated::before {
  opacity: 1;
}
.lineup_section.is-animated .lineup_inner {
  opacity: 1;
}
.lineup_ribbon {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.lineup_ribbon .ribbon1 {
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  position: absolute;
  background-repeat: no-repeat;
  background-position: right top;
  background-size: contain;
  top: 0;
  transition: clip-path 0.5s linear;
}
@media screen and (min-width: 769px) {
  .lineup_ribbon .ribbon1 {
    background-image: url(../img/lineup/ribbon1_pc.png);
    width: 29.7rem;
    height: 41.8rem;
    right: 34.7rem;
  }
}
@media screen and (max-width: 768px) {
  .lineup_ribbon .ribbon1 {
    background-image: url(../img/lineup/ribbon1_sp.png);
    width: 27.6rem;
    height: 47.4rem;
    left: 0;
  }
}
.lineup_ribbon .ribbon1.is-animated {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) !important;
}
.lineup_ribbon .ribbon2 {
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  position: absolute;
  background-repeat: no-repeat;
  background-position: right top;
  background-size: contain;
  right: 0;
  top: 0;
  transition: clip-path 0.4s linear;
}
@media screen and (min-width: 769px) {
  .lineup_ribbon .ribbon2 {
    background-image: url(../img/lineup/ribbon2_pc.png);
    width: 18.7rem;
    height: 18.6rem;
  }
}
@media screen and (max-width: 768px) {
  .lineup_ribbon .ribbon2 {
    background-image: url(../img/lineup/ribbon2_sp.png);
    width: 41.2rem;
    height: 29.5rem;
  }
}
.lineup_ribbon .ribbon2.is-animated {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) !important;
}
.lineup_inner {
  display: flex;
  position: relative;
  justify-content: space-between;
  margin: 0 auto;
  opacity: 0;
  transition: opacity 1s linear;
}
@media screen and (min-width: 769px) {
  .lineup_inner {
    flex-wrap: wrap;
    align-items: flex-end;
    row-gap: 3.6rem;
    max-width: 114.8rem;
    padding: 20rem 0 0;
  }
}
@media screen and (max-width: 768px) {
  .lineup_inner {
    flex-direction: column;
    align-items: center;
    padding: 68.5rem 0 11.2rem;
  }
}
@media screen and (min-width: 769px) {
  .lineup_title {
    width: 23.1rem;
    padding-bottom: 0.6rem;
  }
}
@media screen and (max-width: 768px) {
  .lineup_title {
    width: 36.3rem;
    margin: 0 auto 0 4rem;
  }
}
.lineup_link {
  display: flex;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .lineup_link {
    order: 5;
    margin-top: 14rem;
  }
}
.lineup_link i {
  translate: 0 -9.09%;
}
@media screen and (min-width: 769px) {
  .lineup_link i {
    width: 2.6rem;
    margin-right: 0.8rem;
  }
}
@media screen and (max-width: 768px) {
  .lineup_link i {
    width: 5.2rem;
    margin-right: 1.8rem;
  }
}
@media screen and (min-width: 769px) {
  .lineup_link p {
    width: 11.7rem;
    margin-right: 1.6rem;
  }
}
@media screen and (max-width: 768px) {
  .lineup_link p {
    width: 22.5rem;
    margin-right: 4.2rem;
  }
}
.lineup_link span {
  fill: #454545;
  position: relative;
}
@media screen and (min-width: 769px) {
  .lineup_link span {
    width: 6rem;
    height: 6rem;
  }
}
@media screen and (max-width: 768px) {
  .lineup_link span {
    width: 12rem;
    height: 12rem;
  }
}
.lineup_link span::before {
  content: "";
  position: absolute;
  border: 1px solid #ccc;
  border-radius: 50%;
  inset: 0;
}
.lineup_swiper {
  position: relative;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .lineup_swiper {
    padding: 0 4rem;
  }
}
.lineup_slider {
  position: relative;
}
@media screen and (min-width: 769px) {
  .lineup_slider {
    width: 116.8rem;
    margin-right: 2rem;
    padding-bottom: 11.3rem;
  }
}
@media screen and (max-width: 768px) {
  .lineup_slider {
    width: 67rem;
  }
}
@media screen and (min-width: 769px) {
  .lineup_slider .swiper-slide {
    padding-right: 2rem;
  }
}
@media screen and (max-width: 768px) {
  .lineup_slider .swiper-slide {
    padding-right: 4rem;
  }
}
@media screen and (min-width: 769px) {
  .lineup_slider .swiper-scrollbar {
    width: calc(100% - 17.3rem);
    height: 0.2rem;
    left: 0;
    right: 17.3rem;
    bottom: 2.9rem;
  }
}
@media screen and (max-width: 768px) {
  .lineup_slider .swiper-scrollbar {
    position: relative;
    inset: auto !important;
    margin-top: 8rem;
  }
}
.lineup_slider .swiper-navigation {
  display: flex;
}
@media screen and (min-width: 769px) {
  .lineup_slider .swiper-navigation {
    justify-content: flex-end;
    column-gap: 0.5rem;
    position: absolute;
    right: 2rem;
    bottom: 0;
  }
}
@media screen and (max-width: 768px) {
  .lineup_slider .swiper-navigation {
    justify-content: center;
    column-gap: 1rem;
    margin-top: 8rem;
  }
}
.lineup_slider .swiper-button-prev, .lineup_slider .swiper-button-next {
  position: relative;
  inset: auto !important;
  margin-top: 0;
}
@media screen and (min-width: 769px) {
  .lineup_slider .swiper-button-prev, .lineup_slider .swiper-button-next {
    width: 6rem;
    height: 6rem;
  }
}
@media screen and (max-width: 768px) {
  .lineup_slider .swiper-button-prev, .lineup_slider .swiper-button-next {
    width: 10.2rem;
    height: 10.2rem;
  }
}
.lineup_slider .swiper-button-prev::before, .lineup_slider .swiper-button-next::before {
  content: "";
  position: absolute;
  border: 1px solid #ccc;
  border-radius: 50%;
  inset: 0;
}
.lineup_slider .swiper-button-prev::after, .lineup_slider .swiper-button-next::after {
  display: none;
}
.lineup_slider .swiper-button-prev svg, .lineup_slider .swiper-button-next svg {
  fill: #454545;
  pointer-events: none;
}
.lineup_slider .swiper-button-prev svg {
  scale: -1 1;
}
.lineup_card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
}
@media screen and (min-width: 769px) {
  .lineup_card {
    min-height: 32rem;
    padding: 4rem 3.4rem;
  }
}
@media screen and (max-width: 768px) {
  .lineup_card {
    min-height: 64.8rem;
    padding: 8rem 6.5rem;
  }
}
@media screen and (min-width: 769px) {
  .lineup_card_image {
    width: 18rem;
  }
}
@media screen and (max-width: 768px) {
  .lineup_card_image {
    width: 36rem;
  }
}
.lineup_card_name {
  width: 100%;
  letter-spacing: 0.04em;
  font-weight: 500;
}
@media screen and (min-width: 769px) {
  .lineup_card_name {
    padding-top: 3rem;
    line-height: 1.375;
    font-size: 1.6rem;
  }
}
@media screen and (max-width: 768px) {
  .lineup_card_name {
    padding-top: 6rem;
    line-height: 1.375;
    font-size: 3.6rem;
  }
}
.lineup_card_color {
  width: 100%;
  letter-spacing: 0.04em;
  font-weight: 500;
  color: #7c7c7c;
}
@media screen and (min-width: 769px) {
  .lineup_card_color {
    padding-top: 0.7rem;
    line-height: 1.572;
    font-size: 1.4rem;
  }
}
@media screen and (max-width: 768px) {
  .lineup_card_color {
    padding-top: 3rem;
    line-height: 1.572;
    font-size: 2.8rem;
  }
}

.event_section {
  position: relative;
  background: #f0f0f0;
  width: 100dvw;
  z-index: 2;
}
.event_section.is-animated .event_inner {
  opacity: 1;
}
.event_inner {
  position: relative;
  margin: 0 auto;
  opacity: 0;
  transition: opacity 1s linear;
}
@media screen and (min-width: 769px) {
  .event_inner {
    max-width: 1366px;
    padding: 18.5rem 11rem 8rem;
  }
}
@media screen and (max-width: 768px) {
  .event_inner {
    padding: 14.8rem 4rem 102.5rem;
  }
}
.event_ribbon {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
@media screen and (max-width: 768px) {
  .event_ribbon {
    z-index: 2;
  }
}
.event_ribbon .ribbon1 {
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  position: absolute;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
  left: 50%;
  translate: -50% 0;
  transition: clip-path 1s linear;
}
@media screen and (min-width: 769px) {
  .event_ribbon .ribbon1 {
    background-image: url(../img/event/ribbon1_pc.png);
    width: 136.6rem;
    height: 126.6rem;
    bottom: -55rem;
  }
}
@media screen and (max-width: 768px) {
  .event_ribbon .ribbon1 {
    background-image: url(../img/event/ribbon1_sp.png);
    width: 100%;
    height: 80.6rem;
    bottom: 0;
  }
}
.event_ribbon.is-animated .ribbon1 {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) !important;
}
.event_head {
  position: relative;
  margin: 0 auto;
}
@media screen and (min-width: 769px) {
  .event_head {
    width: 114.8rem;
  }
}
@media screen and (min-width: 769px) {
  .event_title {
    width: 42.3rem;
  }
}
@media screen and (max-width: 768px) {
  .event_title {
    width: 37.5rem;
  }
}
.event_list {
  display: grid;
  position: relative;
}
@media screen and (min-width: 769px) {
  .event_list {
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem 5rem;
    margin-top: 5.5rem;
  }
}
@media screen and (max-width: 768px) {
  .event_list {
    justify-content: center;
    grid-template-columns: 68.4rem;
    row-gap: 9rem;
    margin-top: 12rem;
  }
}
.event_link {
  display: flex;
}
@media screen and (min-width: 769px) {
  .event_link {
    height: 13.7rem;
    column-gap: 3rem;
  }
}
@media screen and (max-width: 768px) {
  .event_link {
    align-items: flex-start;
    column-gap: 5rem;
  }
}
.event_link_caption {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: min-content min-content 1fr;
  gap: 1.5rem 2.5rem;
}
@media screen and (min-width: 769px) {
  .event_link_caption {
    height: 100%;
  }
}
.event_link_image {
  flex-shrink: 0;
  aspect-ratio: 172/161;
  background: #fff;
}
@media screen and (min-width: 769px) {
  .event_link_image {
    width: 14.6rem;
  }
}
@media screen and (max-width: 768px) {
  .event_link_image {
    width: 17.2rem;
  }
}
.event_link_date {
  letter-spacing: 0.1em;
  font-weight: 500;
}
@media screen and (min-width: 769px) {
  .event_link_date {
    line-height: 1.5;
    font-size: 1.6rem;
  }
}
@media screen and (max-width: 768px) {
  .event_link_date {
    line-height: 1.455;
    font-size: 2.2rem;
  }
}
.event_link_category {
  display: flex;
  align-items: center;
}
@media screen and (min-width: 769px) {
  .event_link_category {
    column-gap: 0.7rem;
    height: 2.4rem;
  }
}
@media screen and (max-width: 768px) {
  .event_link_category {
    column-gap: 0.8rem;
    height: 3.2rem;
  }
}
.event_link_category::before {
  content: "";
  display: block;
  background: #7c7c7c;
}
@media screen and (min-width: 769px) {
  .event_link_category::before {
    width: 0.6rem;
    height: 0.6rem;
  }
}
@media screen and (max-width: 768px) {
  .event_link_category::before {
    width: 0.8rem;
    height: 0.8rem;
  }
}
@media screen and (min-width: 769px) {
  .event_link_category img {
    height: 1.1rem;
  }
}
@media screen and (max-width: 768px) {
  .event_link_category img {
    height: 1.7rem;
  }
}
.event_link_head {
  grid-column: 1/3;
  width: 100%;
  font-weight: 500;
}
@media screen and (min-width: 769px) {
  .event_link_head {
    line-height: 1.445;
    font-size: 1.8rem;
  }
}
@media screen and (max-width: 768px) {
  .event_link_head {
    margin-top: 1rem;
    line-height: 1.442;
    font-size: 3.4rem;
  }
}
.event_link_text {
  grid-column: 1/3;
}
@media screen and (min-width: 769px) {
  .event_link_text p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    box-orient: vertical;
    height: 4.8rem;
    line-height: 1.715;
    font-size: 1.4rem;
  }
}
@media screen and (max-width: 768px) {
  .event_link_text p {
    line-height: 1.429;
    font-size: 2.8rem;
  }
}

.footer_outer {
  position: relative;
  background: #f0f0f0;
}
@media screen and (min-width: 769px) {
  .footer_outer {
    height: 55rem;
  }
}
@media screen and (max-width: 768px) {
  .footer_outer {
    margin-top: -11.5rem;
  }
}
.footer_inner {
  display: flex;
  flex-direction: column;
  position: relative;
  margin: 0 auto;
  z-index: 2;
}
@media screen and (min-width: 769px) {
  .footer_inner {
    justify-content: flex-end;
    row-gap: 5rem;
    max-width: 1366px;
    height: 100%;
    padding: 0 11rem 6rem;
  }
}
@media screen and (max-width: 768px) {
  .footer_inner {
    row-gap: 10rem;
    padding: 0 4rem 8rem;
  }
}
.footer_nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
@media screen and (min-width: 769px) {
  .footer_nav {
    row-gap: 3rem;
  }
}
@media screen and (max-width: 768px) {
  .footer_nav {
    row-gap: 6rem;
  }
}
.footer_nav_link {
  fill: #7c7c7c;
}
@media screen and (min-width: 769px) {
  .footer_nav_link {
    height: 3.1rem;
  }
}
@media screen and (max-width: 768px) {
  .footer_nav_link {
    height: 4.7rem;
  }
}
.footer_nav_link svg {
  width: 100%;
  pointer-events: none;
}
.footer_nav_link:hover {
  fill: #1f1f1f;
}
.footer_nav_link:nth-of-type(1) {
  aspect-ratio: 339/31;
}
.footer_nav_link:nth-of-type(2) {
  aspect-ratio: 153/31;
}
.footer_nav_link:nth-of-type(3) {
  aspect-ratio: 168/31;
}
.footer_nav_link:nth-of-type(4) {
  aspect-ratio: 143/31;
}

.dialog_outer {
  position: fixed;
  background: transparent;
  border: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  inset: 0;
}
.dialog_outer::backdrop {
  background: transparent;
  pointer-events: none;
}
.dialog_bg {
  position: absolute;
  background: rgba(0, 0, 0, 0.8);
  inset: 0;
}
.dialog_frame {
  aspect-ratio: 16/9;
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
}
@media screen and (min-width: 769px) {
  .dialog_frame {
    width: 96vw;
    max-width: 1080px;
  }
}
@media screen and (max-width: 768px) {
  .dialog_frame {
    width: 93.334vw;
  }
}
.dialog_frame iframe {
  position: relative;
  width: 100%;
  height: 100%;
}

.modal_outer {
  background: transparent;
  border: 0;
  max-width: 100dvw;
  max-height: 100dvh;
}
@media screen and (min-width: 769px) {
  .modal_outer {
    width: 95.6rem;
    padding: 10rem 8rem;
  }
}
@media screen and (max-width: 768px) {
  .modal_outer {
    padding: 14rem 3rem;
  }
}
.modal_outer::backdrop {
  background: rgba(31, 31, 31, 0.62);
  pointer-events: none;
}
.modal_outer:focus {
  outline: none;
}
.modal_close {
  cursor: pointer;
}
@media screen and (min-width: 769px) {
  .modal_close {
    position: absolute;
    width: 4.2rem;
    height: 4.2rem;
    right: 3rem;
    top: 2rem;
  }
}
@media screen and (max-width: 768px) {
  .modal_close {
    position: fixed;
    inset: 0;
  }
}
.modal_close::before, .modal_close::after {
  content: "";
  position: absolute;
  background: #fff;
  height: 2px;
  inset: 0;
  margin: auto;
  pointer-events: none;
}
@media screen and (min-width: 769px) {
  .modal_close::before, .modal_close::after {
    width: 5.94rem;
  }
}
.modal_close::before {
  rotate: 45deg;
}
.modal_close::after {
  rotate: -45deg;
}
.modal_close:hover {
  opacity: 0.5;
}
.modal_area {
  position: relative;
  width: 100%;
  overflow-y: scroll;
}
@media screen and (min-width: 769px) {
  .modal_area {
    max-height: calc(100dvh - 20rem);
  }
}
@media screen and (max-width: 768px) {
  .modal_area {
    max-height: calc(100dvh - 28rem);
  }
}
.modal_inner {
  position: relative;
  background: #fff;
}
@media screen and (min-width: 769px) {
  .modal_inner {
    padding: 12rem 11.3rem 8rem;
  }
}
@media screen and (max-width: 768px) {
  .modal_inner {
    padding: 5.5rem 4rem 10rem;
  }
}
.modal_profile {
  display: grid;
}
@media screen and (min-width: 769px) {
  .modal_profile {
    grid-template-columns: 21.1rem 1fr;
    grid-template-rows: auto auto 1fr;
    gap: 3rem 6.5rem;
  }
}
@media screen and (max-width: 768px) {
  .modal_profile {
    grid-template-columns: 23.6rem 1fr;
    grid-template-rows: auto 1fr auto;
    gap: 4.5rem 5.5rem;
  }
}
.modal_profile_image {
  grid-column: 1/2;
}
@media screen and (min-width: 769px) {
  .modal_profile_image {
    grid-row: 1/4;
  }
}
@media screen and (max-width: 768px) {
  .modal_profile_image {
    grid-row: 1/3;
  }
}
.modal_profile_index {
  grid-column: 2/3;
}
@media screen and (min-width: 769px) {
  .modal_profile_index {
    height: 1.4rem;
    margin-top: 1rem;
  }
}
@media screen and (max-width: 768px) {
  .modal_profile_index {
    height: 2.2rem;
  }
}
.modal_profile_caption {
  grid-column: 2/3;
}
.modal_profile_position {
  font-weight: 500;
}
@media screen and (min-width: 769px) {
  .modal_profile_position {
    line-height: 1.445;
    font-size: 1.8rem;
  }
}
@media screen and (max-width: 768px) {
  .modal_profile_position {
    line-height: 1.286;
    font-size: 2.8rem;
  }
}
.modal_profile_name {
  font-weight: 500;
}
@media screen and (min-width: 769px) {
  .modal_profile_name {
    line-height: 1.467;
    font-size: 3rem;
  }
}
@media screen and (max-width: 768px) {
  .modal_profile_name {
    padding-top: 1.5rem;
    line-height: 1.455;
    font-size: 4.4rem;
  }
}
@media screen and (min-width: 769px) {
  .modal_profile_text {
    grid-column: 2/3;
    line-height: 1.786;
    font-size: 1.4rem;
  }
}
@media screen and (max-width: 768px) {
  .modal_profile_text {
    grid-column: 1/3;
    line-height: 1.5;
    font-size: 2.8rem;
  }
}
@media screen and (min-width: 769px) {
  .modal_ingredient {
    margin-top: 6.5rem;
  }
}
@media screen and (max-width: 768px) {
  .modal_ingredient {
    margin-top: 10rem;
  }
}
.modal_ingredient_head {
  position: relative;
  border-bottom: 1px solid #e0e0e0;
  letter-spacing: 0.01em;
  font-weight: 500;
}
@media screen and (min-width: 769px) {
  .modal_ingredient_head {
    padding-bottom: 1.6rem;
    line-height: 1.45;
    font-size: 2rem;
  }
}
@media screen and (max-width: 768px) {
  .modal_ingredient_head {
    padding-bottom: 3.2rem;
    line-height: 1.45;
    font-size: 4rem;
  }
}
.modal_ingredient_list {
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 769px) {
  .modal_ingredient_list {
    margin-top: 1.5rem;
    line-height: 1.75;
    font-size: 1.6rem;
  }
}
@media screen and (max-width: 768px) {
  .modal_ingredient_list {
    margin-top: 3.5rem;
    line-height: 1.534;
    font-size: 3rem;
  }
}
.modal_ingredient_list > li {
  padding-left: 1.2em;
  text-indent: -1.2em;
}
.modal_ingredient_list > li::before {
  content: "・";
  margin-right: 0.2em;
}
@media screen and (min-width: 769px) {
  .modal_recipe {
    margin-top: 5.5rem;
  }
}
@media screen and (max-width: 768px) {
  .modal_recipe {
    margin-top: 11rem;
  }
}
.modal_recipe_head {
  position: relative;
  border-bottom: 1px solid #e0e0e0;
  letter-spacing: 0.01em;
  font-weight: 500;
}
@media screen and (min-width: 769px) {
  .modal_recipe_head {
    padding-bottom: 1.6rem;
    line-height: 1.45;
    font-size: 2rem;
  }
}
@media screen and (max-width: 768px) {
  .modal_recipe_head {
    padding-bottom: 3.2rem;
    line-height: 1.45;
    font-size: 4rem;
  }
}
.modal_recipe_steps {
  display: flex;
  flex-direction: column;
}
.modal_recipe_steps > li {
  position: relative;
}
@media screen and (min-width: 769px) {
  .modal_recipe_steps > li {
    padding: 2rem 1rem 4rem 4rem;
  }
}
@media screen and (max-width: 768px) {
  .modal_recipe_steps > li {
    padding: 4rem 1rem 8rem 10rem;
  }
}
.modal_recipe_steps > li + li {
  border-top: 1px solid #e0e0e0;
}
.modal_step {
  display: flex;
}
@media screen and (min-width: 769px) {
  .modal_step {
    flex-wrap: wrap;
    gap: 0.5rem 4rem;
  }
}
@media screen and (max-width: 768px) {
  .modal_step {
    flex-direction: column;
  }
}
.modal_step_number {
  position: absolute;
  background-position: left center;
  background-repeat: no-repeat;
  background-size: contain;
  left: 0;
}
@media screen and (min-width: 769px) {
  .modal_step_number {
    width: 4rem;
    height: 1.8rem;
    top: 2.4rem;
  }
}
@media screen and (max-width: 768px) {
  .modal_step_number {
    width: 10rem;
    height: 4.8rem;
    top: 4rem;
  }
}
.modal_step_number[data-number="0"] {
  background-image: url(../img/recipe/step0_k.svg);
}
.modal_step_number[data-number="1"] {
  background-image: url(../img/recipe/step1_k.svg);
}
.modal_step_number[data-number="2"] {
  background-image: url(../img/recipe/step2_k.svg);
}
.modal_step_number[data-number="3"] {
  background-image: url(../img/recipe/step3_k.svg);
}
.modal_step_number[data-number="4"] {
  background-image: url(../img/recipe/step4_k.svg);
}
.modal_step_number[data-number="5"] {
  background-image: url(../img/recipe/step5_k.svg);
}
.modal_step_number[data-number="6"] {
  background-image: url(../img/recipe/step6_k.svg);
}
.modal_step_number[data-number="7"] {
  background-image: url(../img/recipe/step7_k.svg);
}
.modal_step_number[data-number="8"] {
  background-image: url(../img/recipe/step8_k.svg);
}
.modal_step_number[data-number="9"] {
  background-image: url(../img/recipe/step9_k.svg);
}
.modal_step_number[data-number="10"] {
  background-image: url(../img/recipe/step10_k.svg);
}
.modal_step_time {
  position: relative;
  font-weight: 700;
}
@media screen and (min-width: 769px) {
  .modal_step_time {
    min-width: 12rem;
    padding-left: 1.223em;
    line-height: 1.445;
    font-size: 1.8rem;
  }
}
@media screen and (max-width: 768px) {
  .modal_step_time {
    padding-left: 1.922em;
    line-height: 1.448;
    font-size: 3.8rem;
  }
  .modal_step_time + .modal_step_amount {
    margin-top: 2rem;
  }
  .modal_step_time + .modal_step_text {
    padding-top: 1.5rem;
  }
}
.modal_step_time::before {
  content: "";
  position: absolute;
  background-image: url(../img/recipe/timer_k.svg);
  background-position: left center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 0.834em;
  height: 0.945em;
  left: 0;
  top: 50%;
  translate: 0 -50%;
}
@media screen and (min-width: 769px) {
  .modal_step_time::before {
    width: 0.834em;
    height: 0.945em;
  }
}
@media screen and (max-width: 768px) {
  .modal_step_time::before {
    width: 1.237em;
    height: 1.474em;
  }
}
.modal_step_amount {
  position: relative;
  font-weight: 500;
}
@media screen and (min-width: 769px) {
  .modal_step_amount {
    padding-left: 1.375em;
    line-height: 1.625;
    font-size: 1.6rem;
  }
}
@media screen and (max-width: 768px) {
  .modal_step_amount {
    padding-left: 2.148em;
    line-height: 1.618;
    font-size: 3.4rem;
  }
  .modal_step_amount + .modal_step_text {
    padding-top: 1.5rem;
  }
}
.modal_step_amount::before {
  content: "";
  position: absolute;
  background-image: url(../img/recipe/drip_k.svg);
  background-position: left center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 0.778em;
  height: 1em;
  top: 50%;
  translate: 0 -50%;
}
@media screen and (min-width: 769px) {
  .modal_step_amount::before {
    width: 0.778em;
    height: 1em;
    left: 0;
  }
}
@media screen and (max-width: 768px) {
  .modal_step_amount::before {
    width: 1.206em;
    height: 1.648em;
    left: 0.177em;
  }
}
.modal_step_text {
  width: 100%;
  color: #7c7c7c;
}
@media screen and (min-width: 769px) {
  .modal_step_text {
    padding-left: 1rem;
    line-height: 1.858;
    font-size: 1.4rem;
  }
}
@media screen and (max-width: 768px) {
  .modal_step_text {
    line-height: 1.688;
    font-size: 3.2rem;
  }
}