/* common
---------------------------------------------------------- */
.antifog {
  min-width: 100%;
  width: 100%;}

.co-block{
	width: calc(100% - 30px);
  padding:60px 0;
  margin: 0 15px;
}

.antifog h2 {
  text-align: center;
  font-size:3.6rem;
  margin-bottom:40px;
  padding-bottom:15px;
  width:70%;  
  min-width:260px;
}

.antifog h2 span,
.antifog h2 span {font-size:1.8rem;}



/* main
---------------------------------------------------------- */
.main{
  margin: 0;
  padding-bottom:200px;}

.main-head {
  padding-top:0;
  margin: 0;}

.main-head img{
  width: 100%;
	height: auto;}

.main-head img.package{display: none;}


/* point
---------------------------------------------------------- */
.point{
  width:100%;
	margin:auto;
  margin-top: -130px;}

.point ul {
  width:100%;
  padding:0 20px;
  }

.point ul li{width:calc(50% - 15px);}

.point ul li img {
  width:100%;
  height:auto;}


/* movie
---------------------------------------------------------- */
.movie{
  padding-top:0;
  margin-top:0;}

.Movie-Box{
  margin: auto;
  width: 100%;
  height:0;
  padding-top:56.25%;
  position: relative;}

.Movie-Box iframe {
  position: absolute;
  width:100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
}



/* shop
---------------------------------------------------------- */
.shop {}

.shop .co-block{
  padding:40px 0 10px;
  transform: skewY(0);}

.LP .shop h2 {
  font-size:2rem;
  margin-bottom:30px;
  padding-bottom:5px;
  width:50%;
  min-width: 160px;
}

.shop ul {
  width: 100%;
  margin:auto;
  flex-wrap: wrap;
  justify-content: space-around;
}

.shop ul li {
  color:#333;
  display: flex;
  width:calc(50% - 40px);
  margin:10px 10px 35px;
  }

.shop ul li:nth-child(even) {
  width:calc(50% - 20px);
  font-size:1.1rem;
  }

.shop ul li a img.amazon {width:60%;}
.shop ul li a img.rakuten {width:70%;}


/* features
---------------------------------------------------------- */
.features{
  padding-bottom:200px;
  margin-bottom:-150px;
}

.features-menu {
  height:80px;
  border-top: 5px solid #7cde13;
}

.features-menu ul {
  border-left:none;
  border-right:none;
  width:100%;}

.features-menu ul li {width:calc(100% / 2);}

.features-menu.anchorLink a {
  font-size:1.6rem;
  line-height: 1.1;
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-top: 8px;
}

.features-menu.anchorLink a span {
  font-size:1.2rem;
  display: block;
  text-indent: 0;
}

.features-menu.anchorLink a::after {
  content: '';
  position: absolute;
  bottom: 5px;
  }


.features img.package{
  max-width: 258px;
  width: 50%;
	height: auto;
  margin-bottom:50px;
}

.features_img {
  width:100%;
  height:auto;
  margin-bottom:70px;
}

.bottom_arrow::after {
  bottom: 25px;
  border-width: 15px 21px 0 21px;}

.features p.features-txt {
  font-size:2.2rem;
  margin-bottom:25px;}

.features p.features-txt span {font-size:3.4rem;}


.features h3 {
  font-size:2.1rem;
  padding:0 20px;
  margin:0 auto 15px;
}

.features h3::before {border-width: 32px 3px 0 3px;}
.features h3::after {border-width: 32px 3px 0 3px;}

.features picture.features_img_sports01 img {
  width:100%;
  height:auto;
  margin-bottom:40px;
}

.features h4 {
  font-size: 1.8rem;
  margin: 0 0 15px;}

.features picture.features_img_sports02 img{
  width:100%;
  height:auto;
}



/* howto
---------------------------------------------------------- */
.howto {}
.LP .howto h2 {
  margin-bottom:65px;
}
.howto ol {
  width: 100%;
  padding-top:0;
  margin: auto auto 0;
  display: block;
  justify-content: space-between;
}

.howto ol li,
.howto ol li img.howto_img_photo {
  text-align: left;
  width: 100%;
  font-size:1.8rem;
  position: relative;
  margin-bottom:5px;
}

.howto ol li {
  margin-top:50px;
  padding-bottom:28px;}

.howto ol li:first-child::after {
  bottom: -60%;
  left: 0;
  right: 0;
  width: 0;
  height: 0;
  margin: auto;
  border-style: solid;
  border-width: 15px 21px 0 21px;
  border-color: #7cde13 transparent transparent transparent;}

img.howto_img_step {
  width:76px;
  height:76px;
  top:-30px;
  left:-3px;
  z-index: 2;}

.howto ul {
  width: 100%;
  padding-top:20px;}

.howto ul li {margin-bottom:1em;}


/* User's Voice
---------------------------------------------------------- */
.usersvoice {
  pointer-events: none;
  position: relative;
  z-index: 1;
  transform: skewY(-4.7deg);background: #fff;}

.usersvoice .wrap-line::before {display: none;}





/* product
---------------------------------------------------------- */
.product{}

.product .co-block{
  padding: 80px 5px 40px;
  transform: skewY(0);}


.LP .product h2 {margin-bottom:45px;}


/* fogshield */
.product .product_fogshield {
  border-radius: 50%;
  width:100%;
  height:auto;
  aspect-ratio: 1 / 1;
  margin: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: end;
}

.product .product_fogshield img.package{
  position: absolute;
  top:-30px;
  width: 40%;
	height: auto;
  right: 0;
  left: 0;
  margin: auto;
}

.product p img.product-txt {
  width:90%;
  height:auto;
  margin-bottom:10px;
}
.product h3 img.product-logo {
  width:75%;
  height:auto;
  margin-bottom:35px;}


/* shop */

.LP .product .shop h2 {
  font-size:1.8rem;
  padding-bottom:0;
  margin-bottom:20px;
  width:50%;
  min-width: 160px;
  border-bottom: 2px solid #7cde13;}

.product .shop .co-block{padding:25px 0 0;}


/* rainhopper */

.product .rainhopper {
  width: calc(100% - 30px);
  margin: 0 15px;
  padding-top:0;
  padding-bottom:0;
  margin-bottom:80px;
}

.product .rainhopper_head {
  width:255px;
  height:48px;
  left:-50px;
  padding-left:45px;
}
.product .rainhopper_head img {
  width:61px;
  height:32px;
  margin-right:10px;
}

.product .rainhopper_head h3 img {
  width:100px;
  height:36px;
}

.rainhopper_inner {margin-top:48px;}

.rainhopper_inner img.rainhopper_package {
  width:28%;
  height:auto;
  right:10px;
  bottom:5px;
}

.rainhopper_txt {
  width:61%;
  height:auto;
  margin-bottom:10px;
}

.rainhopper_logo {
  width:65%;
  height:auto;
  margin:30px 0 10px;}
 
.rainhopper_inner a {padding:15px 15px 10px;}
 
.rainhopper_inner a.hover {
  opacity: 1;
  }

.rainhopper_inner a.hover .rainhopper_txt,
.rainhopper_inner a.hover .rainhopper_logo {opacity: 0.7;}




/* ----------------------------------------
ショップ追従バナー
----------------------------------------*/
.side {display: none;
}

a.sp_shop_banner {
  display: block;
  position: fixed;
  right: 0.5rem;
  bottom: 6rem;
  transition: opacity 0.3s;
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}

a.sp_shop_banner img {
  width:11.8rem;
  height: auto;
}
a.sp_shop_banner.visible {
  opacity: 1;
  pointer-events: auto;}

#products_antifog {
  padding-top: 70px;
  margin-top: -70px;
}