.main *{
}

.main .arrow{
  margin: 2rem auto 2rem;
}

.contents {
  padding: 0 1.5rem;
}

.c-inner {
  max-width:none;
  margin: 0 auto;
}

/* ----------------------------------------
mv
----------------------------------------*/
.mv {
  margin: 0 0 6rem 0;
}

/* ----------------------------------------
.problem
----------------------------------------*/
.problem{
  margin: 0 0 42.6vw 0;
}

.problem-inner{
  display: flex;
  flex-direction: column;
  gap: 2rem;
  text-align: center;
}

.problem-inner figure{
  width: 11rem;
}

.problem-inner figure img{
  width: 100%;
  height: auto;
}

.problem-inner .problem-tit{
  font-size: 2.8rem;
}

.problem-inner .problem-tit span{
  font-size: 3.4rem;
}

.problem-list{
  flex-wrap:wrap;
}
.problem-list li{
  width: calc((100% + 2rem)/2);
}
.problem-list li:nth-of-type(2){
  margin: 0 0 0 -6vw;
}
.problem-list li:nth-of-type(3) {
  margin: -12vw 0 0 0;
}

.problem-list li img{
  width: 100%;
  height: auto;
}

/* ----------------------------------------
.answer
----------------------------------------*/
.answer{
  position: relative;
}

.answer-bg{
  height: 37rem;
  /*height: auto;
  aspect-ratio: 375 / 360;*/
  background-color: #0b318f;
  clip-path: polygon(50% 10%, 100% 0, 100% 100%, 0 100%, 0 0);
}

.answer-inner{
  position: absolute;
  top: -34.7vw;
  right: 0;
  left: 0;
  margin: auto;
}

.answer-inner .anti{
  padding: 0 1.5rem;
}
.answer-inner .anti img{
  width: 100%;
  height: auto;
}

.answer-inner .cleaqua-logo{
  width: 21rem;
  margin: 3rem auto 1rem;
}
.answer-inner .cleaqua-logo img{
  width: 100%;
  height: auto;
}

.answer-inner .answer-tit{
  font-size: 2.8rem;
  margin: 0 0 2rem 0;
}

.answer-inner p{
  font-size: 1.8rem;
}

.answer-inner p span{
  font-size: 1.8rem;
}



/* ----------------------------------------
.movie
----------------------------------------*/
.movie{
  margin: 0 auto 6rem;
}

.movie-title{
  height: 17rem;
  font-size: 3rem;
  padding: 7rem 0 0 0;
}

.movie-inner{
  margin: -4rem auto 0;
}

.movie-inner::before{
  content: none;
}


/* ----------------------------------------
.product
----------------------------------------*/
.product{
  margin: 0 0 8rem 0;
}

.product-tit{
  font-size: 2.8rem;
  margin: 0 0 2rem 0;
}

.product-inner{
  display: flex;
  flex-direction: column;
  gap:3rem;
  margin: 0 0 5rem 0;
}

.product-name{
  padding: 0 1.5rem;
}

.product-name figure{
  width: auto;
  max-width: 76%;
  margin: 0 auto 1rem;
}

.product-name figure img{
  width: 100%;
  height: auto;
}

.product-name span{
  font-size: 1.5rem;
  padding: 0.6rem 1rem;
}


.product-img.package1{
  max-width: 37%;
}
.product-img.package2{
  max-width: 65%;
}

.product-onlineshop{
  display: flex;
  flex-direction: column;
  gap:1.5rem;
  padding: 3rem;
}
.product-onlineshop li{
  width: 100%;
}

/* ----------------------------------------
.point
----------------------------------------*/
.point{

}
.point-tit{
  font-size: 3rem;
  margin: 0 0 3rem 0;
}

.point-inner{
  height: 17rem;
}

.point-goggles img{
  width: 100%;
  height: auto;
}

/* ----------------------------------------
.point1
----------------------------------------*/
.point1{
  margin: -4rem 0 11rem 0;
}

.point1-tit{
  min-height: auto;
  font-size: 1.9rem;
  text-align: left;
  padding: 1.5rem;
  margin: 0 0 2rem 0;
}

.point1-tit span{
  top: -7rem;
  width: 11rem;
}

.point1-list{
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 2rem 1.5rem;
}

.point1-list li{
  width: 100%;
}

.point1-list li img{
  width: 100%;
  height: auto;
}

/* ----------------------------------------
.point2
----------------------------------------*/
.point2{
  margin: 0 0 6rem 0;
}

.point2-tit{
  min-height: auto;
  font-size: 1.9rem;
  text-align: left;
  padding: 1.5rem;
  margin: 0 0 2rem 0;
}

.point2-tit span{
  top: -7rem;
  width: 11rem;
}

.point2-list{
  margin: 0 0 11rem 0;
}

.point2-list li{
  text-align: center;
}

.point2-list figure{
  width: auto;
  margin: 0 auto;
  text-align: center;
}

.point2-list figure img {
  margin: 0 0 1rem 0;
}

.point2-list figure figcaption{
  font-size: 1.8rem;
}

.point2-list .arrow{
  border-right: 25px solid transparent;
  border-left: 25px solid transparent;
  border-top: 20px solid #00a0e9;
  margin: 2rem 0 2rem 0;
}

.point2-after{
  height: auto;
  aspect-ratio: 375 / 217;
}

.point2-after figure{
  position: absolute;
  top: -11rem;  
  width: auto;
  padding: 0 1.5rem;
}

.point2-after-tit{
  min-height: auto;
  font-size: 2.1rem;
  padding: 1.5rem;
}

.point2-after figure img{
  width: 100%;
  height: auto;
  margin: 0 0 1rem 0;
}

.point2-after figure figcaption{
  font-size: 1.8rem;
}