@font-face {
  font-family: "Noto Sans JP Black";
  src: url("your-path/NotoSansJP-Black.woff2") format("woff2");
  font-weight: 900;
}

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

.contents {padding: 0 6rem;}

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

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

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

/* photo */
ul.img_pic,
ul.img_pic-3 {
  display: flex;
  justify-content: space-between;}

ul.img_pic li {width:47rem;}
ul.img_pic img{
  width:47rem;
  display: block;
  margin-left: auto;
  margin-right: auto;
  height:auto;
  box-shadow: 0.7rem 0.7rem 0px 0px rgba(100, 180, 4, 1);
}

ul.img_pic-3 li {
  width:30rem;
  position: relative;
}

ul.img_pic-3 li::after {
  content: "";
  width: 0;
  height: 0;
  border-top: 23px solid transparent;
  border-bottom: 23px solid transparent;
  border-left: 12px solid #df0666;
  display: inline-block;
  position: absolute;
  top: 42%;
  right: -3rem;
}
ul.img_pic-3 li:last-child::after {
  content: none;
}

ul.img_pic-3 img {
  width:30rem;
  display: block;
  margin-left: auto;
  margin-right: auto;
  height:auto;
  box-shadow: 0.7rem 0.7rem 0px 0px rgba(100, 180, 4, 1);}
  
/* ----------------------------------------
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
----------------------------------------*/
.introduction-inner {
  padding: 8rem 6rem;
  position: relative;
  background: linear-gradient( rgb(255,255,255) 0%, rgb(209,255,153) 100%);}

.introduction-inner::after {
  content: "";
  display: block;
  position: absolute;
  background: url(/products/fleece_car_wash/images/line.png) repeat-x;
  bottom: 0;
  width: 100%;
  z-index: 1;
  height: 69px;
  left: 0;}

.introduction-inner .c-inner {
  margin-bottom:4rem;}

.introduction_txt {
  font-weight: bold;
  font-size:2.4rem;
  line-height: 2;
  margin-bottom: 1rem;}

.introduction_txt span {
  font-size:2.8rem;
  color: #229100;
  padding:0 0.5rem;}

.sorega {
  display: block;
  position: absolute;
  z-index: 2;
  left: calc(50% - 6.3rem);
  width: 12.6rem;
  height: auto;}

.ttl_fleece {
  text-align: center;
  margin: 5rem auto 23rem;
}


/* ----------------------------------------
products_box
----------------------------------------*/
.products_box {
  position: relative;
  margin: 10rem auto 22.5rem;
  z-index: 1;}


.products_box .c-inner {
  width: 98rem;
  height: 65.5rem;
  position: relative;
  border: 0.5rem solid #76d800;
  background: #fff;
  border-radius: 5rem;
  box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.15);}

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

figure.products_img {
  position: relative;
  top: -20rem;
  left: 0;
  right: 0;
  margin: auto;}

figure.products_img img {
  width: 31.3rem;
  height: auto;
  display: block;
  margin: auto auto 2rem;}

figure.products_img figcaption {
  text-align: center;
  font-weight: bold;
  color: #007711;
  font-size:4rem;}

figure.products_img figcaption span {
  display: block;
  color: #007711;
  font-size:3.6rem;}

figure.products_img figcaption span.regular {display: inline;}


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

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



/* ----------------------------------------
section-bg
----------------------------------------*/
.section-1,
.section-4 {
  position: relative;
  background: linear-gradient(90deg, rgba(183, 240, 108, 1), rgba(148, 255, 203, 1));
  padding-bottom: 18rem;}

.section-1::before,
.section-4::before{
  content: '';
  position: absolute;
  top: -11.8rem;
  width: 101%;
  height: 12rem;
  background: url(/products/fleece_car_wash/images/bg-1.svg) no-repeat bottom;
  background-size: contain;}

.section-4::before {
  background: url(/products/fleece_car_wash/images/bg-4.svg) no-repeat bottom;
  background-size: contain;}


.section-2,
.section-5 {
  position: relative;
  background: #fff;
  padding-bottom: 18rem;}
.section-5 {padding-bottom: 15rem;}

.section-2::before,
.section-5::before{
  content: '';
  position: absolute;
  top: -11.8rem;
  width: 101%;
  height: 12rem;
  background: url(/products/fleece_car_wash/images/bg-2.svg) no-repeat bottom;
  background-size: contain;}
.section-5::before {
  background: url(/products/fleece_car_wash/images/bg-5.svg) no-repeat bottom;
  background-size: contain;}

.section-3 {
  position: relative;
  background: linear-gradient(90deg, rgba(245, 245, 245, 1), rgba(220, 250, 255, 1));
  padding-bottom: 18rem;}
.section-3::before {
  content: '';
  position: absolute;
  top: -11.8rem;
  width: 101%;
  height: 12rem;
  background: url(/products/fleece_car_wash/images/bg-3.svg) no-repeat bottom;
  background-size: contain;}

.section-6 {
  position: relative;
  background: #fff;
  padding-bottom: 0;}
.section-6::before {
  content: '';
  position: absolute;
  top: -7rem;
  width: 101%;
  height: 36.2rem;
  background: url(/products/fleece_car_wash/images/bg-6.svg) no-repeat bottom;
  background-size: contain;
  z-index: 0;}

.section-1 .c-inner {
  position: relative;
  top: -4rem;}
.section-2 .c-inner,
.section-3 .c-inner,
.section-4 .c-inner,
.section-5 .c-inner,
.section-6 .c-inner {
  position: relative;
  top: -2rem;}


/* ----------------------------------------
section
----------------------------------------*/
h3 {
  font-size: 4.8rem;
  text-shadow: 0.2rem 0.2rem #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 900;
  font-stretch: 100%;
  text-rendering: optimizeLegibility; /* 文字のレンダリングを最適化 */
  -webkit-font-smoothing: antialiased; /* 滑らかに描画 */
  z-index: 2;
  position: relative;
  width: fit-content;
  margin: auto auto 2rem;}

h3 + p {
  font-size:3rem;
  margin-bottom:3rem;
  font-weight: bold;
}

h3 .marker {
  background: linear-gradient(transparent 70%, #caf23c 70%);
  display: inline;}
.section-1 h3.marker,
.section-4 h3.marker {background: linear-gradient(transparent 70%, #daff6b 70%);}
h3 .sml {font-size:4rem;}
h3 .f-30 {font-size:3rem;}
h3 .f-36 {font-size:3.6rem;}
h3 .large {font-size:6rem;}
.fleece {
  color:#007711;
  font-size:5.2rem;}

/* ----------------------------------------
section 1
----------------------------------------*/
.img-pic1-1 {
  display: block;
  width:47rem;
  height: auto;
  margin: auto;
  margin-bottom:7rem;}
.gokuatsu {
  width: 9.6rem;
  height: 9.3rem;
  position: absolute;
  z-index: -1;
  top: -4rem;
  left: -7rem;}

/* ----------------------------------------
section 2
----------------------------------------*/
.section-2 h3 + p {margin-bottom:6rem;}

.section-2 ul.img_pic img,
.section-3 ul.img_pic img {
  box-shadow: 0.7rem 0.7rem 0px 0px #76d800;}

/* ----------------------------------------
section 3
----------------------------------------*/
.section-3 h3 {
  margin-bottom: 0.5rem;
  line-height: 1.2;
}
.section-3 h3 + p {margin-bottom:6rem;}

/* ----------------------------------------
section 4
----------------------------------------*/
.section-4 .fleece {font-size:5.2rem;}
.section-4 h3 {margin-bottom:3rem;}
.section-4 h3 .release {
  font-size:4rem;
  text-shadow: none;}

.dakara {
  width:20.6rem;
  height: auto;
  display: block;
  margin: auto auto 2rem;}

.section4-text {
  font-size: 4.8rem;
  font-family: "Noto Sans JP Black", "Noto Sans JP", sans-serif;
  font-weight: 900;
  text-shadow: 0.3rem 0.3rem #fff;
  margin-bottom:4rem;
}
.section4-text .fresh {font-size:6.4rem;}
.section4-text .large {font-size:5.6rem;}

.img-pic4-1 {
  width:60rem;
  height: auto;
  display: block;
  margin: auto auto 8rem;}


/* ----------------------------------------
section 5
----------------------------------------*/
.section-5 h3 {
  line-height: 1.6;
  font-weight: bold;
  font-size:3rem;
  margin-bottom: 6rem;}
.section-5 h3 img {margin:4rem auto 2rem;}

/* table */
.section-5 table {
  width:98rem;
  margin: auto;
  border:0.3rem solid #5a5a5a;
  border-collapse: collapse;}

/* th */
.section-5 table th {
  width:21.5rem;
  font-weight: bold;
  font-size:1.8rem;
  border: 0.1rem solid #5a5a5a;
  padding: 1.5rem 0.5rem;
  text-align: center;}

.section-5 thead th {
  color: #fff;
  padding-top:4rem;
  border-bottom: 3px solid #5a5a5a;
  background: #6fcd52;
  position: relative;}

.section-5 tbody th {
  color: #000;
  border-right: 3px solid #5a5a5a;
  background: #dff398;}

.section-5 thead th img {
  display: block;
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 58%;}

.section-5 thead th img.icon_fleece {
  width: 5.2rem;
  height: auto;}

.section-5 thead th img.icon_sponge {
  width: 6.8rem;
  height: auto;
  bottom: 62%;}

.section-5 thead th img.icon_mouton {
  width: 5.1rem;
  height: auto;}

.section-5 thead th img.icon_micro {
  width: 6.4rem;
  height: auto;}

/* td */
.section-5 table td {
  border: 0.1rem solid #5a5a5a;
  width:calc((100% - 21.5rem) / 4);}

.section-5 table td.fleece_td {
  text-shadow: 0 0 0 black;
  font-size:2.2rem;}

.section-5 table tr:nth-child(even) td {background: #f8f8f8;}
.section-5 table tr:nth-child(odd) td {background: #e7f1e2;}

.section-5 table .blank {
  background: #c4d1b4;
  border: 3px solid #5a5a5a;
}


/* ----------------------------------------
section 6
----------------------------------------*/
.section-6 p.anatamo {
  font-size: 3.6rem;
  font-weight: bold;
  margin-bottom: 3rem;
}
.section-6 h3 {
  font-size:3rem;
  font-weight: bold;
  margin-bottom: 25rem;
  letter-spacing: 0.5rem;
}
.section-6 .fleece {
  font-size:7rem;
  font-family: "Noto Sans JP Black", "Noto Sans JP", sans-serif;
  font-weight: 900;
}
.section-6 .products_box {
  text-align: center;
  margin: 0 auto 5rem;
  padding-top: 5rem;}