/*------------------------------
RESET
--------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Zen+Kaku+Gothic+New:wght@400;500;700;900&display=swap");
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

body {
  line-height: 1;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

nav ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

/* change colours to suit your needs */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

/* change colours to suit your needs */
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* change border colour to suit your needs */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}

input, select {
  vertical-align: middle;
}

/*------------------------------
common
--------------------------------*/
img {
  width: 100%;
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

@media screen and (min-width: 769px) {
  html {
    font-size: min(0.715vw, 10px);
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 1.334vw;
  }
}

body {
  margin: 0;
}

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

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

@keyframes animeFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes animeFadeUp {
  0% {
    transform: translateY(30px);
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.content_fadeUp {
  opacity: 0;
}
.content_fadeUp.is-animated {
  animation: animeFadeUp 1s 0s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

#ice {
  font-family: "Zen Kaku Gothic New", sans-serif;
  color: #1e1e1e;
}
.txt_blue {
  color: #0096be;
}

.hero {
  display: flex;
  justify-content: center;
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: 100% auto;
}
@media screen and (min-width: 769px) {
  .hero {
    height: 70rem;
    background-image: url(/html/user_data/bp_feature/ice/imgs/hero_bg.jpg);
  }
}
@media screen and (max-width: 768px) {
  .hero {
    height: 95rem;
    background-image: url(/html/user_data/bp_feature/ice/imgs/hero_bg_sp.jpg);
  }
}

.hero_head {
  opacity: 0;
  animation: animeFadeUp 1s 2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
@media screen and (min-width: 769px) {
  .hero_head {
    width: 40.2rem;
    height: 41.6rem;
    padding-top: 12.8rem;
  }
}
@media screen and (max-width: 768px) {
  .hero_head {
    width: 40.2rem;
    height: 41.6rem;
    padding-top: 20.8rem;
  }
}

.sec_enjoy {
  position: relative;
  background-color: #fff;
}
@media screen and (min-width: 769px) {
  .sec_enjoy {
    margin-top: -3.4rem;
    padding-top: 10.8rem;
  }
}
@media screen and (max-width: 768px) {
  .sec_enjoy {
    margin-top: -4.3rem;
    padding-top: 11.2rem;
  }
}
.sec_enjoy::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  translate: 0 -96%;
  background-repeat: repeat-x;
  background-position: 0 0;
  margin: auto;
}
@media screen and (min-width: 769px) {
  .sec_enjoy::before {
    height: 1.2rem;
    background-image: url(/html/user_data/bp_feature/ice/imgs/wave_w.png);
    background-size: 6.8rem auto;
  }
}
@media screen and (max-width: 768px) {
  .sec_enjoy::before {
    height: 1.2rem;
    background-image: url(/html/user_data/bp_feature/ice/imgs/wave_w.png);
    background-size: 6.8rem auto;
  }
}

.enjoy_head {
  margin: 0 auto;
}
@media screen and (min-width: 769px) {
  .enjoy_head {
    width: 64.9rem;
  }
}
@media screen and (max-width: 768px) {
  .enjoy_head {
    width: 52.4rem;
  }
}

.point_list {
  display: grid;
  margin: 0 auto;
}
@media screen and (min-width: 769px) {
  .point_list {
    grid-template-columns: repeat(3, 1fr);
    -moz-column-gap: 3.4rem;
         column-gap: 3.4rem;
    width: 111.8rem;
    padding-top: 5.3rem;
  }
}
@media screen and (max-width: 768px) {
  .point_list {
    grid-template-columns: repeat(1, 1fr);
    row-gap: 6rem;
    width: 50rem;
    padding-top: 9.5rem;
  }
}
.point_list > li {
  position: relative;
}
.point_list > li .point {
  position: absolute;
  top: 0;
  left: 0;
}
@media screen and (min-width: 769px) {
  .point_list > li .point {
    width: 10.2rem;
    height: 9.2rem;
  }
}
@media screen and (max-width: 768px) {
  .point_list > li .point {
    width: 14.7rem;
    height: 13rem;
  }
}

.point_txt {
  font-weight: 700;
  text-align: center;
}
@media screen and (min-width: 769px) {
  .point_txt {
    margin-top: 3rem;
    line-height: 1.546em;
    font-size: 2.2rem;
  }
  .point_txt > p {
    line-height: inherit;
    font: inherit;
  }
  .point_txt > p:first-of-type {
    margin-top: -0.272em;
  }
  .point_txt > p:last-of-type {
    margin-bottom: -0.272em;
  }
}
@media screen and (max-width: 768px) {
  .point_txt {
    margin-top: 3rem;
    line-height: 1.563em;
    font-size: 3.2rem;
  }
  .point_txt > p {
    line-height: inherit;
    font: inherit;
  }
  .point_txt > p:first-of-type {
    margin-top: -0.281em;
  }
  .point_txt > p:last-of-type {
    margin-bottom: -0.281em;
  }
}

.sec_what {
  position: relative;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 100% auto;
}
@media screen and (min-width: 769px) {
  .sec_what {
    width: 111.8rem;
    margin: 9.8rem auto 0;
    padding-bottom: 21.6rem;
    border-radius: 2rem;
    background-image: url(/html/user_data/bp_feature/ice/imgs/what_bg.png);
  }
}
@media screen and (max-width: 768px) {
  .sec_what {
    width: 62.2rem;
    margin: 12.2rem auto 0;
    padding-bottom: 25.8rem;
    border-radius: 2rem;
    background-image: url(/html/user_data/bp_feature/ice/imgs/what_bg_sp.png);
  }
}
.sec_what::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}
@media screen and (min-width: 769px) {
  .sec_what::after {
    width: 100%;
    height: 20rem;
    background-image: url(/html/user_data/bp_feature/ice/imgs/what_bg_coffee.png);
  }
}
@media screen and (max-width: 768px) {
  .sec_what::after {
    width: 100%;
    height: 20rem;
    background-image: url(/html/user_data/bp_feature/ice/imgs/what_bg_coffee_sp.png);
  }
}

.what_head {
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: 100% auto;
  font-weight: 700;
  text-align: center;
  color: #fff;
  letter-spacing: 0.05em;
}
@media screen and (min-width: 769px) {
  .what_head {
    padding: 2.6rem 0;
    background-image: url(/html/user_data/bp_feature/ice/imgs/what_head.png);
    line-height: 1.358em;
    font-size: 2.8rem;
  }
  .what_head > h2 {
    line-height: inherit;
    font: inherit;
  }
  .what_head > h2:first-of-type {
    margin-top: -0.178em;
  }
  .what_head > h2:last-of-type {
    margin-bottom: -0.178em;
  }
}
@media screen and (max-width: 768px) {
  .what_head {
    padding: 3.6rem 0;
    background-image: url(/html/user_data/bp_feature/ice/imgs/what_head_sp.png);
    line-height: 1.188em;
    font-size: 3.2rem;
  }
  .what_head > h2 {
    line-height: inherit;
    font: inherit;
  }
  .what_head > h2:first-of-type {
    margin-top: -0.093em;
  }
  .what_head > h2:last-of-type {
    margin-bottom: -0.093em;
  }
}

.what_lead {
  font-weight: 700;
  font-family: "Noto Sans JP", sans-serif;
}
@media screen and (min-width: 769px) {
  .what_lead {
    margin-top: 4rem;
    line-height: 1.778em;
    font-size: 1.8rem;
    text-align: center;
    letter-spacing: 0.1em;
  }
  .what_lead > p {
    line-height: inherit;
    font: inherit;
  }
  .what_lead > p:first-of-type {
    margin-top: -0.388em;
  }
  .what_lead > p:last-of-type {
    margin-bottom: -0.388em;
  }
}
@media screen and (max-width: 768px) {
  .what_lead {
    width: 48rem;
    margin: 8rem auto 0;
    line-height: 1.847em;
    font-size: 2.6rem;
    text-align: justify;
    letter-spacing: 0.1em;
  }
  .what_lead > p {
    line-height: inherit;
    font: inherit;
  }
  .what_lead > p:first-of-type {
    margin-top: -0.423em;
  }
  .what_lead > p:last-of-type {
    margin-bottom: -0.423em;
  }
}

.for {
  position: relative;
}
@media screen and (min-width: 769px) {
  .for {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    -moz-column-gap: 11rem;
         column-gap: 11rem;
    width: 95.8rem;
    margin: 4rem auto 0;
  }
}
@media screen and (min-width: 769px) {
  .for::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    translate: -50% 0;
    width: 0.2rem;
    height: 100%;
    background: url(/html/user_data/bp_feature/ice/imgs/for_line.svg) repeat-y 0 0;
    background-size: contain;
  }
}

.for_tab {
  display: flex;
  gap: 1.6rem;
  width: 46.6rem;
  margin: 6rem auto 0;
}

.for_tab_item {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 23.2rem;
  height: 13rem;
  line-height: 1.385em;
  font-size: 2.6rem;
  border-radius: 1rem;
  background-color: #fff;
}
.for_tab_item > p {
  line-height: inherit;
  font: inherit;
}
.for_tab_item > p:first-of-type {
  margin-top: -0.192em;
}
.for_tab_item > p:last-of-type {
  margin-bottom: -0.192em;
}
.for_tab_item.is-current {
  color: #fff;
  background-color: #4d0600;
}
.for_tab_item.is-current::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  translate: 0 99.8%;
  margin: auto;
  width: 2.4rem;
  height: 1.6rem;
  border-radius: 0.2rem;
  background-color: #4d0600;
  -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
          clip-path: polygon(0 0, 100% 0, 50% 100%);
}

@media screen and (max-width: 768px) {
  .for_item {
    display: none;
    width: 48.2rem;
    margin: 4.6rem auto 0;
  }
}
@media screen and (max-width: 768px) {
  .for_item.is-current {
    display: block;
  }
}

.for_head {
  margin: 0 auto;
}
@media screen and (min-width: 769px) {
  .for_head {
    width: 28.6rem;
    height: 9rem;
  }
}

@media screen and (min-width: 769px) {
  .for_img {
    margin-top: 1rem;
  }
}

.for_txt {
  font-weight: 500;
  font-family: "Noto Sans JP", sans-serif;
  text-align: justify;
}
@media screen and (min-width: 769px) {
  .for_txt {
    margin-top: 3rem;
    line-height: 1.75em;
    font-size: 1.6rem;
    letter-spacing: 0.1em;
  }
  .for_txt > p {
    line-height: inherit;
    font: inherit;
  }
  .for_txt > p:first-of-type {
    margin-top: -0.375em;
  }
  .for_txt > p:last-of-type {
    margin-bottom: -0.375em;
  }
}
@media screen and (max-width: 768px) {
  .for_txt {
    margin-top: 6rem;
    line-height: 1.847em;
    font-size: 2.6rem;
    letter-spacing: 0.08em;
    letter-spacing: 0.07em;
  }
  .for_txt > p {
    line-height: inherit;
    font: inherit;
  }
  .for_txt > p:first-of-type {
    margin-top: -0.423em;
  }
  .for_txt > p:last-of-type {
    margin-bottom: -0.423em;
  }
}

.for_annotation {
  font-family: "Noto Sans JP", sans-serif;
}
@media screen and (min-width: 769px) {
  .for_annotation {
    margin-top: 3rem;
    line-height: 1.667em;
    font-size: 1.2rem;
    letter-spacing: 0.1em;
  }
  .for_annotation > p {
    line-height: inherit;
    font: inherit;
  }
  .for_annotation > p:first-of-type {
    margin-top: -0.333em;
  }
  .for_annotation > p:last-of-type {
    margin-bottom: -0.333em;
  }
}
@media screen and (max-width: 768px) {
  .for_annotation {
    margin-top: 6rem;
    line-height: 1.637em;
    font-size: 2.2rem;
    letter-spacing: 0.07em;
  }
  .for_annotation > p {
    line-height: inherit;
    font: inherit;
  }
  .for_annotation > p:first-of-type {
    margin-top: -0.318em;
  }
  .for_annotation > p:last-of-type {
    margin-bottom: -0.318em;
  }
}

@media screen and (min-width: 769px) {
  .color {
    margin-top: 11rem;
  }
}
@media screen and (max-width: 768px) {
  .color {
    margin-top: 12.2rem;
  }
}

.color_head {
  margin: 0 auto;
}
@media screen and (min-width: 769px) {
  .color_head {
    width: 54.6rem;
  }
}
@media screen and (max-width: 768px) {
  .color_head {
    width: 49rem;
  }
}

@media screen and (min-width: 769px) {
  .color_img {
    margin-top: 4rem;
    background: url(/html/user_data/bp_feature/ice/imgs/color_img.png) no-repeat 50% 50%;
    background-size: 166rem auto;
  }
}
@media screen and (max-width: 768px) {
  .color_img {
    margin-top: 3rem;
    background: url(/html/user_data/bp_feature/ice/imgs/color_img_sp.png) no-repeat 50% 50%;
    background-size: 62.2rem auto;
  }
}

@media screen and (min-width: 769px) {
  .color_txt {
    width: 111.1rem;
    height: 70.1rem;
    margin: 0 auto;
  }
}
@media screen and (max-width: 768px) {
  .color_txt {
    width: 72.6rem;
    height: 145.9rem;
    margin: 0 auto;
  }
}

.sec_how {
  position: relative;
  z-index: 1;
  background-color: #d9efff;
}
@media screen and (min-width: 769px) {
  .sec_how {
    margin-top: 6rem;
    padding-top: 6rem;
    padding-bottom: 14rem;
    background-image: url(/html/user_data/bp_feature/ice/imgs/how_bg01.png), url(/html/user_data/bp_feature/ice/imgs/how_bg02.png);
    background-repeat: no-repeat, no-repeat;
    background-position: calc(50% + 63rem) 61.8rem, calc(50% - 60rem) 92rem;
    background-size: 41.2rem 41.2rem, 41.2rem 41.2rem;
  }
}
@media screen and (max-width: 768px) {
  .sec_how {
    margin-top: 6rem;
    padding-top: 6rem;
    padding-bottom: 14rem;
  }
}
.sec_how::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  translate: 0 -97%;
  background-repeat: repeat-x;
  background-position: 0 0;
  margin: auto;
}
@media screen and (min-width: 769px) {
  .sec_how::before {
    height: 1.2rem;
    background-image: url(/html/user_data/bp_feature/ice/imgs/wave_b.png);
    background-size: 6.8rem auto;
  }
}
@media screen and (max-width: 768px) {
  .sec_how::before {
    height: 1.2rem;
    background-image: url(/html/user_data/bp_feature/ice/imgs/wave_b.png);
    background-size: 6.8rem auto;
  }
}
.sec_how::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  translate: 0 95%;
  scale: 1 -1;
  background-repeat: repeat-x;
  background-position: 0 0;
  margin: auto;
}
@media screen and (min-width: 769px) {
  .sec_how::after {
    height: 1.2rem;
    background-image: url(/html/user_data/bp_feature/ice/imgs/wave_b.png);
    background-size: 6.8rem auto;
  }
}
@media screen and (max-width: 768px) {
  .sec_how::after {
    height: 1.2rem;
    background-image: url(/html/user_data/bp_feature/ice/imgs/wave_b.png);
    background-size: 6.8rem auto;
  }
}

.how_inr {
  margin: 0 auto;
}
@media screen and (min-width: 769px) {
  .how_inr {
    width: 113.8rem;
  }
}

.how_head {
  margin: 0 auto;
}
@media screen and (min-width: 769px) {
  .how_head {
    width: 56.8rem;
  }
}
@media screen and (max-width: 768px) {
  .how_head {
    width: 53rem;
  }
}

@media screen and (min-width: 769px) {
  .how_step_wrap {
    padding: 0 1rem;
  }
}
@media screen and (max-width: 768px) {
  .how_step_wrap {
    position: relative;
    margin-top: 6rem;
    padding: 3rem 4.4rem 0;
  }
}

@media screen and (max-width: 768px) {
  .how_step_nav {
    position: absolute;
    top: 19.2rem;
    left: 50%;
    translate: -50% 0;
    width: 66rem;
    z-index: 1;
  }
}

@media screen and (max-width: 768px) {
  .how_step_button {
    position: absolute;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 8rem;
    height: 8rem;
    background-color: #fff;
    border-radius: 100vmax;
    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.2);
  }
}
.how_step_button::before {
  transform-origin: 50% 50%;
}
@media screen and (max-width: 768px) {
  .how_step_button::before {
    content: "";
    display: block;
    width: 2.2rem;
    height: 3rem;
    background: url(/html/user_data/bp_feature/ice/imgs/icon_arrow.svg) no-repeat 0 0;
    background-size: contain;
  }
}

@media screen and (max-width: 768px) {
  .how_step_button-prev {
    left: 0;
  }
}
.how_step_button-prev::before {
  scale: -1 1;
}

@media screen and (max-width: 768px) {
  .how_step_button-next {
    right: 0;
  }
}

@media screen and (min-width: 769px) {
  .how_step {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    -moz-column-gap: 4.8rem;
         column-gap: 4.8rem;
    margin: 7.5rem auto 0;
  }
}
.how_step > li {
  position: relative;
}
.how_step > li:last-child .step_img::before {
  content: none;
}
@media screen and (max-width: 768px) {
  .how_step > li {
    padding: 0 1.5rem;
  }
}
.how_step > li .step {
  position: absolute;
  z-index: 1;
}
@media screen and (min-width: 769px) {
  .how_step > li .step {
    top: -3rem;
    left: -1rem;
    width: 7.1rem;
    height: 7.1rem;
  }
}
@media screen and (max-width: 768px) {
  .how_step > li .step {
    top: -3rem;
    left: -5.5rem;
    width: 11rem;
    height: 12.7rem;
  }
}
.how_step > li .step_img {
  position: relative;
}
@media screen and (min-width: 769px) {
  .how_step > li .step_img::before {
    content: "";
    position: absolute;
    top: 50%;
    right: -3.5rem;
    translate: 0 -50%;
    width: 2.3rem;
    height: 3rem;
    background-color: #fff;
    -webkit-clip-path: polygon(0 0, 100% 50%, 0% 100%);
            clip-path: polygon(0 0, 100% 50%, 0% 100%);
    border-radius: 0.2rem;
  }
}
.how_step > li .step_txt {
  text-align: center;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
}
@media screen and (min-width: 769px) {
  .how_step > li .step_txt {
    margin-top: 3rem;
    line-height: 1.75em;
    font-size: 1.6rem;
    letter-spacing: 0.1em;
  }
  .how_step > li .step_txt > p {
    line-height: inherit;
    font: inherit;
  }
  .how_step > li .step_txt > p:first-of-type {
    margin-top: -0.375em;
  }
  .how_step > li .step_txt > p:last-of-type {
    margin-bottom: -0.375em;
  }
}
@media screen and (max-width: 768px) {
  .how_step > li .step_txt {
    margin-top: 4rem;
    line-height: 1.847em;
    font-size: 2.6rem;
    letter-spacing: 0.08em;
  }
  .how_step > li .step_txt > p {
    line-height: inherit;
    font: inherit;
  }
  .how_step > li .step_txt > p:first-of-type {
    margin-top: -0.423em;
  }
  .how_step > li .step_txt > p:last-of-type {
    margin-bottom: -0.423em;
  }
}
.how_step > li .step_annotation {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
}
@media screen and (min-width: 769px) {
  .how_step > li .step_annotation {
    margin-top: 2rem;
    line-height: 1.667em;
    font-size: 1.2rem;
    letter-spacing: 0.1em;
    text-align: center;
  }
  .how_step > li .step_annotation > p {
    line-height: inherit;
    font: inherit;
  }
  .how_step > li .step_annotation > p:first-of-type {
    margin-top: -0.333em;
  }
  .how_step > li .step_annotation > p:last-of-type {
    margin-bottom: -0.333em;
  }
}
@media screen and (max-width: 768px) {
  .how_step > li .step_annotation {
    margin-top: 3rem;
    line-height: 1.637em;
    font-size: 2.2rem;
    letter-spacing: 0.07em;
    text-align: justify;
  }
  .how_step > li .step_annotation > p {
    line-height: inherit;
    font: inherit;
  }
  .how_step > li .step_annotation > p:first-of-type {
    margin-top: -0.318em;
  }
  .how_step > li .step_annotation > p:last-of-type {
    margin-bottom: -0.318em;
  }
}

.how_movie {
  position: relative;
  cursor: pointer;
}
@media screen and (min-width: 769px) {
  .how_movie {
    width: 82rem;
    margin: 10rem auto 0;
  }
}
@media screen and (max-width: 768px) {
  .how_movie {
    width: 62.2rem;
    margin: 15rem auto 0;
  }
}

.movie_head {
  position: absolute;
  z-index: 1;
}
@media screen and (min-width: 769px) {
  .movie_head {
    top: -6rem;
    left: -6rem;
    width: 25.8rem;
    height: 15.5rem;
  }
}
@media screen and (max-width: 768px) {
  .movie_head {
    top: -9rem;
    left: -6rem;
    width: 34.2rem;
    height: 20.6rem;
  }
}

.movie_data {
  margin: 0 auto;
}
@media screen and (min-width: 769px) {
  .movie_data {
    width: 82rem;
    height: 47rem;
  }
}
.movie_data:hover {
  transition: opacity 0.4s;
  opacity: 0.8;
}

.bg_ball {
  position: relative;
}
@media screen and (min-width: 769px) {
  .bg_ball {
    background: url(/html/user_data/bp_feature/ice/imgs/bg_ball.png);
    background-repeat: repeat;
    background-position: 50% 2.1%;
    background-size: 73.4rem auto;
    padding-top: 9rem;
    padding-bottom: 20.5rem;
  }
}
@media screen and (max-width: 768px) {
  .bg_ball {
    background: url(/html/user_data/bp_feature/ice/imgs/bg_ball.png);
    background-repeat: repeat;
    background-position: 50% 29rem;
    background-size: 45rem auto;
    padding-top: 7rem;
    padding-bottom: 22rem;
  }
}

.sec_capsule {
  position: relative;
  background-color: rgba(255, 255, 255, 0.8);
}
@media screen and (min-width: 769px) {
  .sec_capsule {
    width: 111.8rem;
    margin: 0 auto;
    padding-top: 9rem;
    padding-bottom: 12.8rem;
  }
}
@media screen and (max-width: 768px) {
  .sec_capsule {
    width: 62.2rem;
    margin: 0 auto;
    padding-top: 10rem;
    padding-bottom: 12rem;
  }
}
.sec_capsule::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  border: solid #3ca09e;
  pointer-events: none;
}
@media screen and (min-width: 769px) {
  .sec_capsule::before {
    width: 98.2110912343%;
    height: 98.9626556017%;
    border-width: 0.3rem;
  }
}
@media screen and (max-width: 768px) {
  .sec_capsule::before {
    width: 96.7845659164%;
    height: 99.6297667531%;
    border-width: 0.3rem;
  }
}

.capsule_head_img {
  margin: 0 auto;
}
@media screen and (min-width: 769px) {
  .capsule_head_img {
    width: 47.1rem;
  }
}
@media screen and (max-width: 768px) {
  .capsule_head_img {
    width: 47rem;
  }
}

.capsule_head_txt {
  margin: 0 auto;
}
@media screen and (min-width: 769px) {
  .capsule_head_txt {
    width: 34.6rem;
    margin-top: 1rem;
  }
}
@media screen and (max-width: 768px) {
  .capsule_head_txt {
    width: 38rem;
    margin-top: 2.7rem;
  }
}

.capsule_lead {
  font-weight: 700;
  text-align: center;
}
@media screen and (min-width: 769px) {
  .capsule_lead {
    margin-top: 5rem;
    line-height: 1.778em;
    font-size: 1.8rem;
  }
  .capsule_lead > p {
    line-height: inherit;
    font: inherit;
  }
  .capsule_lead > p:first-of-type {
    margin-top: -0.388em;
  }
  .capsule_lead > p:last-of-type {
    margin-bottom: -0.388em;
  }
}
@media screen and (max-width: 768px) {
  .capsule_lead {
    margin-top: 6rem;
    line-height: 1.847em;
    font-size: 2.6rem;
  }
  .capsule_lead > p {
    line-height: inherit;
    font: inherit;
  }
  .capsule_lead > p:first-of-type {
    margin-top: -0.423em;
  }
  .capsule_lead > p:last-of-type {
    margin-bottom: -0.423em;
  }
}

@media screen and (min-width: 769px) {
  .capsule_contents {
    margin-top: 6rem;
  }
}
@media screen and (max-width: 768px) {
  .capsule_contents {
    margin-top: 8rem;
  }
}
@media screen and (min-width: 769px) {
  .capsule_contents + .capsule_contents {
    margin-top: 10rem;
  }
}
@media screen and (max-width: 768px) {
  .capsule_contents + .capsule_contents {
    margin-top: 9.6rem;
  }
}

.capsule_contents_head {
  margin: 0 auto;
}
@media screen and (min-width: 769px) {
  .capsule_contents_head {
    width: 31.6rem;
  }
}
@media screen and (max-width: 768px) {
  .capsule_contents_head {
    width: 38rem;
  }
}

.capsule_item_wrap {
  display: flex;
}
@media screen and (min-width: 769px) {
  .capsule_item_wrap {
    justify-content: center;
    gap: 5rem;
    margin-top: 3rem;
  }
}
@media screen and (max-width: 768px) {
  .capsule_item_wrap {
    flex-direction: column;
    gap: 9.8rem;
    margin-top: 6rem;
  }
}

@media screen and (min-width: 769px) {
  .capsule_item {
    display: flex;
    flex-direction: column;
    width: 28.6rem;
  }
}
@media screen and (max-width: 768px) {
  .capsule_item {
    display: flex;
    flex-direction: column;
    width: 48.2rem;
    margin: 0 auto;
  }
}

.capsule_img {
  position: relative;
  margin: 0 auto;
}
@media screen and (min-width: 769px) {
  .capsule_img {
    width: 25.6rem;
  }
}
@media screen and (max-width: 768px) {
  .capsule_img {
    width: 45.8rem;
  }
}

.capsule_pac {
  position: absolute;
}
@media screen and (min-width: 769px) {
  .capsule_pac {
    right: -2.8rem;
    bottom: -2.6rem;
  }
}
@media screen and (max-width: 768px) {
  .capsule_pac {
    right: -5rem;
    bottom: -4.8rem;
  }
}
@media screen and (min-width: 769px) {
  .capsule_pac.ueshima {
    width: 14.2rem;
    height: 14.4rem;
  }
}
@media screen and (max-width: 768px) {
  .capsule_pac.ueshima {
    width: 25.4rem;
    height: 25.7rem;
  }
}
@media screen and (min-width: 769px) {
  .capsule_pac.keurig {
    width: 14.2rem;
    height: 14.4rem;
  }
}
@media screen and (max-width: 768px) {
  .capsule_pac.keurig {
    width: 25.4rem;
    height: 25.7rem;
  }
}
@media screen and (min-width: 769px) {
  .capsule_pac.afternoon {
    width: 14.2rem;
    height: 14.5rem;
  }
}
@media screen and (max-width: 768px) {
  .capsule_pac.afternoon {
    width: 25.4rem;
    height: 25.7rem;
  }
}
@media screen and (min-width: 769px) {
  .capsule_pac.nakamura {
    width: 14.2rem;
    height: 14.5rem;
  }
}
@media screen and (max-width: 768px) {
  .capsule_pac.nakamura {
    width: 25.4rem;
    height: 25.7rem;
  }
}
@media screen and (min-width: 769px) {
  .capsule_pac.keurig_milk {
    width: 14.2rem;
    height: 14.5rem;
  }
}
@media screen and (max-width: 768px) {
  .capsule_pac.keurig_milk {
    width: 25.4rem;
    height: 25.7rem;
  }
}

.capsule_ttl {
  font-weight: 700;
  text-align: center;
}
@media screen and (min-width: 769px) {
  .capsule_ttl {
    margin-top: 4rem;
    line-height: 1.4em;
    font-size: 2rem;
    letter-spacing: 0.08em;
  }
  .capsule_ttl > p {
    line-height: inherit;
    font: inherit;
  }
  .capsule_ttl > p:first-of-type {
    margin-top: -0.2em;
  }
  .capsule_ttl > p:last-of-type {
    margin-bottom: -0.2em;
  }
}
@media screen and (max-width: 768px) {
  .capsule_ttl {
    margin-top: 8.4rem;
    line-height: 1.334em;
    font-size: 3.6rem;
  }
  .capsule_ttl > p {
    line-height: inherit;
    font: inherit;
  }
  .capsule_ttl > p:first-of-type {
    margin-top: -0.166em;
  }
  .capsule_ttl > p:last-of-type {
    margin-bottom: -0.166em;
  }
}

.capsule_txt {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  text-align: center;
}
@media screen and (min-width: 769px) {
  .capsule_txt {
    margin-top: 2.5rem;
    margin-bottom: 3.5rem;
    line-height: 1.715em;
    font-size: 1.4rem;
    letter-spacing: 0.07em;
  }
  .capsule_txt > p {
    line-height: inherit;
    font: inherit;
  }
  .capsule_txt > p:first-of-type {
    margin-top: -0.357em;
  }
  .capsule_txt > p:last-of-type {
    margin-bottom: -0.357em;
  }
}
@media screen and (max-width: 768px) {
  .capsule_txt {
    margin-top: 4.2rem;
    margin-bottom: 6rem;
    line-height: 1.847em;
    font-size: 2.6rem;
    letter-spacing: 0.08em;
  }
  .capsule_txt > p {
    line-height: inherit;
    font: inherit;
  }
  .capsule_txt > p:first-of-type {
    margin-top: -0.423em;
  }
  .capsule_txt > p:last-of-type {
    margin-bottom: -0.423em;
  }
}

@media screen and (min-width: 769px) {
  .capsule_btn {
    margin-top: auto;
  }
}
.capsule_btn .btn {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  background-color: #ab2138;
  color: #fff;
  font-weight: 700;
}
@media screen and (min-width: 769px) {
  .capsule_btn .btn {
    padding: 2rem 0;
    line-height: 1;
    font-size: 1.8rem;
    border-radius: 0.6rem;
  }
}
@media screen and (max-width: 768px) {
  .capsule_btn .btn {
    padding: 3.7rem 0;
    line-height: 1;
    font-size: 3.2rem;
    border-radius: 0.6rem;
  }
}
.capsule_btn .btn::before {
  content: "";
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  background: url(/html/user_data/bp_feature/ice/imgs/icon_btn.png) no-repeat 0 0;
  background-size: contain;
}
@media screen and (min-width: 769px) {
  .capsule_btn .btn::before {
    right: 2rem;
    width: 2.2rem;
    height: 2.2rem;
  }
}
@media screen and (max-width: 768px) {
  .capsule_btn .btn::before {
    right: 3.2rem;
    width: 3.8rem;
    height: 3.8rem;
  }
}
.capsule_btn .btn:hover {
  transition: opacity 0.4s;
  opacity: 0.7;
}

.sec_recipe {
  position: relative;
}
@media screen and (min-width: 769px) {
  .sec_recipe {
    width: 111.8rem;
    margin: 18rem auto 0;
  }
}
@media screen and (max-width: 768px) {
  .sec_recipe {
    width: 62.2rem;
    margin: 16rem auto 0;
  }
}
.sec_recipe::before, .sec_recipe::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: contain;
}
.sec_recipe::before {
  top: 0;
  translate: 0 -99%;
}
@media screen and (min-width: 769px) {
  .sec_recipe::before {
    height: 13.6rem;
    background-image: url(/html/user_data/bp_feature/ice/imgs/recipe_bg_top.png);
  }
}
@media screen and (max-width: 768px) {
  .sec_recipe::before {
    height: 10rem;
    background-image: url(/html/user_data/bp_feature/ice/imgs/recipe_bg_top_sp.png);
  }
}
.sec_recipe::after {
  bottom: 0;
  translate: 0 99%;
}
@media screen and (min-width: 769px) {
  .sec_recipe::after {
    height: 10.6rem;
    background-image: url(/html/user_data/bp_feature/ice/imgs/recipe_bg_btm.png);
  }
}
@media screen and (max-width: 768px) {
  .sec_recipe::after {
    height: 8rem;
    background-image: url(/html/user_data/bp_feature/ice/imgs/recipe_bg_btm_sp.png);
  }
}

.recipe_inr {
  margin: 0 auto;
  background-color: #f2f2f0;
}
@media screen and (min-width: 769px) {
  .recipe_inr {
    padding: 2.5rem 9rem 2rem 9.8rem;
  }
}
@media screen and (max-width: 768px) {
  .recipe_inr {
    padding: 5.5rem 0 4rem;
  }
}

@media screen and (min-width: 769px) {
  .recipe_head {
    width: 52.6rem;
    margin: 0 0 5.5rem 17.8rem;
  }
}
@media screen and (max-width: 768px) {
  .recipe_head {
    width: 52.6rem;
    margin-left: 3.8rem;
    margin-bottom: 6rem;
  }
}

@media screen and (max-width: 768px) {
  .recipe_tab {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    -moz-column-gap: 1.8rem;
         column-gap: 1.8rem;
    width: 48.2rem;
    margin: 0 auto;
  }
}

.recipe_tab_item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 17rem;
  margin-bottom: 5rem;
  background-color: #fff;
  border-radius: 1rem;
}
.recipe_tab_item.is-current {
  background-color: #0096be;
}
.recipe_tab_item.is-current::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  translate: 0 99.5%;
  margin: auto;
  width: 2.4rem;
  height: 1.6rem;
  border-radius: 0.2rem;
  background-color: #0096be;
  -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
          clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.recipe_tab_item > figure {
  width: 10rem;
}

.recipe_item {
  display: flex;
}
@media screen and (min-width: 769px) {
  .recipe_item {
    justify-content: space-between;
    align-items: center;
    gap: 2.6rem;
    padding-right: 1rem;
  }
}
@media screen and (max-width: 768px) {
  .recipe_item {
    display: none;
    flex-direction: column;
    gap: 4.5rem;
    width: 48.2rem;
    margin: 0 auto;
  }
  .recipe_item.is-current {
    display: block;
  }
}
@media screen and (min-width: 769px) {
  .recipe_item:has(.lipton) {
    padding-right: 0;
    padding-left: 1rem;
  }
}
@media screen and (min-width: 769px) {
  .recipe_item + .recipe_item {
    margin-top: 1rem;
  }
}
@media screen and (min-width: 769px) {
  .recipe_item > div {
    width: 48rem;
  }
}

@media screen and (min-width: 769px) {
  .recipe_img {
    transform-origin: 50% 50%;
    width: 40.3rem;
  }
}
@media screen and (max-width: 768px) {
  .recipe_img {
    width: 50.3rem;
    margin: 0 auto;
    translate: -1rem 0;
  }
}
@media screen and (min-width: 769px) {
  .recipe_img.ogawa {
    order: 2;
    rotate: 5deg;
  }
}
@media screen and (min-width: 769px) {
  .recipe_img.lipton {
    rotate: -5deg;
  }
}
@media screen and (min-width: 769px) {
  .recipe_img.greco {
    order: 2;
    rotate: 5deg;
  }
}

@media screen and (min-width: 769px) {
  .recipe_item_head {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0 1.4rem 1.8rem;
    border-bottom: dashed #000 0.1rem;
  }
}
@media screen and (max-width: 768px) {
  .recipe_item_head {
    margin-top: 4.5rem;
    padding: 0 0 4rem;
    border-bottom: dashed #000 0.1rem;
  }
}

@media screen and (min-width: 769px) {
  .recipe_item_head_icon {
    width: 7.4rem;
  }
}

.recipe_item_head_txt {
  font-weight: 700;
}
@media screen and (min-width: 769px) {
  .recipe_item_head_txt {
    line-height: 1.429em;
    font-size: 2.8rem;
  }
  .recipe_item_head_txt > p {
    line-height: inherit;
    font: inherit;
  }
  .recipe_item_head_txt > p:first-of-type {
    margin-top: -0.214em;
  }
  .recipe_item_head_txt > p:last-of-type {
    margin-bottom: -0.214em;
  }
}
@media screen and (max-width: 768px) {
  .recipe_item_head_txt {
    text-align: center;
    line-height: 1.334em;
    font-size: 3.6rem;
  }
  .recipe_item_head_txt > p {
    line-height: inherit;
    font: inherit;
  }
  .recipe_item_head_txt > p:first-of-type {
    margin-top: -0.166em;
  }
  .recipe_item_head_txt > p:last-of-type {
    margin-bottom: -0.166em;
  }
}

.recipe_make {
  font-weight: 700;
}
@media screen and (min-width: 769px) {
  .recipe_make {
    margin-top: 4rem;
    line-height: 2.85em;
    font-size: 2rem;
  }
  .recipe_make > p {
    line-height: inherit;
    font: inherit;
  }
  .recipe_make > p:first-of-type {
    margin-top: -0.925em;
  }
  .recipe_make > p:last-of-type {
    margin-bottom: -0.925em;
  }
}
@media screen and (max-width: 768px) {
  .recipe_make {
    margin-top: 6rem;
    line-height: 1;
    font-size: 3rem;
  }
  .recipe_make > p {
    line-height: inherit;
    font: inherit;
  }
  .recipe_make > p:first-of-type {
    margin-top: 0em;
  }
  .recipe_make > p:last-of-type {
    margin-bottom: 0em;
  }
}

.recipe_make_list {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
}
@media screen and (min-width: 769px) {
  .recipe_make_list {
    margin-top: 3rem;
  }
}
@media screen and (max-width: 768px) {
  .recipe_make_list {
    margin-top: 3.5rem;
  }
}
.recipe_make_list > li {
  position: relative;
}
@media screen and (min-width: 769px) {
  .recipe_make_list > li {
    padding-left: 2.5rem;
    line-height: 2em;
    font-size: 1.6rem;
    letter-spacing: 0.07em;
  }
}
@media screen and (max-width: 768px) {
  .recipe_make_list > li {
    padding-left: 4.5rem;
    line-height: 1.847em;
    font-size: 2.6rem;
    letter-spacing: 0.1em;
  }
}

.list_style {
  position: absolute;
  top: 0;
  left: 0;
  color: #3ca09e;
}

.recipe_mark {
  position: relative;
  display: inline-block;
  border-radius: 100vmax;
  background-color: #3ca09e;
  color: #f2f2f0;
  vertical-align: middle;
  margin-top: -0.5rem;
}
@media screen and (min-width: 769px) {
  .recipe_mark {
    width: 1.6rem;
    height: 1.6rem;
  }
}
@media screen and (max-width: 768px) {
  .recipe_mark {
    width: 2.6rem;
    height: 2.6rem;
  }
}
.recipe_mark > span {
  position: absolute;
  top: 50%;
  left: 50%;
}
@media screen and (min-width: 769px) {
  .recipe_mark > span {
    font-size: 1.2rem;
    translate: -46% -51.5%;
  }
}
@media screen and (max-width: 768px) {
  .recipe_mark > span {
    font-size: 2rem;
    translate: -0.6rem -2.6rem;
  }
}

.modal_outer {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 9500;
}
.modal_outer:not(.is-active) {
  display: none;
}
.modal_bg {
  position: absolute;
  background: rgba(0, 0, 0, 0.8);
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.modal_inner {
  display: flex;
  flex-direction: column;
  position: relative;
  aspect-ratio: 338/600;
}
@media screen and (min-width: 769px) {
  .modal_inner {
    width: 40rem;
  }
}
@media screen and (max-width: 768px) {
  .modal_inner {
    width: 57rem;
  }
}
@media screen and (orientation: landscape) and (max-height: 840px) {
  .modal_inner {
    width: auto;
    max-height: 80%;
  }
}
.modal_close {
  display: block;
  position: relative;
  cursor: pointer;
  font-weight: 700;
  color: #fff;
}
@media screen and (min-width: 769px) {
  .modal_close {
    width: 10rem;
    height: 2.5rem;
    margin: 0 0 1.8rem auto;
    font-size: 2rem;
  }
}
@media screen and (max-width: 768px) {
  .modal_close {
    width: 16rem;
    height: 4rem;
    margin: 0 0 4rem auto;
    font-size: 3.4rem;
  }
}
.modal_close::before, .modal_close::after {
  content: "";
  position: absolute;
  border-bottom: 1px solid #fff;
  height: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
@media screen and (min-width: 769px) {
  .modal_close::before, .modal_close::after {
    width: 4rem;
  }
}
@media screen and (max-width: 768px) {
  .modal_close::before, .modal_close::after {
    width: 6rem;
  }
}
.modal_close::before {
  transform: rotateZ(45deg);
}
.modal_close::after {
  transform: rotateZ(-45deg);
}
.modal_close:hover {
  opacity: 0.5;
}

#ModalVideo {
  width: 100%;
  height: 100%;
}