/* fade */
.js-fade {
  opacity: 0;
  transition: 1s;
  transform: translateY(2rem);}
.js-fade-in {
  opacity: 1;
  transform: translateY(0);}

.js-fade2 {
  opacity: 0;
  transition: 0.5s;
  transform: translateY(35rem);}
.js-fade2-in {
  opacity: 1;
  transform: translateY(0);}

.js-copy {
  opacity: 0;
  transition: 0.5s;
  transition-delay: 0.25s;
  transform: scale(2);}

.js-copy-in {
  opacity: 1;
  transform: scale(1);}

/* marker */
.js-marker {
  background:linear-gradient(transparent 60%, rgba(255, 241, 0) 60%);
  display: inline;
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition:background-size 1.5s;}
.js-marker-in {background-size: 100% 100%;}


.js-line {
  width: 100%;
  opacity: 1;
  transition: 0.3s;
  clip-path: inset(0 100% 0 0 );
  transform: scale(1);
}
.js-line-in {
  opacity: 1;
  transition-delay: 0.3s;
  clip-path: inset(0);
}

/* arrow */
.js-arrow {
  width: 100%;
  opacity: 1;
  transition: 0.3s;
  clip-path: inset(0 0 100% 0);
  transform: scale(1);}
.js-arrow-in {
  opacity: 1;
  transition-delay: 0.5s;
  clip-path: inset(0 0 -5.5rem 0);}

.js-gras-shield {
  opacity: 0;
  transition: 1s;
  transition-delay: 0.25s;}
.js-gras-shield-in {
  opacity: 1;}

.js-slide-down {
  opacity: 0;
  transition: 0.5s;
  transition-delay: 0.25s;
  clip-path: inset(0 0 100% 0);}
.js-slide-down-in {
  opacity: 1;
  clip-path: inset(0);}

/* check */
ul.check_list li.js-check::after {
  opacity: 1;
  transition: 1s;
  clip-path: inset(0 100% 0 0 );
  transform: scale(1);
  content: "";
  position: absolute;
  left: 0;
  top: 1.2rem;
  width: 2.2rem;
  height: 2.2rem;
  background: url(/products/rain_drop_tv/images/check.png);
  background-size: cover;}

ul.check_list li.js-check-in::after {
  transition-delay: 0.8s;
  clip-path: inset(0);}


/* delay */
.delay05s {transition-delay: 0.5s;}
.delay1s {transition-delay: 1s;}



/* ----------------------------------------
common
----------------------------------------*/
header,
footer {background: #fff;}
.copyright {
  margin-bottom:0;
  padding: 0 0 2rem 0;}

.container {position: relative;}
.container * {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", sans-serif;
  font-feature-settings: "palt";
}

.container.scrolled {padding-top: 56.25vw;}
.contents {padding: 0 6rem;}

.c-inner {
  max-width: 118rem;
  margin: 0 auto;
  text-align: center;
}

.ttl_img {
  background: #a7007d;
  height: 22rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom:6rem;
}
.ttl_img img {padding-bottom:2rem;}



/* ----------------------------------------
main-movie
----------------------------------------*/
.main-movie {
  background: #333;
  position: relative;
  width: 100%;
  /*height: 56.25vw;*/
  overflow: hidden;
  z-index: -2;
  line-height: 0;
}

.fixed {
  position: fixed !important;
  top: 49px;
  }

.main-movie_filter{
  content: "";
  background: url(../images/dot.png);
  z-index: 2;
  position: absolute;
  left:0;
  top:0;
  height: 100%;
  width: 100%;}

.main-movie video {
  object-fit: cover; 
  width: 100%;
  height: 100%;
}

/* scrolldown */
.scrolldown {
  width: 2rem;
  left: 2rem;
  position:absolute;
  animation: arrowmove 1s ease-in-out infinite;
  z-index: 5;
}

@keyframes arrowmove{
  0%{bottom:2rem;}
  50%{bottom:3rem;}
  100%{bottom:2rem;}
}

.scrolldown span {
  height: 2rem;
  position: absolute;
  left: 1.8rem;
  top: -12rem;
  color: #eee;
  font-size: 1.4rem;
  letter-spacing: 0.05em;
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  transform: rotate(0.5turn);
}

.scrolldown:before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0.9rem;
  width: 0.1rem;
  height: 3rem;
  background: #eee;
  transform: skewX(31deg);}

.scrolldown:after{
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0.1rem;
  height: 9rem;
  background: #eee;}


/* ----------------------------------------
products_box
----------------------------------------*/
.products_box {margin:auto;}
.products_box .c-inner {
  width:98rem;
  height:84rem;
  position: relative;
  border:0.5rem solid #a7007d;
  background: #fff;
  border-radius:2rem;
  margin: 17.2rem auto 12rem auto;
  box-shadow: 0 0 2rem 0 rgba(0, 0, 0, 0.5);
}

.products_box figure.product_name {
  display: block;
  position: relative;
  margin: auto auto 10rem auto;
  width:49.5rem;
  text-align: center;
  top:-17.2rem;
}

.products_box figure.product_name .product_name_img {
  width:41.3rem;
  height: auto;
  display: block;
  margin: auto;
}
.products_box figure.product_name h2 {
  position: relative;
  top: -3rem;}
.products_box figure.product_name .product_name_logo {width:49.5rem; }
.products_box figure.product_name p {font-size:4.8rem;}
.products_box figure.product_name figcaption {
  font-size:2.4rem;
  position: relative;
  top: -3rem;}

.shop-btn {
  width: 78.5rem;
  margin:auto auto 2.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  z-index: 2;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

/* shop-btn */
p.onlineshop{
  width:37rem;
  background:none;
  padding:0;
  margin:0 0 3rem;}		

p.onlineshop a{
  height:8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align:left;
  font-size:2rem;
  font-weight:bold;
  color:#fff;
  line-height:2.4rem;
  background-color:#e60012;
  padding:2rem 1.5rem 2rem 2rem;
  margin:0;
  border-radius:1rem;
  box-shadow: 0 0.2rem 0.5rem rgba(0,0,0,0.6);}

p.onlineshop a.hover{box-shadow: none;}

p.onlineshop a img{
display: inline-block;
width:3.5rem;
height: 3.3rem;
margin:  0.5rem 1rem 0 0;
}



/* ----------------------------------------
introduction
----------------------------------------*/
.introduction_wrap {
  background: url("/products/rain_drop_tv/images/bg_a.png");
  position: relative;
  z-index: 0;
  margin-top:0;
  min-width:118rem;
  overflow: hidden;
  background-attachment: fixed;
  padding-top:6rem;
}

.introduction_wrap h2.intro_ttl {margin-bottom:1.5rem;}
.introduction_wrap h2.intro_ttl img {
  display: block;
  margin: auto;
  margin-bottom:1.5rem;
}

.introduction_wrap figure {margin-bottom: 8rem;}
.introduction_wrap figure img {
  display: block;
  margin: auto auto 1.5rem;}

.introduction_wrap .main_produgt_img {
  width:42.1rem;
  height: auto;
  
}

.introduction_wrap figure h2 {}
.introduction_wrap figure h2 img {
  display: block;
  margin: auto auto 1.4rem;
}

.introduction_wrap figure p {
  font-size:4.8rem;
  color: #fff;
}

.introduction_wrap figure figcaption {
  font-size:2.4rem;
  color: #fff;
  margin-bottom:1.5rem;}



/* ----------------------------------------
movie
----------------------------------------*/
.movie {margin-bottom:12rem;}
.movie h2 {margin-bottom:2rem;}
.movie h2 img {display: block;
  margin: auto;
}

.movie .c_inner {
  width:80rem;
  aspect-ratio: 16 / 9;
  height:auto;
  margin: auto;
}

.movie .c_inner iframe{
  border:0.3rem solid #fff;
  width:80rem;aspect-ratio: 16 / 9;
  height:auto;}



/* ----------------------------------------
introduction2
----------------------------------------*/
.introduction2_wrap {
  background: url("/products/rain_drop_tv/images/bg_b.png");
  position: relative;
  min-width:118rem;
  overflow: hidden;
  background-attachment: fixed;
}


.introduction2_wrap h2.worries_ttl {
  font-size:5rem;
  color: #fdf908;
  background: #5009a8;
  padding:3.4rem 0;
margin-bottom:6rem;}

.introduction2_wrap h2.worries_ttl .introduction2_ttl {
  width:80rem;
  margin: auto;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 1.2;
  flex-direction: row-reverse;}

.introduction2_wrap h2.worries_ttl span {
  font-weight: normal;
  font-size:4rem;
  color: #fff;
  margin-top: 1.2rem;
  display: block;}

.introduction2_wrap h2.worries_ttl img {}

/*** worries ***/
.worries {
  background: #a3a3c1;
  overflow: hidden;
  margin-bottom:8rem;}

.worries .point_img_row {margin-bottom:3rem;}

/* check */
.check_list_wap {
  width:98rem;
  margin: auto auto 6rem auto;
  background: #fff;
  border-radius: 1rem;
  padding: 3rem 1rem 1rem;}

.check_list {
  text-align: left;
  margin: auto;
  width: fit-content;}

.check_list li{
  font-size: 2.8rem;
  font-weight: bold;
  text-align: left;
  margin-bottom: 2.5rem;
  padding-left: 4rem;
  position: relative;}

.check_list li::before {
  content: "";
  position: absolute;
  left:0;
  top:1.2rem;
  border:0.1rem solid #333;
  background: #fff;
  width:2.2rem;
  height: 2.2rem;}


/* 解決 */
.introduction2_solution {}

.introduction2_solution h3,
.introduction2_solution h3 img {
  display: block;
  margin: auto auto 4rem;}

.introduction2_solution img {
  display: block;
  margin: auto auto 4rem;
}




/* ----------------------------------------
point_wrap
----------------------------------------*/
.point_wrap {
  background: url("/products/rain_drop_tv/images/bg_b.png");
  position: relative;
  min-width:118rem;
  overflow: hidden;
  background-attachment: fixed;
}

.point_wrap h3 {
  margin:auto auto 6rem auto;}
.point_wrap h3 img {
  display: block;}

.point_wrap .point_main_img {
  display: block;
  width: 80rem;
  height: auto;
  border:0.3rem solid #fff;
  margin: auto auto 6rem auto;}

.point_wrap .point_txt {margin:auto auto 3rem auto;}
.point_wrap .kirei {
  display: block;
  margin:auto auto 5rem auto;}

.point_wrap .point_txt img,
.point_wrap .kirei img,
.point_wrap h3 img {
  display: block;
  margin:auto;
}


.point_img_row {
  display: flex;
  flex-wrap: wrap;
  margin: auto;
  width: 98rem;
  justify-content: space-between;
}

.point_wrap figure {
  border:0.3rem solid #fff;
  width:47rem;
  margin: auto;
  line-height: 0;}

.point_wrap figure.single {width:60rem;}

.point_wrap figure img {
  width:100%;
  height: auto;
}
.point_wrap figure figcaption {
  width:100%;
  background: #0012ff;
  color: #fff;
  font-size:2.4rem;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.8rem;
  line-height: 1;
}


/* ----------------------------------------
point1
----------------------------------------*/
.point1 {padding-bottom:12rem;}

.point1 .point_img_row img {
  width:47rem;
  height: auto;
  border: 0.3rem solid #fff;
}
.point1 .point_img_row span {
  display: block;
  font-size:1.2rem;
  font-weight: bold;
  color: #fff;
  text-align: right;
}



/* ----------------------------------------
point2
----------------------------------------*/
.point2 {padding-bottom:12rem;}

.point2 .G-RAS-shield {
  width: 98rem;
  background: #fff;
  padding:6rem 9rem 8rem;
  margin:auto auto 10rem auto;
  box-shadow: 0 0 2rem 0 rgba(0, 0, 0, 0.5);
}

.point2 .G-RAS-shield_inner {
  margin-bottom:3rem;
}

.point2 .G-RAS-shield_inner dl {
  width:100%;
}

.point2 .G-RAS-shield_inner dl dt {
  font-size:4.4rem;
  margin-bottom:2.5rem;
  font-weight: bold;
}

.point2 .G-RAS-shield_inner dl dd {
  font-size:2.2rem;
  line-height: 1.455;
  font-weight: bold;
  text-align: left;
}

.adsorption {color:#ff0000;}
.water-repellent {color:#005bac;}
.smooth {color:#009944;}
.gloss {color:#e75e1c;}

.point2 #video2 {
  width:80rem;
  height:auto;}



/* ----------------------------------------
point3
----------------------------------------*/
.point3 {padding-bottom:12rem;}

.point3 .point_img_row {
  position: relative;
  margin-bottom:6rem;}

.point3 .point_img_row::after {
  content: "";
  position: relative;
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 3rem solid transparent;
  border-left: 3rem solid transparent;
  border-top: 4rem solid #ffff00;
  border-bottom: 0;
  top: 3rem;
  left: 0;
  right: 0;
  margin: auto;
}

/* ----------------------------------------
point4
----------------------------------------*/
.point4 {padding-bottom:12rem;}


.point4 .point_img_row li {
  width:calc(32rem - 0.6rem);
  margin-bottom: 1.5rem;
}

.point4 .point_img_row figure {
  width:32rem;
  margin: auto;}

.point4 .point_img_row figure img {
  width:100%;
  height: auto;
}
.point4 .point_img_row figure figcaption {
  width:100%;
  background: #0012ff;
  color: #fff;
  font-size:2rem;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.8rem;
  
}


/* ----------------------------------------
point5
----------------------------------------*/
.point5 {padding-bottom:5rem;}

.point5 ul li {
  margin-bottom:7rem;
  position: relative;}

.point5 ul li::after {
  content: "";
  position: relative;
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 3rem solid transparent;
  border-left: 3rem solid transparent;
  border-top: 4rem solid #ffff00;
  border-bottom: 0;
  top: 7rem;
  left: 0;
  right: 0;
  margin: auto;}

.point5 ul li:last-child::after {content:none;}



/* ----------------------------------------
products_wrap
----------------------------------------*/
.products_wrap {
  background: url("/products/rain_drop_tv/images/bg_a.png");
  position: relative;
  min-width:118rem;
  overflow: hidden;
  background-attachment: fixed;
}

.products_wrap h2 {
  background: #0008b3;
  color: #fefd08;
  font-size:4.8rem;
  text-align: center;
  padding: 4rem 1rem;
  margin-bottom: 4rem;
}

.products_wrap h3 {margin-bottom: 2.6rem;}
.products_wrap h4 {margin-bottom: 2rem;}
.products_wrap h3 img,
.products_wrap h4 img {
  display: block;
  margin: auto;
}

/* 購入 */
.products_wrap .products_container {
  width: 98rem;
  position: relative;
  top: -5rem;
  border: 0.5rem solid #a7007d;
  background: #fff;
  border-radius: 2rem;
  margin: 0 auto 7rem auto;
  box-shadow: 0 0 2rem 0 rgba(0, 0, 0, 0.5);
  display: flex;
  padding:2.5rem 0 2.5rem;
  align-items: flex-end;
}


/* レインドロップ トルネードヴォルテックス */
.products_raindrop {
  width:50%;
  position: relative;
  display: block;
}

.products_raindrop img.raindrop_img {
  width:20rem;
  height: auto;
  margin-bottom:3rem;
}


/*レインドロップ トルネードヴォルテックス カートリッジ */
.products_cartridge {
  width:50%;
  position: relative;
  display: block;
  border-left:2px solid #b2b2b2;}

.products_cartridge img.cartridge_img {
  width:8rem;
  height: auto;
  margin-bottom:3rem;}


/* パーツ */
.products_wrap .products_container img.logo-raindrop {
  width: 35.5rem;
  height: auto;
  display: block;
  margin: auto;
}

.ml {
  font-size: 1.8rem;
  font-weight: bold;
  background: #c50018;
  width: 12.6rem;
  height: 2.4rem;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
  border-radius: 1.2rem;
  margin-bottom: 3.5rem;
}

.products_wrap .products_container h3 {
  font-size: 2.9rem;
  margin-bottom: 0.8rem;
  font-weight: bold;
}
.products_wrap .products_container p {
  font-size: 1.6rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

/* 下部 shop btn*/
.products_wrap .shop-btn {
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  margin: auto auto 0;}

.products_wrap .shop-btn p {margin-bottom: 2rem;}
.products_wrap .products_container .shop-btn p:last-child {margin-bottom: 1rem;}