/* ----------------------------------------
common
----------------------------------------*/
.container {padding-bottom: 2rem;}

.c-inner {
  max-width: calc(100% - 3rem);
  margin: 0 auto;}

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

/* ----------------------------------------
mv
----------------------------------------*/
.mv {
  overflow-x: hidden;
  position: relative;
  border:none;
}

.mv__inner {
  margin:0;
  border:none;
}

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

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


/* ----------------------------------------
introduction
----------------------------------------*/
.introduction {
  width:100%;
  min-width:100%;
  margin: auto auto 8rem auto;
  padding-top: 2.5rem;
}

.introduction .c-inner {
  width:100%;
  min-width:100%;
  margin: 0;}

.introduction  img.products_images {
  height: auto;
  width: 94%;
}
.introduction h2 img {
  height: auto;
  width: 70%;
  margin-bottom: 1rem;
}
.introduction p {
  font-size: 1.8rem;
  line-height: 1.8;
  margin-bottom: 5rem;
}

.feature_graph {
  width:100%;
  height: auto;}




/* ----------------------------------------
feature
----------------------------------------*/
section.feature {margin-bottom: 8rem;}

/* feature ttl */
section.feature h2.ttl_img {
  height: auto;
  margin-bottom:3rem;
}

section.feature h2.ttl_img::after {content: none;}
section.feature h2.ttl_img img {
  height: auto;
  width: 100%;
}

section.feature h3 {
  font-size: 3rem;
  line-height: 1.4;
}
section.feature h4 {
  font-size:1.8rem;
  margin-bottom: 2.5rem;}

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

section.feature h4 + p {
  font-size: 1.4rem;
  text-align: left;
  margin: auto auto 3rem;
}

section.feature h4 + p span {font-size: 1.2rem;}




/* 画像周り-----------------------------*/
/* 縦に並べる画像 */

.img_box {width:100%;}
.img_box img,
section.feature img,
section.feature2 img {
  width:100%;
  max-width: 100%;}

.img_box li {margin:0 auto 3rem auto;}

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


/* 横に並べる画像 */
.img_row {
  flex-wrap: wrap;
  width: 100%;
  display: block;
  margin: auto;
}
.img_row li {margin-bottom:3rem;}

/* 説明・見出し付きの場合の画像 */
section.feature .explanation h3 {
  font-size: 1.6rem;
  margin-bottom: 1rem;}

section.feature .explanation figure {
  width:100%;
  margin: auto;}

section.feature .explanation figure figcaption {font-size:1.1rem;}


/* 検証イメージ図の水色ボックス */
.test-box {
  width: 100%;
  padding: 2rem 1.5rem;
}

section.feature .test-box h3 {
  font-size:1.8rem;
  margin-bottom: 1.5rem;}

section.feature .test-box h3 + p {
  text-align: left;
  font-size:1.4rem;
  margin-bottom: 2rem;}

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

section.feature .test-box figure img {margin-bottom:1rem;}
section.feature .test-box figure figcaption {
  font-size: 1.2rem;
  text-align: left;}


/* 下矢印が付く */
.img_box li.img-arrow::after {
  width: 2.5rem;
  height: 1.3rem;
  bottom: -3.7rem;
}



/* ----------------------------------------
細かい調整
----------------------------------------*/
/* 1 */
.feature1-video {
  width: 100%;
  height: auto;
  aspect-ratio: 47 / 25.4;}

/* 3 */
.detail_3 .explanation {
  width:100%;
  margin: auto;}

.detail_3 .explanation span {font-size: 1.1rem;}

.feature3-video {
  margin: auto auto 0.5rem;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;}
 

/* 4 */
section.feature.detail_4 figure {margin-bottom: 4rem;}
section.feature.detail_4 .test-box figure {margin-bottom:0;}
span.test {font-size: 1.1rem;}

/* 5 */
section.feature.detail_5 .img_box {margin-bottom:3rem;}
section.feature.detail_5 .explanation h4 {
  font-size: 1.6rem;
  margin-bottom: 1.5rem;
}

section.feature.detail_5 .img_box li.img-arrow {margin-bottom:4rem;}
section.feature.detail_5 .img_box li.img-arrow::after {bottom: -3.5rem;}

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

section.feature.detail_5 .test-box figure figcaption:last-child {
  position: relative;
  display: inline-block;
  font-size: 1rem;}


.detail_5 .explanation {
  width:100%;
  margin-bottom: 5rem;}

.detail_5 .explanation span {
  text-indent: -1em;
  padding-left:1em;
  font-size: 1.1rem;}


section.feature.detail_5 .durability_img {width:100%;margin-bottom:5rem;}
section.feature.detail_5 .durability_img picture {width:100%;}
section.feature.detail_5 .durability_img picture img {width:100%;height: auto;margin-bottom: 0;}
section.feature.detail_5 .durability_img span {
  text-indent: -1em;
  padding-left:1em;
  font-size: 1.1rem;}



/* 6 */
section.feature.detail_6 {margin-bottom:8rem;}
section.feature.detail_6 figure {margin-bottom:3rem;}
section.feature.detail_6 figure figcaption {font-size:1.4rem;}


/* ----------------------------------------
feature-2
----------------------------------------*/
section.feature2 {margin-bottom: 8rem;}

/* feature ttl */
h2.ttl_img_multi,
h2.ttl_img_cost,
h2.ttl_img_howto {
  width: 100%;
  height: 3.5rem;
  margin-bottom:3rem;
}

h2.ttl_img_multi img,
h2.ttl_img_howto img {
  height: 3.5rem;
  width: auto;}
h2.ttl_img_cost {height:7.9rem;}
h2.ttl_img_cost img {
  height:7.9rem;
  width: auto;
}

section.feature2 h3 {
  font-size: 1.8rem;
  margin-bottom: 4rem;
}


/* multi */
ul.img_multi {
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  max-width: 100%;
  width: 100%;
}
ul.img_multi li {line-height: 1;}
ul.img_multi li img {width:100%;height: auto;}


/* howto */

ol.img_howto {
  width:100%;
  margin: auto auto 4rem auto;}
ol.img_howto figure {margin-bottom:4rem;}
ol.img_howto figure img {margin-bottom:0.5rem;}
ol.img_howto figure figcaption {font-size:1.3rem;}

ol.img_howto li h4 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;}
ol.img_howto2 {width:100%;}




/* ----------------------------------------
movie
----------------------------------------*/
.movie {margin-bottom:0;}
.movie h2 {margin-bottom:2rem;}
.movie h2 img {
  height: 3.5rem;
  width: auto;}

.movie .c_inner {
  width:calc(100% - 3rem);
  height:auto;
  margin: auto;}

.movie .c_inner iframe{
  width:100%;
  height:auto;}



/* ----------------------------------------
shop
----------------------------------------*/
.shop_products_wrap {
  display: flex;
  margin: auto;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
  width: 100%;
  padding: 0 1.5rem;
  flex-direction: column;
}
.shop_product_detail {
  margin:auto auto 8rem auto;
  border: solid 1px #b4a800;
  border-radius: 1rem;
  background: linear-gradient(to bottom, #102872, #062165);
  box-shadow: 0 0 2rem 0 rgba(0, 0, 0, 0.5);
  width: 100%;
  padding: 3rem 1.5rem;
  }

.shop_product_detail h2{font-size: 2.8rem;}
.shop_product_detail img.shop_products_img {
  width: 70%;
  height: auto;}
.shop_product_detail img.shop_products_name {
  width: 75%;
  max-width: 35rem;
  height: auto;
  margin-bottom: 4.5rem;}


/* btn */
p.onlineshop{
  width:100%;
  margin:0 0 0.5rem;}		

p.onlineshop a{
  height: 7.5rem;
  width: 100%;
  justify-content: start;
  font-size: 1.6rem;
  padding-left: 2.5rem;}





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

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

a.sp_shop_banner img {
  width:11.8rem;
  height: auto;
}


#products-megane {
    padding-top: 70px;
  margin-top: -70px;
}


a.sp_shop_banner.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}