/* fade */
.js-fade {
  opacity: 0;
  transform: translateY(2rem);}
.js-fadeUp{
  transition: all 0.5s ease-out;
  transition-delay: 0.3s;
  transform: translateY(0);
  opacity: 1;}

/* fade-mv */
.js-fade-mv {opacity: 0;}
.js-fadeMv{
  transition: all 0.5s ease-out;
  transition-delay: 0.2s;
  opacity: 1;}

/* 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);}


/* 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%;}

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

/* 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: 0;
  width: 2.2rem;
  height: 2.2rem;
  background: url(/products/roompia_interior_shampoo/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
----------------------------------------*/
.container {position: relative;}

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

.main {
  overflow: hidden;
  padding-bottom: 5rem;
  background: url("/products/roompia_interior_shampoo/images/bg.png");}

.contents {padding: 0 6rem;}

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

.ttl_img,
.ttl_img img {
  display: block;
  margin: auto;
  height:auto;
}

h4.gradation {
  width:98rem;
  font-size:2.6rem;
  font-weight: bold;
  text-align: center;
  margin: auto;
  position: relative;display: flex;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 3rem;
  z-index: 2;
}

h4.gradation::before,
h4.gradation::after {
  content: "";
  position: absolute;
  height: 1.5rem;
  z-index:-1;}

h4.gradation::before {
  background-image: linear-gradient( to right, rgb(140,239,239) 0%, rgb(0,237,202) 25%, rgb(0,208,219) 50%, rgb(1,153,246) 100%);
  right:0;}

h4.gradation::after {
  background-image: linear-gradient( to right, rgb(1,153,246) 0%, rgb(0,208,219) 50%, rgb(0,237,202) 75%, rgb(140,239,239) 100%);
  left:0;}


/* figure */
.products__img {margin:0 auto 2rem;}
.products__img img {
  display: block;
  margin:auto;}

.img_pic,
.img_pic img{
  width:47rem;
  display: block;
  margin-left: auto;
  margin-right: auto;
  height:auto;
}

.point_img {
  display: block;
  width:15rem;
  height:15.6rem;
  margin: 4rem auto 2rem;}



/* ----------------------------------------
mv
----------------------------------------*/
.mv {
  position: relative;
  background: #fff;}

.mv__inner {
  margin:0;
  text-align: center;}

.mv__img {
  display: block;
  width: 100%;
  line-height: 0;}

.mv__img img {
  width: 100%;
  height: auto;}



/* ----------------------------------------
introduction-1
----------------------------------------*/
.introduction-1 {
  overflow: hidden;
  padding: 8rem 6rem;}


/* main-intro */
.main-introduction h2.main-introduction__ttl {margin:0 auto 4rem;}
.main-introduction h2.main-introduction__ttl img {
  width:74.598rem;
  height: auto;
}

.main-introduction .main-introduction__photo {
  display: block;
  width:30.3rem;
  height: auto;
  margin: 0 auto 2rem;}

.main-introduction .main-introduction__name {
  display: block;
  width:47.8rem;
  height: auto;
  margin: 0 auto 2rem;
}


/* ----------------------------------------
movie
----------------------------------------*/
.movie{ 
	text-align: center;
  padding: 8rem 6rem 11rem;}

.movie .movie__inner{
  position: relative;
  max-width: 80rem;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  padding: 10px;
  background: #fff;
  line-height: 0;
  z-index: 2;}

.movie.js-fade .movie__inner::before{
  content: "";
  display: block;
  position: absolute;
  width: 80rem;
  aspect-ratio: 16 / 9;
  background-color: #000;
  transform: translate(0,0);}

.movie .movie__inner iframe{
  position: relative;
  width: 100%;
  height: 100%;}

.movie .c-inner {position: relative;}

.movie .movie__ttl,
.movie .movie__ttl img {
  width:13rem;
  height:3.6rem;  
  margin:0 auto 3rem;}

.movie__inner {z-index: 2;}


/* ----------------------------------------
ご存じですか？
----------------------------------------*/
.did_you_know {
  background: #c3004f;
  padding:8rem 0 3.5rem;
}

.did_you_know .c-inner {
  padding-top:4rem;
  padding-bottom:6.5rem;
  background: #d7d7d7;}

.did_you_know__ttl {
  color: #fff100;
  font-size:6rem;
  text-align: center;
  margin-bottom:4rem;
}

.did_you_know__ttl span {
  color: #fff;
  padding-top:1rem;
  font-size:3.6rem;
  display: block;
}

.did_you_know__copy {
  font-weight: bold;
  text-align: center;
  font-size:2.4rem;
  margin-bottom:1rem;
}

ul.did_you_know_img {
  width:98rem;
  height:38.5rem;
  margin: 0 auto 5rem;
  position: relative;}
ul.did_you_know_img li {position: absolute;}

ul.did_you_know_img li.food {}
ul.did_you_know_img li.sunscreen {left:45.3rem;top:3rem;}
ul.did_you_know_img li.mud {left:22.7rem;top:15rem;}
ul.did_you_know_img li.sweat {right:0;bottom:0;}
ul.did_you_know_img img {
  width:30rem;
  height: 19.5rem;
  display: block;}

img.filthiness {
  width:60rem;
  height:38rem;
  display: block;
  margin: 0 auto 6rem;}

.konna-hito {
  width:40.9rem;
  height:13.8rem;
  display: block;
  margin: 0 auto 4rem;}


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

.check_list li{
  font-size: 2.4rem;
  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:0;
  border:1px solid #333;
  background: #fff;
  width:2.2rem;
  height: 2.2rem;
}

.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: 0;
  width: 2.2rem;
  height: 2.2rem;
  background: url(/products/roompia_interior_shampoo/images/check.png);
  background-size: cover;
}
.check_list li.js-check-in::after {
  transition-delay: 0.3s;
  clip-path: inset(0);
}


/* ----------------------------------------
products__box
----------------------------------------*/
.products__box {margin: 10rem auto 8rem;}

.products__box .c-inner {
  width:98rem;
  position: relative;
  border:0.4rem solid #00b5d0;
  background: #fff;
}

.products_ttl {
  display: block;
  margin: auto auto 10rem auto;
  width:61.2rem;
  height: auto;
}

.products2_ttl {
  display: block;
  margin: auto auto 12rem auto;
  width:62.5rem;
  height: auto;
}

figure.products_interior,
figure.products_window,
figure.products_shibo {
  display: block;
  position: relative;
  top:-6rem;
  margin: 0 auto -2rem;
  z-index: 2;
}
figure.products_interior img {
  height: 40rem;
  width:auto;
  display: block;
  margin: auto auto 1rem;}

figure.products_window img,
figure.products_shibo img {
  margin-bottom:2rem;}

figure.products_interior figcaption,
figure.products_window figcaption,
figure.products_shibo figcaption {
  color: #1f3b8f;
  font-size:4.6rem;
  font-weight: bold;
  line-height: 1.2;}


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

/* 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;
}


/* ----------------------------------------
interior_POINT 1
----------------------------------------*/
.ttl_interior_shampoo_awano {width:57.6rem;}
.ttl_interior_point1 {
  width:37.7rem;
  margin-bottom:4rem;
}

.interior_shampoo_point1 {
  position: relative;
  margin-bottom:7rem;
}

.img-arrow::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-left: 17px solid transparent;
  border-right: 17px solid transparent;
  border-top: 23px solid #df0666;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -4.5rem;
}

.interior_shampoo_point1 figcaption {
  background: #00b7cc;
  color: #fff;
  min-width:4.6rem;
  font-size:2.4rem;
  font-weight: bold;
  text-align: center;
}



/* ----------------------------------------
驚きの洗浄効果の秘密は新開発「高密度モチモチ泡」
----------------------------------------*/
.chewy-bubbles {
  border: 4px solid #00b7cc;
  background: #fff;
  border-radius:3.5rem;
  padding:4rem;
  margin-bottom:4rem;
}

.chewy-bubbles_ttl {
  width: 49.5rem;
  display: flex;
  position: relative;
  justify-content: flex-end;
  margin-bottom:4rem;
}

.chewy-bubbles_ttl img.new-icon {
  width: 8.5rem;
  height: auto;
  position: absolute;
  top:0;
  left:0;
}

.chewy-bubbles h4 {
  background: #2a80c7;
  color: #fff;
  min-height: 4rem;
  border-radius: 2rem;
  font-size:2.4rem;
  margin:6rem auto 3rem;
}

.chewy-bubbles_pic {
  width:42rem;
  height: auto;
  margin: auto;
  margin-bottom: 7rem;
  position: relative;
}

.chewy-bubbles_pic figcaption {
  font-size:2.2rem;
  font-weight: bold;}


.chewy-bubbles_pic2 {
  width:60rem;
  height: auto;
  margin: auto;
  margin-bottom: 3rem;
  position: relative;
}

.chewy-bubbles_txt img {
  width:57.5rem;
  height:auto;
  margin-bottom:1rem;
}

/* ----------------------------------------
interior_POINT 2
----------------------------------------*/
.interior_point2_ttl {margin-bottom:2rem;}
.interior_point2_ttl + p {
  font-size:2rem;
  margin-bottom:4rem;}

h4.gradation.point2-subttl-1::before,
h4.gradation.point2-subttl-1::after {width:30%;}

h4.gradation.point2-subttl-2::before,
h4.gradation.point2-subttl-2::after {width:27%;}

h4.gradation.point2-subttl-3::before,
h4.gradation.point2-subttl-3::after {width:40%;}


ul.point2_img-1 {
  width:98rem;
  margin: auto auto 6rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;}

ul.point2_img-2 {
  width:48rem;
  margin: auto auto 6rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;}

ul.point2_img-3 {
  width:75rem;
  margin: auto auto 6rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom:3rem;
}

ul.point2_img-1 li,
ul.point2_img-2 li,
ul.point2_img-3 li {width: 23rem;}
ul.point2_img-1 li img,
ul.point2_img-2 li img,
ul.point2_img-3 li img {width: 23rem;}

ul.point2_img-3 li {margin:1rem;}


/* ----------------------------------------
interior_POINT 3
----------------------------------------*/
.interior_point3_ttl {margin-bottom:2rem;}
.interior_point3_ttl + p {
  font-size:2rem;
  margin-bottom:4rem;}

ul.point3_img {
  width:88rem;
  margin: auto auto 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;}

ul.point3_img li {
  width:26rem;
  margin-bottom:4rem;}
ul.point3_img li img {width:26rem;}

p.note {
  font-size:1.4rem;
  text-align: center;
}


/* ----------------------------------------
ルームピアシリーズ
----------------------------------------*/
.roompia-series{
  padding-bottom: 1rem;
  background: linear-gradient(to bottom, #37d8ee 0%, #37d8ee 60%, #fff 100%, #fff 100%);
}
.roompia-series h2 {
  padding:3rem 6rem 4rem;
  background: #1f3b8f;
  color:#fff;
  font-size:6rem;
  line-height: 1.2;
  text-align: center;
  position: relative;
}
.roompia-series h2 span {
  display: block;
  color:#fff;
  font-size:3.2rem;}

.roompia-series h2::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-left: 2.25rem solid transparent;
  border-right: 2.25rem solid transparent;
  border-top: 5.5rem solid #1f3b8f;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -4rem;
}


.c-inner img.roompia_logo {
  display: block;
  width:30.6rem;
  height: 18.5rem;
  margin: 4rem auto 4rem;
  position: relative;
  z-index: 2;
}

.roompia-series dl {
  width:88rem;
  margin: auto;
  position: relative;
  margin-bottom:9rem;
}
.roompia-series dl dt {
  width:54rem;
  background: #2861ae;
  font-size:2rem;
  min-height:4rem;
  color: #fff;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}
.roompia-series dl dd {width:54rem;}
.roompia-series dl dd.anchor_img {
  width:28rem;
  position: absolute;
  top:0;
  right:0;
}

.roompia-series dl dd.anchor_img a {transition: 0.3s;}
.roompia-series dl dd.anchor_img a.hover {
  opacity: 0.7;
}


/* ----------------------------------------
ルームピアシリーズ 製品
----------------------------------------*/
.roompia-series_products {
}
.roompia-series_products h2 {
  background-image: linear-gradient( 90deg, rgb(0,155,247) 0%, rgb(0,201,224) 51%, rgb(0,246,196) 100%);
  min-height: 13.5rem;
  display: flex;
  justify-content: center;
  margin-bottom:5rem;
}



/* ----------------------------------------
マドエグゼクロス
----------------------------------------*/
.roompia_window-cloth {
    padding-top: 50px;
    margin-top: -50px;
}

/* point1 */
.ttl_roompia_cloth_point1 {
  width:57.3rem;
  margin-bottom:4rem;
}

.img_roompia-series_products_point1 {
  position: relative;
  margin-bottom:7rem;
}

.img_pic_highedge {
  width:60rem;
  display: block;
  margin: auto;
}



/* point2 */
.ttl_roompia_cloth_point2 {
  width:54.1rem;
  margin-bottom:4rem;
}

/* point3 */
.ttl_roompia_cloth_point3 {
  width:52.9rem;
  margin-bottom:4rem;
}

ul.img_pic_cols2 {
  width: 98rem;
  margin: auto auto 14rem;
  display: flex;
  justify-content: space-between;
}
ul.img_pic_cols2 li {position: relative;}
ul.img_pic_cols2 li::after {
  content: "";
  width: 0;
  height: 0;
  border-top: 10.5px solid transparent;  /* 上の辺 */
  border-bottom: 10.5px solid transparent; /* 下の辺 */
  border-left: 14px solid #df0666; /* 右向きの三角形 */
  display: inline-block;
  position: absolute;
  top: 50%;
  right: -2.8rem;}

ul.img_pic_cols2 li:last-child::after {display: none;}


/* ----------------------------------------
シボエグゼブラシ
----------------------------------------*/
.roompia_shibo-brush {
    padding-top: 50px;
    margin-top: -50px;
}
/* point1 */
.ttl_roompia_brash_point1 {
  width:63.9rem;
  margin-bottom:4rem;
}


/* point2 */
.ttl_roompia_brash_point2 {
  width:46.2rem;
  margin-bottom:4rem;
}


/* point3 */
.ttl_roompia_brash_point3 {
  width:49.1rem;
  margin-bottom:2rem;
}
.ttl_roompia_brash_point3 + p {margin-bottom:3rem;}



/* ----------------------------------------
floating-bn
----------------------------------------*/
.floating-bn {
  background-color:#fff;
	position: fixed;
	right: 10px;
	z-index: 7;
	opacity: 0;
	/*transform: translateY(100px);*/
}
.floating-bn img{
  vertical-align: top;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 30%);
  transition: box-shadow 0.12s, opacity 0.12s;
}
.floating-bn.hover img{
  box-shadow: none;
  opacity: 0.8;
}


.floating-bn.UpMove{
	animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
  opacity: 0;
	transform: translateY(100px);
  }
  to {
  opacity: 1;
	transform: translateY(0);
  }
}

.floating-bn.DownMove{
	animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
  opacity: 1;
	transform: translateY(0);
  }
  to {
  opacity: 0;
	transform: translateY(100px);
  }
}



/* ----------------------------------------
ショップ追従バナー
----------------------------------------*/

#shop_product {
  padding-top: 115px;
  margin-top: -115px;
}
a.sp_shop_banner {display:none;}

.wrapper {
  overflow: hidden;
  position: relative;}

.side {
  width: 1px;
  position: fixed;
  height: calc(100vh - 4.9rem);
  top: var(--side-top, 17.9rem);
  bottom: 0;
  }

.fixed .side {
  position: fixed;
  top: 4.9rem;
}

/* フッターに到達 */
.side.at-bottom {
  height: calc(100vh - 4.9rem);
  position: absolute;
  top: auto;
  bottom: 0;
  background-position: left bottom;
}

.right {
  top: 0;
  right: 0;
  z-index: 3;
}

.right .shop_banner img {
  width:19.8rem;
  height: 19.8rem;
  }

.right .side_banner {
  width: 19.8rem;
  height: 19.8rem;
  position: absolute;
  right: 0;
  top: auto;
  bottom: 5rem;
  margin: auto;
}
.right .side_banner a {
  display: block;
  transition: opacity 0.3s ease;}
.right .side_banner a.hover {opacity: 0.5;}


/* 表示/非表示 */
.side_banner,
.sp_shop_banner {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
  position: fixed; 
  z-index: 3;
}

.side_banner.visible,
.sp_shop_banner.visible {
  opacity: 1;
  visibility: visible;
}