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


.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;}

br.sp {display: none;}
br.pc {display: block;}

/* ----------------------------------------
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 {
  display: block;
  width: 100%;
  height: auto;}


/* ----------------------------------------
common
----------------------------------------*/
.container {
  background: #21348b;
  position: relative;
  padding-bottom: 12rem;}

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

.contents {padding: 0 6rem;}

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


/* ----------------------------------------
introduction
----------------------------------------*/
.introduction {
  min-width:118rem;
  overflow: hidden;
  margin: auto auto 12rem auto;
  padding-top: 5rem;
}

.introduction  img.products_images {
  height: 60rem;
  width: auto;
}
.introduction h2 img {
  height:18rem;
  width:auto;
  margin-bottom: 2rem;
}
.introduction p {
  font-size: 3.2rem;
  color: #c2c7df;
  margin-bottom: 10rem;
}

img.feature_graph {
  width:80rem;
  height: auto;
  margin: auto;
}




/* ----------------------------------------
feature
----------------------------------------*/
section.feature {
  width:100%;
  margin-bottom: 12rem;
}


/* feature ttl */
section.feature h2.ttl_img {
  position: relative; 
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 13.8rem;
  overflow: hidden;
  margin-bottom:6rem;
}

section.feature h2.ttl_img::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  height: 0.2rem;
  background-color: #fff;
  z-index: 0;
}

section.feature h2.ttl_img picture {
  position: relative;
  z-index: 2;
  display: block;
}

section.feature h2.ttl_img img {
  display: block;
  height: 13.8rem;
  width: auto;
}

section.feature h3 {
  font-size: 5.2rem;
  line-height: 1.3;
  color: #fff;
  margin-bottom: 2.5rem;
}
section.feature h4 {
  font-size:3.6rem;
  color:#ffc800;
  margin-bottom: 2.5rem;}

section.feature h4 sup {font-size:1.8rem;}

section.feature h4 + p {
  font-size: 2.4rem;
  color: #c2c7df;
  line-height: 1.5;
  margin: auto auto 5rem;
  width: fit-content;
}

section.feature h4 + p span {
      display: block;
    font-size: 1.6rem;
    text-align: right;}




/* 画像周り-----------------------------*/
/* 縦に並べる画像 */
.img_box {
  width:60rem;
  display: block;
  margin:auto;}

.img_box li {
  display: block;
  margin:0 auto 6rem auto;}

.img_box li:last-child{
  display: block;
  margin:0 auto;}

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


/* 横に並べる画像 */
.img_row {
  width: 98rem;
  display: flex;
  justify-content: space-between;
  margin: auto auto 0 auto;
  flex-wrap: wrap;
}

/* 説明・見出し付きの場合の画像 */
section.feature .explanation h3 {font-size:2.6rem;}
section.feature .explanation figure {
  width:60rem;
  margin: auto;}
section.feature .explanation figure img {width:60rem;height:auto;}
section.feature .explanation figure figcaption {
  font-size:1.4rem;
  color:#fff;
  text-align: right;}


/* 検証イメージ図の水色ボックス */
.test-box {
  width:80rem;
  margin: auto;
  border-radius:1rem;
  background:#dae9ff;
  padding:4rem;
  color:#21348b;
}

section.feature .test-box h3 {
  font-size:3.6rem;
  color:#21348b;}

section.feature .test-box h3 + p {
  font-size:2.4rem;
  color:#21348b;
  margin-bottom: 3rem;}

section.feature .test-box figure {
  width:auto;
  margin: auto;
  position: relative;}

section.feature .test-box figure img {
  width:60rem;
  margin: auto;
  margin-bottom:1rem;}

section.feature .test-box figure figcaption {
  font-size:1.6rem;
  color:#21348b;
  text-align: center;}

section.feature .test-box .img_row img {
  width: 43rem;height: auto;
}


/* 下矢印が付く */
.img_box li.img-arrow {
  position: relative;
  display: flex;
  margin: 0 auto 6rem auto;
  justify-content: center;
  align-items: flex-end;}

.img_box li.img-arrow::after {
  content: "";
  position: absolute;
  display: block;
  width: 4.3rem;
  height: 2.2rem;
  background: url(/products/rain_drop_goldgloss/images/arrow.png) no-repeat;
  background-size: cover;
  bottom: -4rem;
}



/* ----------------------------------------
細かい調整 + 動画
----------------------------------------*/
/* 1 */
.feature1-video {
  margin: auto;
  width: 47rem;
  height: 25.4rem;
  overflow: hidden;}

.feature1-video video,
.feature3-video video{
  width: 100%;
  height: 100%;
  object-fit: cover; 
  object-position: center;}


/* 3 */
.detail_3 .explanation {
  width:60rem;
  margin: auto;}

.detail_3 .explanation span {
  display: block;
  font-size: 1.4rem;
  color: #fff;
  text-align: right;}

.feature3-video {
  margin: auto auto 1rem;
  width: 60rem;
  height: 60rem;
  overflow: hidden;}
 
span.test {font-size: 1.4rem;}

/* 4 */
section.feature.detail_4 figure {margin-bottom:12rem;}
section.feature.detail_4 .test-box figure {margin-bottom:0;}

/* 5 */
section.feature.detail_5 .explanation h4 {
  font-size:3rem;
  color:#fff;
  font-weight: normal;
  margin-bottom: 3rem;
}


section.feature.detail_5 .img_box {margin-bottom:5rem;}
section.feature.detail_5 .img_box li.img-arrow {margin-bottom:7rem;}
section.feature.detail_5 .img_box li.img-arrow::after {bottom: -5.3rem;}

section.feature.detail_5 .test-box {width:98rem;}
section.feature.detail_5 .test-box figure figcaption {
  width: 100%;
  margin: auto;}

section.feature.detail_5 .test-box figure figcaption:last-child {
  position: absolute;
    display: inline-block;
    font-size: 1.4rem;
    text-align: right;
    bottom: 0;}


section.feature.detail_5 .durability_img {width:90rem;margin:auto;margin-bottom:10rem;}
section.feature.detail_5 .durability_img picture  {display: block;width:90rem;margin: auto;}
section.feature.detail_5 .durability_img picture img {width:90rem;height: auto;margin-bottom: 0.5rem;}
section.feature.detail_5 .durability_img span {
  text-indent: -1em;
  padding-left:1em;
  display: block;
  font-size: 1.4rem;
  color: #fff;
  text-align: right;}


/* 6 */
section.feature.detail_6 {margin-bottom:22rem;}
section.feature.detail_6 figure {margin-bottom:6rem;}
section.feature.detail_6 figure img {width:60rem;height: auto;}
section.feature.detail_6 figure figcaption {
  font-size:2rem;
  color:#fff;}



/* ----------------------------------------
feature-2
----------------------------------------*/
section.feature2 {
  width:100%;
  margin-bottom: 12rem;}


/* feature ttl */
h2.ttl_img_multi,
h2.ttl_img_cost,
h2.ttl_img_howto {
  position: relative; 
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 6rem;
  overflow: hidden;
  margin-bottom:4rem;
}

h2.ttl_img_multi img,
h2.ttl_img_howto img {
  display: block;
  height: 6rem;
  width: auto;
}

h2.ttl_img_cost {height:13.6rem;}

h2.ttl_img_cost img {
  display: block;
  height:13.6rem;
  width: auto;
}

section.feature2 h3 {
  font-size: 3rem;
  line-height: 1.3;
  color: #fff;
  margin-bottom: 6rem;
}

section.feature2 h3 span {color: #ffc800;}


/* multi */
ul.img_multi {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  max-width: 98rem;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

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

/* cost */
.cost_img {
  width:80rem;
  height: auto;}

/* howto */

ol.img_howto {
  width:60rem;
  margin: auto auto 4rem auto;}
ol.img_howto figure {margin-bottom:6rem;}
ol.img_howto figure img {
  width:60rem;
  height: auto;
  margin-bottom:1rem;}
ol.img_howto figure figcaption {
  font-size:2rem;
  color:#fff;
  text-align: left;
}

ol.img_howto li h4 {
  color: #ffc800;
  font-size: 4rem;
  margin-bottom: 1.5rem;
  text-align: left;
}

ol.img_howto2 {
  width:98rem;
  margin: auto;}
ol.img_howto2 li {margin-bottom: 1.5rem;}

.finish_img {
  width:60rem;
  height: auto;}

/* ----------------------------------------
movie
----------------------------------------*/
.movie {margin-bottom:6rem;}
.movie h2 {margin-bottom:3rem;}
.movie h2 img {
  height: 6rem;
  width: auto;
  display: block;
  margin: auto;
}

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

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



/* ----------------------------------------
shop
----------------------------------------*/

#shop_product {padding-top:10rem;}

.shop_products_wrap {
  display: flex;
  margin: auto;
  border: solid 1px #b4a800;  
  border-radius: 1.5rem;
  background: linear-gradient(to bottom, #102872, #062165);
  box-shadow: 0 0 2rem 0 rgba(0, 0, 0, 0.5);
  width: 98rem;
  padding: 5rem 3rem 3rem;
}

.shop_product_detail {text-align: center;}
.shop_product_detail h2{
  color: #fff;
  font-size: 3.4rem;
  line-height: 1.3;
}
.shop_product_detail img {display: block; margin: auto;}
.shop_product_detail img.shop_products_img {width:auto;height:34rem;}
.shop_product_detail img.shop_products_name {
  height:9rem;
  width:auto;
    margin-bottom: 2.5rem;}


/* shop-btn */
.shop-btn {
  flex-wrap: wrap;
  z-index: 2;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  margin: auto auto 0;
}	

p.onlineshop a{
  height: 8rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  text-align: left;
  font-size: 2rem;
  font-weight: bold;
  color: #fff;
  line-height: 2.4rem;
  border-radius: 1rem;
  background: linear-gradient(to bottom, #91872e, #d5cc4c);
  box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.6);
  width: 37rem;
  margin: 0 0 1rem;
  transition: background 0.5s ease;
  padding-left: 4rem;}

p.onlineshop a.hover{
  background: linear-gradient(to bottom, #aba148, #e9e171);
  box-shadow: 0 0 1rem .3rem rgba(100, 149, 237, 0.6); 
  border: 1px solid #dfd779;
  transition: background 0.5s ease;}

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



/* ----------------------------------------
ショップ追従バナー
----------------------------------------*/
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;
}