@charset "UTF-8";

/* --------------------------------------------------
 Milk cocoa
-------------------------------------------------- */

/* CSSリセット */
button {
  all: unset;
  cursor: pointer;
}

body,li,p,div,h2 {
  font-family: 'Zen Kaku Gothic New', sans-serif !important;
}

html {
  scroll-behavior: smooth;
}

main {
  /* overflow: hidden; */
}

img {
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;
}

/* header */
.header {
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: box-shadow 0.3s ease;
}

.header.scrolled {
  box-shadow:  0px 8px 11px rgba(0, 0, 0, 0.35);
}

.header_contents {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: calc(18 * 100vw / 1440) calc(40 * 100vw / 1440);
  background-color: #270000;
  position: relative;
}

.logo {
  width: calc(254 * 100vw / 1440);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

#menuIcon {
  width: calc(60 * 100vw / 1440);
}

.header.no-shadow {
  box-shadow: none;
}

/* menu modal */
.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  min-width: calc(750 * 100vw / 1440);
  height: 100vh;
  min-height: inherit;
  background-color: #270000;
  z-index: 999;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.menu-overlay.active {
  display: flex;
  opacity: 1;
  visibility: visible;
}

.menu-content {
  background-color: transparent;
  width: 100%;
  max-width: calc(600 * 100vw / 1440);
  margin: 0 auto;
  padding: calc(20 * 100vw / 1440);
}

.menu-content img {
  width: calc(31 * 100vw / 1440);
}

.menu-content ul li:nth-child(1) {
  border-top: 1px solid #fff;
}

.menu-item {
  border-bottom: 1px solid #fff;
  padding: calc(20 * 100vw / 1440);
  font-size: calc(24 * 100vw / 1440);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #FFD700;
  width: 100%;
  transition: background-color 0.3s ease;
  cursor: pointer;
}

.menu-item img {
  transform: rotate(-90deg);
}

.menu-item:hover {
  background-color: #3c1f1f;
}

.menu-item a {
  color: #FFD700;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* main */
.kv {
  height: calc(810 * 100vw / 1440);
}

.kv video {
  width: 100%;
  height: calc(810 * 100vw / 1440) !important;
}

.pickup-area-circle {
  position: absolute;
  top: calc(635 * 100vw / 1440);
  right: calc(80 * 100vw / 1440);
  z-index: 10;
  border-radius: 50%;
  box-shadow: 0px calc(8 * 100vw / 1440) calc(11 * 100vw / 1440) rgba(0, 0, 0, 0.35);
  width: calc(240 * 100vw / 1440);
}

.pickup-area-circle a {
  height: 100%;
  display: inline-block;
  border-radius: 50%
}

.pickup-area-circle img {
  width: calc(240 * 100vw / 1440);
}


.message {
  background-color: #fff;
}

.message_contents {
  padding-top: calc(100 * 100vw / 1440);
  padding-bottom: calc(114 * 100vw / 1440);
  background-color: #f6e8d0;
}

.message_contents_inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(85 * 100vw / 1440);
  background-image: url("../../milk/img/message_area_bg.png");
  background-repeat: no-repeat;
  background-size: 75% 100%;
  background-position: center;
  padding: calc(100 * 100vw / 1440) 0;
}
.message_contents_text ul li:nth-child(1),
.message_contents_text ul li:nth-child(2) {
    margin-bottom: calc(33 * 100vw / 1440);
}

.message_contents_text ul li:nth-child(1),
.message_contents_text ul li:nth-child(2),
.message_contents_text ul li:nth-child(3)  {
  font-size: calc(30.49 * 100vw / 1440);
  font-weight: bold;
  position: relative;
  color: #270000;
  z-index: 1;
  line-height: 1;
}

.message_contents_text ul li:nth-child(4) {
  margin-top: calc(60 * 100vw / 1440);
}

.message_contents_text ul li:nth-child(4),
.message_contents_text ul li:nth-child(5) {
  margin-bottom: calc(22 * 100vw / 1440);
}

.message_contents_text ul li:nth-child(4),
.message_contents_text ul li:nth-child(5),
.message_contents_text ul li:nth-child(6)  {
  font-size: calc(20 * 100vw / 1440);
  padding-bottom: calc(5 * 100vw / 1440);
  font-weight: bold;
  color: #270000;
  line-height: 1;
}

.message_contents_img {
  width: calc(300 * 100vw / 1440);
}

.product-info{
  background-image: url("../../milk/img/product-info_bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%; 
  background-position: center;
  padding-bottom: calc(92 * 100vw / 1440);
}

.how-to {
  margin-top: auto !important;
  background-image: url("../../milk/img/product-info_bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%; 
  background-position: center;
}

.product-info_contents {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: calc(92 * 100vw / 1440);
  position: relative;
}

.product-info_ttl {
  top: calc(47 * 100vw / 1440);
}

.product-info_ttl2 {
  top: calc(125 * 100vw / 1440);
}

.product-info_ttl {
  position: absolute;
}

.product-info_ttl,
.product-info_ttl2 {
  text-align: center;
  width: 100%;
}


.product-info_title {
  width: calc(240 * 100vw / 1440);
}

.product-info_img {
  width: calc(159 * 100vw / 1440);
  left: calc(303 * 100vw / 1440);
  top: calc(9 * 100vw / 1440);
  position: relative;
}

.product-info_ttl p,
.product-info_ttl2 p {
  color: #ffe100;
  font-weight: bold;
  font-size: calc(54 * 100vw / 1440);
  line-height: 1;
  margin-bottom: calc(25 * 100vw / 1440);
}

.product-info_items {
  margin-top: calc(60 * 100vw / 1440);
}

.product-info_items ul {
  display: flex;
  justify-content: center;
  gap: calc(31 * 100vw / 1440);
}

.product-img01 {
  width: calc(169 * 100vw / 1440);
}

.product-img02 {
  width: calc(95 * 100vw / 1440);
}

.product-img03 {
  width: calc(108 * 100vw / 1440);
}

.product-info_items ul li {
  background-color: #f6e8d0;
  background-image: url("../../milk/img/product-info_area_bg.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 96% 97%;
  text-align: center;
  width: calc(345 * 100vw / 1440);
  padding: calc(70 * 100vw / 1440) 0 calc(67 * 100vw / 1440);
}

.product-info_items ul li p {
  color: #270000;
  font-size: calc(16 * 100vw / 1440);
  text-align: left;
  padding: calc(35 * 100vw / 1440) calc(47 * 100vw / 1440) 0;
}

.product-info_items ul li a {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #502e2a;
  margin: calc(26 * 100vw / 1440) auto 0;
  width: 74%;
  border-radius: 80px;
  color: #fff;
}

.product-info_items ul li a img {
  position: relative;
  left: calc(27 * 100vw / 1440);
  width: calc(31 * 100vw / 1440);
  transform: rotate(-90deg);
}

.size-16px {
  font-size: calc(16 * 100vw / 1440) !important;
}

.mb-10px {
  margin-bottom: calc(5 * 100vw / 1440);
  display: block;
  font-weight: bold;
}

.product-info_items ul li a p {
  color: #fff;
  font-size: calc(12 * 100vw / 1440);
  text-align: left;
  padding: calc(11 * 100vw / 1440) 0;
  line-height: 1.4;
}

.product-info_items ul li span {
  font-size: calc(18 * 100vw / 1440);
}

.produt-info_text {
  margin-top: calc(55 * 100vw / 1440);
  color: #fff;
  font-size: calc(20 * 100vw / 1440);
  text-align: left;
  margin-left: calc(87 * 100vw / 1440);
}

.product-info_anchor {
  margin-top: calc(35 * 100vw / 1440);
  width: 100%;
}

.product-info_anchor ul {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(24 * 100vw / 1440);
  width: 100%;
}

.product-info_anchor ul li {
  width: calc(560 * 100vw / 1440);
  padding: calc(20 * 100vw / 1440) 0 calc(18 * 100vw / 1440);
}

.product-info_anchor ul li a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(19 * 100vw / 1440);
  color: #fff;
  width: 100%;
}

.product-info_anchor picture {
  display: flex;
}

.product-info_anchor ul li img {
  width: calc(31 * 100vw / 1440);
}

.pickup-area_list-text .pickup-area_arrow{
  transform: rotate(-90deg);
}

.product-info_anchor ul li:nth-child(2) {
  background-color: rgba(143, 116, 104, 0.6);
}

.product-info_anchor ul li:nth-child(1) {
  background-color:rgba(143, 116, 104, 0.4);
}

.product-info_how-to {
  text-align: center;
  position: relative;
  top: calc(-20 * 100vw / 1440);
}

.how-to_title {
  display: flex;
  justify-content: center;
  align-items: center;
}
.how-to_title-img {
  width: calc(240 * 100vw / 1440);
}

.how-to_icon,
.how-to_icon02,
.how-to_icon03 {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  line-height: 1.4;
  width: calc(170 * 100vw / 1440);
  height: calc(170 * 100vw / 1440);
  text-align: center;
  color: #fff;
  position: relative;
  top: calc(87 * 100vw / 1440);
  left: calc(-50 * 100vw / 1440);
  z-index: 2;
  background-size: 100% 100%;
}

.how-to_icon p,
.how-to_icon02 p,
.how-to_icon03 p {
  font-size: calc(16 * 100vw / 1440);
  font-weight: bold;
  position: relative;
  transform: translateY(100%);
}

.how-to_icon {
  background-image: url("../../milk/img/how-to_icon01.png");
}

.how-to_icon02 {
  background-image: url("../../milk/img/how-to_icon02.png");
}

.how-to_icon03 {
  background-image: url("../../milk/img/how-to_icon03.png");
}

.font-size-large {
  font-size: calc(25 * 100vw / 1440);
}

.font-14px {
  font-size: calc(14 * 100vw / 1440) !important;
}

.font-18px {
  font-size: calc(18 * 100vw / 1440) !important;
}

.font-20px {
  font-size: calc(20 * 100vw / 1440) !important;
}

.font-30px {
  font-size: calc(30 * 100vw / 1440);
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600;
  letter-spacing: 3px;
}

.mb-10 {
  margin-bottom: calc(10 * 100vw / 1440);
}

.mb-18 {
  margin-bottom: calc(24 * 100vw / 1440);
}

.montserrat {
  font-family: 'Montserrat', sans-serif !important;
  font-size: calc(41 * 100vw / 1440) !important;
  font-weight: 600 !important;
  color: #c74624;
  line-height: 1;
}

.how-to-flexItem {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: left;
  gap: calc(10 * 100vw / 1440);
}

.how-to-flexItem div p:nth-child(1) {
  margin-bottom: calc(30 * 100vw / 1440);
}

.how-to-flexItem div p:nth-child(2) {
  margin-bottom: calc(67 * 100vw / 1440);
}

.how-to-flexItem div p {
  line-height: 1.2 !important;
}

.how-to_img01 {
  width: calc(104 * 100vw / 1440);
  position: relative;
  top: calc(-25 * 100vw / 1440);
}

.how-to_img02 {
  width: calc(210 * 100vw / 1440);
  margin-top: calc(45 * 100vw / 1440);
  position: relative;
  left: calc(16 * 100vw / 1440);
}

.how-to_img03 {
  width: calc(300 * 100vw / 1440);
  margin-top: calc(70 * 100vw / 1440);
}

.pseudo,
.pseudo2 {
  color: #c74624;
  font-size: calc(20.29 * 100vw / 1440) !important;
  width: calc(61.2 * 100vw / 1440);
  font-weight: bold;
  position: absolute;
  right: calc(147 * 100vw / 1440);
}

.pseudo {
  top: calc(185 * 100vw / 1440);
}

.pseudo2 {
  top: calc(198 * 100vw / 1440);
}

.how-to_img04 {
  width: calc(103 * 100vw / 1440);
  position: relative;
  left: calc(13 * 100vw / 1440);
  top: calc(2 * 100vw / 1440);
  padding-bottom: calc(27 * 100vw / 1440);
}

.how-to_img05 {
  width: calc(213 * 100vw / 1440);
  margin-top: calc(21 * 100vw / 1440);
  position: relative;
  left: calc(16 * 100vw / 1440);
}

.how-to_img06 {
  width: calc(101 * 100vw / 1440);
  position: relative;
  left: calc(20 * 100vw / 1440);
  padding-bottom: calc(36 * 100vw / 1440);
}

.how-to_img07 {
  width: calc(213 * 100vw / 1440);
  margin-top: calc(42 * 100vw / 1440);
  position: relative;
  left: calc(24 * 100vw / 1440);
}

.how-to_img08 {
  width: calc(290 * 100vw / 1440);
  margin-top: calc(44 * 100vw / 1440);
}

.note {
  color: #fff;
  position: absolute;
  bottom: calc(-25 * 100vw / 1440);
  left: calc(45 * 100vw / 1440);
  font-size: calc(12 * 100vw / 1440) !important;
  font-weight: 100 !important;
  width: 100%;
}

.mySwiper2 .swiper-wrapper .how-to-flexItem div p:nth-child(2),
.mySwiper3 .swiper-wrapper .how-to-flexItem div p:nth-child(2) {
  padding-top: calc(20 * 100vw / 1440);
}

.mySwiper .swiper-wrapper div:nth-child(2) p:nth-child(2),
.mySwiper2 .swiper-wrapper div:nth-child(2) p:nth-child(2),
.mySwiper3 .swiper-wrapper div:nth-child(2) p:nth-child(2),
.mySwiper3 .swiper-wrapper div:nth-child(3) p:nth-child(2){
  line-height: 1.75;
}

.mySwiper .how-to-flexItem {
  position: relative;
  left: calc(10 * 100vw / 1440);
}

.sp-only {
  display: none;
}

.mt {
  margin-top: calc(0 * 100vw / 1440) !important;
}

.movie-area {
  position: relative;
}
.movie-area .product-info_img {
  position: absolute;
  top: calc(87 * 100vw / 1440);
  width: calc(150 * 100vw / 1440);
  left: calc(-46 * 100vw / 1440);
}

.movie-area_title {
  text-align: center;
  margin-top: calc(100 * 100vw / 1440);
  position: relative;
  left: calc(42 * 100vw / 1440);
}

.movie-area_title li:nth-child(1) {
  color: #ffe100;
  font-size: calc(38.42 * 100vw / 1440);
  font-weight: bold;
}

.movie-area_title li:nth-child(2) {
  color: #fff;
  font-size: calc(20 * 100vw / 1440);
  text-align: left;
  position: relative;
  left: calc(95 * 100vw / 1440);
}

.movie-area h2 {
  color: #fff;
  font-size: calc(27.44 * 100vw / 1440);
  text-align: center;
  font-weight: 500;
  margin-top: calc(70 * 100vw / 1440);
}

.movies {
  text-align: center;
}

.movie_title {
  color: #fff;
  font-size: calc(20 * 100vw / 1440);
  width: calc(240 * 100vw / 1440);
  margin: calc(50 * 100vw / 1440) auto calc(29 * 100vw / 1440);
  padding: calc(8 * 100vw / 1440) 0;
  font-weight: 500;
}

.movie img {
  width: calc(640 * 100vw / 1440);
}

.video-thumbnail {
  position: relative;
  display: inline-block;
}

.video-thumbnail iframe {
  width: calc(640 * 100vw / 1440);
  height: calc(360 * 100vw / 1440);
}

.orange {
  border-top: 2px solid #c74624;
  border-bottom: 2px solid #c74624;
}

.blue {
  border-top: 2px solid #509fb9;
  border-bottom: 2px solid #509fb9;
}

/* accordion */
.accordion {
  margin: calc(70 * 100vw / 1440) 0 0;
  overflow: hidden;
  color: #fff;
  width: calc(642 * 100vw / 1440);
  position: relative;
  left: calc(29 * 100vw / 1440);
}

.accordion-open {
  background-color: rgba(143, 116, 104, 0.6);
  padding: calc(12 * 100vw / 1440) calc(16 * 100vw / 1440);
  cursor: pointer;
  text-align: center;
  font-size: calc(18 * 100vw / 1440);
}

.accordion-open::after {
  content: "";
  position: absolute;
  right: calc(30 * 100vw / 1440);
  top: calc(34 * 100vw / 1440);
  width: calc(16 * 100vw / 1440);
  height: calc(16 * 100vw / 1440);
  border-right: calc(2 * 100vw / 1440) solid #fff;
  border-bottom: calc(2 * 100vw / 1440) solid #fff;
  transform: translateY(-50%) rotate(-135deg);
  transition: transform 0.3s ease;
}

.accordion.active .accordion-open::after {
  transform: translateY(-50%) rotate(45deg);
  top: calc(25.1 * 100vw / 1440);
}

.accordion-open:hover {
  background-color: rgba(143, 116, 104, 0.5);
}

.accordion-contents {
  display: none;
  padding: calc(25 * 100vw / 1440) calc(41 * 100vw / 1440);
  background-color:rgba(143, 116, 104, 0.4);
  text-align: left;
  font-size: calc(16 * 100vw / 1440);
}

.accordion.active .accordion-contents {
  display: block;
}
/* accordion end */

.pickup-area {
  margin: 0 auto;
  padding: calc(100 * 100vw / 1440) 0;
  width: 100%;
  text-align: center;
  position: relative;
}

.pickup-area_title-img {
  width: calc(240 * 100vw / 1440);
}

.pickup-area_title p {
  color: #ffe100;
  font-weight: bold;
  font-size: calc(54 * 100vw / 1440);
}

.pickup-area_title {
  width: 100%;
  top: calc(150 * 100vw / 1440);
  line-height: 1.7;
}

.pickup-area_list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(60 * 100vw / 1440);
  margin-top: calc(67 * 100vw / 1440);
}

.pickup-area_list a {
  display: block;
  height: 100%;
}

.pickup-area_list a img:hover {
  opacity: 0.6;
}

.pickup-area_list li {
  width: 23%;
  max-width: calc(355 * 100vw / 1440);
}

.pickup-area_list img {
  width: calc(31 * 100vw / 1440);
}

.pickup-img {
  width: calc(340 * 100vw / 1440) !important;
  transition: opacity 0.3s ease
}

.pickup-img:hover {
  opacity: 0.7;
}

.pickup-area_list-text {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: calc(18 * 100vw / 1440);
  text-align: left;
  margin-top: calc(20 * 100vw / 1440);
  margin-right: calc(-5 * 100vw / 1440);
  gap: calc(30 * 100vw / 1440);
}

.pickup-area_list-text a {
  color: #fff;
}

/* fade-in */
.fade-in {
  opacity: 0;
  transform: translateY(50px);  
  transition: opacity 1s ease, transform 1s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* slide */
.swiper {
  max-width: calc(1120 * 100vw / 1440);
  width: 100%;      
  overflow: visible !important;         
}

.swiper-pagination,
.swiper-button-prev,
.swiper-button-next {
  display: none;
}

.swiper-slide {
  background-image: url("../../milk/img/how-to_bg.png") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  padding-top: calc(31 * 100vw / 1440);
  color: #270000;
}

.swiper-slide p {
  font-weight: bold ;
  font-size: calc(16 * 100vw / 1440);
  line-height: 1;
}


/* parallax */
.parallax {
  height: calc(500 * 100vw / 1440);
  overflow: hidden;
  z-index: 0;
}

.parallax-bg {
  position: fixed; 
  top: calc(0 * 100vw / 1440);
  left: 0;
  width: 100vw;
  height: 100vh;
  /* background-image: url('../../milk/img/parallax.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat; */
  z-index: -1;
  will-change: transform;
}

.parallax-bg video {
  height: 100% !important;
}

/* footer */
.footer {
  background: #f6e8d0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(89 * 100vw / 1440);
  text-align: center;
}

.footer img {
  width: 100%;
}

.link_index img {
  width: calc(456 * 100vw / 1440)
}

.globalFooter__inner {
  width: calc(950 * 100vw / 1440);
}


/* SP */

@media screen and (max-width: 420px) {
  .swiper-pagination {
    bottom: calc(-100 * 100vw / 750) !important;
  }
}

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

  header, .main {
    min-width: calc(750 * 100vw / 750);
  }

  .header_contents {
    padding: calc(32 * 100vw / 750) calc(20 * 100vw / 750);
  }

  .kv {
    height: calc(418 * 100vw / 750);
  }
  .kv video {
    height: auto;
  }

  .logo {
    width: calc(309 * 100vw / 750);
  }

  #menuIcon {
    width: calc(60 * 100vw / 750);
  }

  .menu-overlay {
    min-width: calc(750 * 100vw / 750);
  }

  .menu-content {
    width: calc(640 * 100vw / 750);
    max-width: calc(600 * 100vw / 750);
    padding: calc(20 * 100vw / 750);
  }

  .menu-item {
    padding: calc(20 * 100vw / 750);
    font-size: calc(32 * 100vw / 750);
    width: calc(560 * 100vw / 750);
  }

  .menu-item img {
    width: calc(31 * 100vw / 750);
  }

  .pickup-area-circle {
    top: calc(430 * 100vw / 750);
    right: calc(50 * 100vw / 750);
    width: calc(240 * 100vw / 750);
    box-shadow: 0px calc(9 * 100vw / 750) calc(14 * 100vw / 750) rgba(0, 0, 0, 0.35);
  }

  .pickup-area-circle img {
    width: calc(240 * 100vw / 750);
  }

  .message_contents {
    flex-direction: column;
    gap: calc(53 * 100vw / 750);
    padding-top: calc(64 * 100vw / 750);
    padding-bottom: calc(64 * 100vw / 750);
    margin-top: calc(3 * 100vw / 750);
  }

  .message_contents_inner {
    display: block;
    text-align: center;
    background-image: url("../../milk/img/message_area_bg_sp.png");
    padding: calc(103 * 100vw / 750) calc(118 * 100vw / 750) calc(93 * 100vw / 750);
    background-size: 88% 100%;
  }

  .message_contents_img {
    width: calc(387 * 100vw / 750);
  }

  .message_contents_text ul li:nth-child(1),
  .message_contents_text ul li:nth-child(2),
  .message_contents_text ul li:nth-child(3)  {
    font-size: calc(33.32 * 100vw / 750);
  }

  .message_contents_text ul li:nth-child(4),
  .message_contents_text ul li:nth-child(5),
  .message_contents_text ul li:nth-child(6)  {
    font-size: calc(24 * 100vw / 750);
  }

  .message_contents_text ul {
    text-align: left;
  }

  .message_contents_text ul li:nth-child(1),
  .message_contents_text ul li:nth-child(2) {
    margin-bottom: calc(30 * 100vw / 750);
  }

  .message_contents_text ul li:nth-child(4) {
    margin-top: calc(60 * 100vw / 750);
  }

  .message_contents_text ul li:nth-child(6) {
    margin-bottom: calc(80 * 100vw / 750);
  }

  .message_contents_text ul li:nth-child(4), 
  .message_contents_text ul li:nth-child(5) {
    margin-bottom: calc(22 * 100vw / 750);
  }

  .product-info {
    padding-bottom: calc(99 * 100vw / 750);
  }

  .product-info_ttl {
    top: calc(0 * 100vw / 750);
    width: auto;
    position: relative;
  }

  .product-info_ttl2 {
    top: calc(165 * 100vw / 750);
  }

  .product-info_ttl2 img {
    width: calc(382.2 * 100vw / 750);
  }

  .product-info_ttl img {
    width: calc(382.2 * 100vw / 750);
  }

  .product-info_img {
    width: calc(150 * 100vw / 750);
    left: calc(0 * 100vw / 750);
    top: calc(0 * 100vw / 750);
  }

  .product-info_title {
    width: calc(495 * 100vw / 750);
  }

  .product-info_ttl p,
  .product-info_ttl2 p {
    font-size: calc(56 * 100vw / 750);
    margin-bottom: calc(25 * 100vw / 750);
  }

  .product-info_items ul {
    flex-direction: column;
    gap: 6.667vw;
  }

  .product-info_items ul li {
    width: 100%;
    max-width: 66.667vw;
    padding: calc(109 * 100vw / 750) calc(60 * 100vw / 750) calc(84 * 100vw / 750);
  }

  .product-info_items ul li span {
    font-size: calc(30 * 100vw / 750);
    font-weight: 900;
  }

  .product-info_items ul li p {
    font-size: calc(28 * 100vw / 750);
    padding: 5vw calc(27 * 100vw / 750) 0;
    font-weight: 500;
  }

  .product-img01 {
    width: calc(342 * 100vw / 750);
  }

  .product-img02 {
    width: calc(194 * 100vw / 750);
  }

  .product-img03 {
    width: calc(218 * 100vw / 750);
  }

  .product-info_items {
    margin-top: calc(60 * 100vw / 750);
  }

  .size-16px {
    font-size: calc(28 * 100vw / 750) !important;
    font-weight: 500 !important;
  }

  .product-info_items ul li a p {
    font-size: calc(20 * 100vw / 750);
    padding: 3vw 0 ;
  }

  .product-info_items ul li a {
    margin: 7vw auto 0;
    width: calc(485.25 * 100vw / 750);
    gap: 9vw;
  }

  .product-info_items ul li a img {
    transform: rotate(0deg);
  }

  .product-info_items ul li {
    background-image: url("../../milk/img/product-info_area_bg_sp.png");
  }

  .produt-info_text {
    font-size: calc(28 * 100vw / 750);
    padding: 0 calc(75 * 100vw / 750);
    margin: calc(50 * 100vw / 750) 0 calc(60 * 100vw / 750) 0;
  }

  .product-info_anchor ul {
    flex-direction: column;
    gap: calc(10 * 100vw / 750);
  }

  .product-info_contents {
    padding-top: calc(109 * 100vw / 750);
  }

  .product-info_anchor ul li {
    padding: 4.533vw 5.333vw;
    width: calc(535 * 100vw / 750);
  }

  .product-info_anchor ul {
    font-size: calc(32 * 100vw / 750);
  }

  .product-info_anchor ul li a {
    gap: 5.2vw;
    line-height: 0;
  }

  .product-info_anchor ul li img {
    width: calc(47 * 100vw / 750);
  }

  .pickup-area_list-text .pickup-area_arrow {
    transform: rotate(0deg);
  }

  .product-info_items ul li a img {
    width: calc(48 * 100vw / 750);
    left: calc(35 * 100vw / 750);
  }

  .how-to {
    padding-bottom: 0px;
  }

  .how-to_title {
    gap: calc(40 * 100vw / 750);
  }

  .how-to_title-img {
    width: calc(495 * 100vw / 750);
  }

  .how-to_icon, .how-to_icon02, .how-to_icon03 {
    left: calc(34 * 100vw / 750);
    width: calc(240 * 100vw / 750);
    height: calc(240 * 100vw / 750);
    top: calc(106 * 100vw / 750);
  }

  .font-size-large {
    font-size: calc(34 * 100vw / 750);
  }
  .how-to_icon p, .how-to_icon02 p, .how-to_icon03 p {
    font-size: calc(24 * 100vw / 750);
  }

  .swiper-slide .montserrat {
    font-size: calc(65.7 * 100vw / 750) !important;
  }

  .product-info_how-to {
    top: 0;
  }

  .t2 {
    position: relative;
    top: calc(128 * 100vw / 750);
  }

  .t3 {
    position: relative;
    top: calc(257 * 100vw / 750);
  }

  .number-img {
    width: calc(85 * 100vw / 750);
  }

  .movie-area {
    margin-top: calc(500 * 100vw / 750);
  }

  .video-thumbnail iframe {
    width: calc(607 * 100vw / 750);
    height: calc(341 * 100vw / 750);
  }

  .movie-area_title li:nth-child(1) {
    font-size: calc(59 * 100vw / 750);
    line-height: 1.4;
    text-align: left;
    left: calc(213 * 100vw / 750);
    width: calc(420 * 100vw / 750);
    position: relative;
  }

  .movie-area_title li:nth-child(2) {
    font-size: calc(30 * 100vw / 750);
    line-height: 1.4;
    left: 0;
    width: calc(600 * 100vw / 750);
    margin: calc(45 * 100vw / 750) auto 0;
  }

  .movie-area_title {
    left: 0;
  }

  .movie-area .product-info_img {
    width: calc(183 * 100vw / 750);
    left: calc(0 * 100vw / 750);
    top: calc(20 * 100vw / 750);
  }

  /* accordion */
  .accordion {
    left: 0;
    width: calc(585 * 100vw / 750);
    margin: calc(63 * 100vw / 750) auto 0;
  }

  .accordion-open {
    font-size: calc(28 * 100vw / 750);
    padding: calc(12 * 100vw / 750) calc(16 * 100vw / 750);
  }

  .accordion-open p {
    font-weight: bold;
  }

  .accordion-contents {
    font-size: calc(24 * 100vw / 750);
    padding: calc(34 * 100vw / 750);
  }

  .accordion-contents p {
    font-weight: 400;
  }

  .accordion.active .accordion-open::after {
    top: calc(35 * 100vw / 750);
  }

  .accordion-open::after {
    top: calc(41 * 100vw / 750);
    width: calc(13 * 100vw / 750);
    height: calc(13 * 100vw / 750);
    right: calc(26 * 100vw / 750);
  }

  /* accordion end */

  .movie-area h2 {
    font-size: calc(40 * 100vw / 750);
    line-height: 1.5;
    margin-top: calc(83 * 100vw / 750);
  }

  .sp-only {
    display: block;
  }

  .movie_title {
    font-size: calc(32 * 100vw / 750);
    padding: 1vw 0;
    margin: 6.933vw auto 4.133vw;
    width: 65.333vw;
  }

  .orange {
    border-top: 4px solid #c74624;
    border-bottom: 4px solid #c74624;
  }

  .blue {
    border-top: 4px solid #509fb9;
    border-bottom: 4px solid #509fb9;
  }

  .movies li:nth-child(2) {
    margin-top: 10.667vw !important;
  }

  .pickup-area {
    width: 100%;
    margin: calc(150 * 100vw / 750) 0 calc(70 * 100vw / 750);
    padding: 0;
  }

  .pickup-area_title {
    top: 27.333vw;
    line-height: 1;
  }

  .pickup-area_title p {
    margin: calc(0 * 100vw / 750) 0 calc(25 * 100vw / 750);
    font-size: calc(56 * 100vw / 750);
  }

  .pickup-area_title-img {
    width: calc(380 * 100vw / 750);
  }

  .pickup-area_list {
    flex-direction: column;
    width: 100%;
    margin-top: calc(70 * 100vw / 750);
    gap: calc(58 * 100vw / 750);
  }

  .pickup-area_list img {
    width: calc(54.55 * 100vw / 750);
  }

  .pickup-area_list li {
    width: auto;
    max-width: 80vw;
  }

  .pickup-area_list-text {
    font-size: calc(28 * 100vw / 750);
    gap: calc(65.11 * 100vw / 750);
    margin: calc(21.76 * 100vw / 750) calc(30 * 100vw / 750) 0 calc(26.26 * 100vw / 750);
  }

  .pickup-area_arrow {
    margin-bottom: 7.333vw;
  }

  .movie img {
    width: calc(640 * 100vw / 750);
  }

  .pickup-img {
    width: calc(570 * 100vw / 750) !important;
  }

  .footer {
    height: auto;
    padding: 5.2vw 0;
  }

  .footer img {
    width: calc(456 * 100vw / 750);
  }

  .link_index {
    width: 100%;
  }

  /* slider */

  .swiper-slide .how-to_img01 {
    width: calc(188.5 * 100vw / 750);
    position: relative;
    left: calc(17 * 100vw / 750);
    top: calc(-30 * 100vw / 750);
  }

  .how-to_img02 {
    width: calc(363 * 100vw / 750);
    top: calc( 3 * 100vw / 750);
  }

  .how-to_img03 {
    width: calc(449 * 100vw / 750);
    margin-top: calc(105 * 100vw / 750);
  }

  .how-to_img04 {
    width: calc(164 * 100vw / 750);
    left: calc(35 * 100vw / 750);
    top: calc( -25 * 100vw / 750);
  }

  .how-to_img05 {
    width: calc(328 * 100vw / 750);
    left: calc(25 * 100vw / 750);
  }

  .how-to_img06 {
    width: calc(156 * 100vw / 750);
    left: calc(35 * 100vw / 750);
    top: calc( -10 * 100vw / 750);
    padding-bottom: calc( 56 * 100vw / 750);
  }

  .t3 .pagination3 {
    bottom: calc(-127 * 100vw / 750) !important;
  }

  .how-to_img07 {
    width: calc(334 * 100vw / 750);
    top: calc( 3 * 100vw / 750);
  }

  .how-to_img08 {
    width: calc(469 * 100vw / 750);
    position: relative;
    top: calc( 3 * 100vw / 750);
  }

  .swiper {
    width: 82vw !important;               
    overflow: hidden !important;
    margin: 0 auto !important;  
    max-width: calc(1135 * 100vw / 750) !important;        
  }

  .swiper-slide {
    width: 100%;                
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: calc(28 * 100vw / 750);
    padding: calc(54 * 100vw / 750) 0 0;
    height: calc(510 * 100vw / 750) !important;
  }

  .swiper-slide p {
    margin-bottom: calc(25 * 100vw / 750);
    font-size: calc(28.04 * 100vw / 750);
  }

 .swiper-slide .line-height {
    line-height: 1.75 !important;
  }

  .font-14px {
    font-size: calc(26* 100vw / 750) !important;
  }

  .swiper-slide .font-18px {
    font-size: calc(31.33 * 100vw / 750) !important;
  }

  .font-20px {
    font-size: calc(38 * 100vw / 750) !important;
  }

  .font-30px {
    font-size: calc(48.74 * 100vw / 750) !important;
  }

  .swiper-slide .how-to-flexItem div p:nth-child(1) {
    margin-bottom: calc(67 * 100vw / 750) !important;
  }

  .mySwiper .how-to-flexItem div p:nth-child(2) {
    margin-bottom: calc(66 * 100vw / 750) !important;
  }

  .mySwiper2 .how-to-flexItem div p:nth-child(2) {
    margin-bottom: calc(127 * 100vw / 750) !important;
  }

  .mySwiper3 .how-to-flexItem div p:nth-child(2) {
    margin-bottom: calc(106 * 100vw / 750) !important;
  }

  .mySwiper2 .how-to-flexItem div {
    position: relative;
    top: calc(10 * 100vw / 750);
  }

  .mySwiper3 .how-to-flexItem div {
    position: relative;
    top: calc(0 * 100vw / 750);
  }

  .swiper-slide .mb-18 {
    margin-bottom: calc(53 * 100vw / 750) !important;
  }

  .pc-only {
    display: none;
  }

  .note {
    font-size: calc(18 * 100vw / 750) !important;
    position: relative;
    top: calc(10 * 100vw / 750);
    left: calc(208 * 100vw / 750);
    width: calc(418 * 100vw / 750);
  }

  .pseudo {
    top: calc(332 * 100vw / 750);
  }

  .pseudo2 {
    top: calc(325 * 100vw / 750);
  }

  .pseudo,
  .pseudo2 {
    font-size: calc(29 * 100vw / 750) !important;
    right: calc(257 * 100vw / 750);
    width: calc(88 * 100vw / 750);
  }

  .swiper-wrapper {
    position: relative !important;
    text-align: center;
    align-items: center;
  }

  .swiper-button-next img,
  .swiper-button-prev img {
    width: calc(80 * 100vw / 750);
  }

  .swiper-button-next:after, .swiper-button-prev:after {
    display: none !important;
  }

  .swiper-button-prev img {
    transform: rotate(180deg);
  }

  .swiper-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    bottom: calc(-95 * 100vw / 750) !important;
    text-align: center !important;
    transform: translateY(-50%) !important;
  }

  .swiper-pagination-bullet {
    width: calc(24 * 100vw / 750) !important;
    height: calc(24 * 100vw / 750) !important;
    background-color: #f6e8d0 !important;
    opacity: 1 !important; 
    border-radius: 50%;
    position: relative;
    border: none;
  }

  .swiper-pagination-bullet-active::before {
    content: '';
    position: absolute;
    top: calc(-8 * 100vw / 750);
    left: calc(-8 * 100vw / 750);
    width: calc(40 * 100vw / 750);
    height: calc(40 * 100vw / 750);
    border-radius: 50%;
    border: 2px solid #f6e8d0;
    box-sizing: border-box;
  }

  .swiper-button-prev,
  .swiper-button-next {
    position: absolute !important;
    top: calc(948 * 100vw / 750) !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
  }

  .swiper-button-prev {
    left: calc(15 * 100vw / 750) !important;
  }

  .swiper-button-next {
    right: calc(15 * 100vw / 750) !important;
  }

  .mt {
    top: 53px;
  }

  .parallax {
    height: calc(427 * 100vw / 750);
  }

  .parallax-bg {
    height: 100%;
  }
}