/*****************************************
*                  index                 *
*****************************************/
@media screen and (max-width:750px) {
body {
  background-color: #e2efe5;
}

.area {
  position: relative;
}

.section {
  position: relative;
}



#custom .section {
  background-position: center top;
  background-repeat: no-repeat;
  background-size: contain;
  overflow: hidden;
}

#custom .section .inner {
  height: 100%;
}

#standard .section {
  overflow: hidden;
}

#custom #cut-1 {
  height: calc(1148 / 750 * 100vw);
  background-image: url(../images/index/cut-1-bg_2025.jpg?v=03);
}

#cut-2 {
  height: calc(950 / 375 * 100vw);
  background-image: url(../images/index/cut-2-bg_202503.jpg);
}
#cut-3 {
  height: calc(1694 / 375 * 100vw);
  background-image: url(../images/index/cut-3-bg_202501.jpg);
}
#cut-4 {
  height: calc(514 / 375 * 100vw);
  background-image: url(../images/index/cut-4-bg.jpg);
}
#cut-5 {
  height: calc(514 / 375 * 100vw);
  background-image: url(../images/index/cut-5-bg.jpg);
}
#cut-6 {
  height: calc(615 / 375 * 100vw);
  background-image: url(../images/index/cut-6-bg.jpg);
}
#cut-7 {
  height: calc(979 / 375 * 100vw);
  background-image: url(../images/index/cut-7-bg.jpg);
}
#cut-1 .caption {
}
#cut-1 .title {
  top: 40px;
  left: 20px;
  width: 219px;
  height: 168px;
  background: url(../images/index/cut-1-title.png?v=190430) 0 0 no-repeat;
  background-size: contain;
}
#cut-1 .text {
  top: 222px;
  left: 22px;
  width: 180px;
  height: 63px;
  background: url(../images/index/cut-1-text.png?v=190430) 0 0 no-repeat;
  background-size: contain;
}
#cut-1 .bottle {
  top: 152px;
  left: 81px;
  width: 294px;
  height: 426px;
  background: url(../images/index/cut-1-bottle.png?v=190430) 0 0 no-repeat;
  background-size: contain;
}
  
#cut-1 .btn-share {
  top: 31px;
  right: 17px;
  width: 45px;
  height: 41px;
  background: url(../images/index/btn-share.png) 0 0 no-repeat;
  background-size: contain;
}
#cut-2 .text {
  top: 55px;
  left: 25px;
  width: 305px;
  height: 317px;
  background: url(../images/index/cut-2-text.png?v=190430) 0 0 no-repeat;
  background-size: contain;
}
#cut-3 .text {
  top: 119px;
  left: 74px;
  width: 232px;
  height: 128px;
  background: url(../images/index/cut-3-text.png) 0 0 no-repeat;
  background-size: contain;
}
#cut-3 .mark {
  top: 28px;
  right: 32px;
  width: 74px;
  height: 73px;
  background: url(../images/index/cut-3-mark.png) 0 0 no-repeat;
  background-size: contain;
}
#cut-4 .text {
  top: 80px;
  left: 60px;
  width: 279px;
  height: 165px;
  background: url(../images/index/cut-4-text.png) 0 0 no-repeat;
  background-size: contain;
}
#cut-5 .text {
  top: 114px;
  left: 48px;
  width: 279px;
  height: 90px;
  background: url(../images/index/cut-5-text.png) 0 0 no-repeat;
  background-size: contain;
}
#cut-6 .text-1 {
  top: 72px;
  left: 55px;
  width: 265px;
  height: 55px;
  background: url(../images/index/cut-6-text-1.png) 0 0 no-repeat;
  background-size: contain;
}
#cut-6 .text-2 {
  top: 448px;
  left: 47px;
  width: 280px;
  height: 125px;
  background: url(../images/index/cut-6-text-2.png) 0 0 no-repeat;
  background-size: contain;
}
#cut-6 .mark {
  top: 16px;
  right: 20px;
  width: 74px;
  height: 73px;
  background: url(../images/index/cut-6-mark.png) 0 0 no-repeat;
  background-size: contain;
}
#cut-7 .text-1 {
  top: 14px;
  left: 67px;
  width: 242px;
  height: 319px;
  background: url(../images/index/cut-7-text-1.png?v=180412) 0 0 no-repeat;
  background-size: contain;
}
#cut-7 .text-2 {
  top: 373px;
  left: 65px;
  width: 250px;
  height: 173px;
  background: url(../images/index/cut-7-text-2.png) 0 0 no-repeat;
  background-size: contain;
}

#standard .title,
#standard .content {
  position: absolute;
}
#standard .content {
  width: 100%;
}

  
#standard .content {
  padding-bottom: 23px;
  width: 100%;
}
#products{
  height: auto;
}


#products .title {
  margin: 27px auto;
  width: 292px;
  height: 103px;
  background: url(../images/index/products-title.png) 0 0 no-repeat;
  background-size: contain;
  position: relative;
}





#products .content {
  position: relative;
  padding-top: 0px;
  top: 0;
}

#products .related-content li {
  padding-top: 0px;
}


#products .related-content li a {
  color: #30932f;
  background: #ffffff;
  /*	border-color: #ffe55f;
	background: #ffe55f;*/
}




#products #related .related-content .btn-more {
  height: 50px;
  color: #fefefe;
  line-height: 50px;
  background: #86d699;
}
#products #related .related
{
  color: #fefefe;
  line-height: 50px;
  background: #86d699;
  /*	background: url(../images/index/products-more.jpg) 0 0 no-repeat;
	background-size: contain;*/
}


#tvcm {
  height: auto;
  
}
#tvcm .title {
  margin: 27px auto;
  width: 292px;
  height: 103px;
  background: url(../images/index/tvcm-title.png) 0 0 no-repeat;
  background-size: contain;
  position: relative;
}

#tvcm .content {
  top: 0;
}




#standard #social {
  height: 49.3333vw;
  background: #e2efe5;
  overflow: visible;
  background: url(../images/index/social-bg.jpg) center top no-repeat;
  background-size: 100% auto;
}
#social .content{
  top: 16vw;
}
#standard #social li a img {
  width: 100%; 
  border: none;
}


#social li a {
  display: block;
  width: 44vw;
  height: auto;
  background-repeat: no-repeat;
/*   background-size: 166px 88px; */
  position: relative;
  margin: 0px auto;
}


#wrap #products .title,#wrap #tvcm .title{
    margin:27px 0;
    left: 50%;
    width: calc(583 / 750 * 100vw);
    height: calc(205 / 750 * 100vw);
    background-size: cover;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    top: 0;
}


}

/*
 * Tablet LINE UP
 *
 * Use the same two-column, initially-collapsed presentation as mobile while
 * keeping the artwork and controls at a bounded tablet size.
 */
@media screen and (min-width: 751px) and (max-width: 1100px) {
  #products {
    height: auto;
    padding-bottom: 48px;
  }

  #products .inner {
    width: 100%;
    height: auto;
  }

  #wrap #products .title {
    position: relative;
    top: 0;
    left: 50%;
    width: clamp(292px, 45vw, 430px);
    height: clamp(103px, 15.9vw, 152px);
    margin: 32px 0;
    background-image: url(../images/index/products-title.png);
    background-size: contain;
    background-repeat: no-repeat;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
  }

  #products .content {
    position: relative;
    top: 0;
    padding-top: 0;
  }

  #products #related {
    height: auto;
    margin-bottom: 5px;
  }

  #wrap #products #related .related-content {
    width: calc(100% - 32px);
    max-width: 588px;
    height: auto;
    margin-right: auto;
    margin-left: auto;
    overflow: visible;
  }

  #products #related .swiper-wrapper {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 6px;
    row-gap: 6px;
    transform: none !important;
    -webkit-transform: none !important;
  }

  #products #related .swiper-slide,
  #products #related.low-count .swiper-slide {
    flex: none;
    width: auto !important;
    max-width: none;
    height: auto;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  #products #related .swiper-slide a {
    width: 100%;
    padding: clamp(4px, 1.07vw, 8px);
    box-sizing: border-box;
  }

  #products #related .swiper-slide .pic {
    width: 100%;
    height: auto;
  }

  #products #related .swiper-slide .pic img {
    display: block;
    width: 100%;
    height: auto;
  }

  #products #related .swiper-slide .name {
    height: clamp(32px, 4.7vw, 48px);
    font-size: clamp(13px, 1.7vw, 16px);
    line-height: clamp(16px, 2.35vw, 24px);
    padding: 0 clamp(8px, 1.05vw, 12px) 0 clamp(24px, 3.15vw, 32px);
    margin-bottom: clamp(8px, 1.05vw, 12px);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  #products #related.collapse .swiper-slide:nth-child(n + 5) {
    display: none;
  }

  #products #related .btn-more {
    display: none !important;
  }

  #products #related.collapse .btn-more {
    display: block !important;
    width: 72vw;
    max-width: 540px;
    height: clamp(54px, 7vw, 72px);
    color: #ffffff;
    font-size: clamp(16px, 2.1vw, 20px);
    font-weight: bold;
    text-align: center;
    line-height: clamp(54px, 7vw, 72px);
    margin: clamp(24px, 4vw, 40px) auto 0;
    border: 0;
    background: #86d699;
    cursor: pointer;
    position: relative;
    z-index: 3;
  }

  #products .related-arrow {
    display: none !important;
  }
}