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

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


/* ペンキ */
.js-paint {
  opacity: 1;
  transition: 0.2s;
  transform: scale(0);
}
.js-paint-in {
  opacity: 1;
  transition-delay: 0.3s;
  transform: scale(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);
}

/* ペンキ線 */
.js-paint-line {
  width: 100%;
  opacity: 1;
  transition: 0.3s;
  clip-path: inset(0 100% 0 0 );
  transform: scale(1);
}
.js-paint-line-in {
  opacity: 1;
  transition-delay: 0.3s;
  clip-path: inset(0);
}

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

.js-marker-in {
  background-size: 100% 100%;
}


/* check */
.pittari ul.pittari__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.9rem;
  height: 2.5rem;
  background: url(/products/alaunen/images/pittari-check.png);
  background-size: cover;
}
.pittari ul.pittari__list li.js-check-in::after {
  transition-delay: 0.3s;
  clip-path: inset(0);
}



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




/*html {
  scroll-behavior: smooth;
}*/

/*.main{
  overflow-x: hidden;
}*/

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

.contents,
.shampoo__products,
.cleaning-cloth__products,
.water-absorption__products {padding: 0 6rem;}

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

.c-inner figure {
  /*width: 98rem;
  margin: 0 auto 4.5rem;*/
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;}

.main figure img,
.main h3 img,
.main h4 img,
.main h5 img {display: block;}


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

.mv__inner {
  margin: 2rem 10rem;
  text-align: center;
}

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

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


/* ----------------------------------------
alaunen-logo
---------------------------------------- */
.c-inner figure.alaunen__logo,
.c-inner figure.alaunen__logo img{
  width:55.8rem;
  height: 21.1rem;
  margin: auto auto 4rem;
  position: relative;
  z-index: 2;
}


/* ----------------------------------------
link-btn
---------------------------------------- */
.link-btn {
  width: 28rem;
  margin: 0 auto;
}

.link-btn a {
  position: relative;
  min-height: 6.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 1rem 2rem 1rem 2rem;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.333;
  background-image: linear-gradient(90deg, #ee9623 0%, #eed570 50%, #ee9623 100%);
  background-position: 1% 50%;
  background-size: 200% auto;
  transition: 0.3s ease;
}

.link-btn a.hover {background-position: 99% 50%;}

.link-btn a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 3rem;
  width: 0.8rem;
  height: 0.8rem;
  border-top: 0.1rem solid #333;
  border-right: 0.1rem solid #333;
  transform: translateY(-50%) rotate(45deg);
}


/* ----------------------------------------
introduction-1
----------------------------------------*/
.introduction-1 {
  background: url("/products/alaunen/images/bg_intro1.png");
  overflow: hidden;
  padding:11rem 0 10rem;}


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

.main-introduction figure.main-introduction__photo,
.main-introduction figure.main-introduction__photo img {
  width:18.5rem;
  height: auto;
  margin: 0 auto 2rem;
}


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

.movie h2{
  font-size: 3.6rem;
  margin: 0 0 4rem 0;}

.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:22.5rem;
  height:5.9rem;  
  margin:0 auto 4.5rem;}

.movie__inner {z-index: 2;}
.movie__bg01 {
  position: absolute;
  width:21.5rem;
  height:21.5rem;
  top: -10rem;
  left: 8rem;}

.movie__bg02 {
  position: absolute;
  width:37.9rem;
  height:38.4rem;
  bottom: -3rem;
  left: -6rem;}

.movie__bg03 {
  position: absolute;
  width:35.4rem;
  height:34.1rem;
  bottom: -11rem;
  right: -1rem;}


/* ----------------------------------------
ボディもガラスも～
----------------------------------------*/
h3.intro2_ttl {
  position: relative;
}

h3.intro2_ttl img {
  width: 70.8rem;
  height: auto;
  margin:0 auto 4rem;}

h3.intro2_ttl img.effect-intro2_ttl {
  width: 21.5rem;
  height: 21.5rem;
  position: absolute;
  top: -70px;
  left: 0;
  right: 0;
  z-index: -1;
}

ul.intro2-img {
  width:98rem;
  display: flex;
  justify-content: space-between;
  margin: auto auto 8rem;}

ul.intro2-img li {width:45rem;}
ul.intro2-img li:first-child {
  position: relative;
}
ul.intro2-img li:first-child::after {
  content: "";
  position: absolute;
  width:3.6rem;
  height:3.6rem;
  background: url("/products/alaunen/images/introduction02-img_x.png");
  top: 0;
  bottom: 0;
  right: -5.8rem;
  left: auto;
  margin: auto;
}


ul.intro2-img li figure {width:45rem;}
ul.intro2-img li figcaption {
  color: #fff;
  font-size:1.8rem;
  background: #000;
  text-align: center;
  width: 100%;
  font-weight: bold;
  margin: 0;
  padding: 0.5rem 1rem;
}


/* ----------------------------------------
こんなのなかった新発想～
----------------------------------------*/
h3.intro3_ttl img {
  width: 54.2rem;
  height: auto;
  margin:0 auto 14rem;}


/* ピッタリ */
.pittari {
  width: 98rem;
  background: #fff8ac;
  border-radius: 1.5rem;
  padding:3.5rem 5rem 5rem;
  margin-bottom:8rem;
  position: relative;
}

.pittari h3.pittari__ttl {
  width: 46.8rem;
  min-height: 6.5rem;
  background: url(/products/alaunen/images/wash-bag_line.png) no-repeat;
  background-size: contain;
  background-position: bottom;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0;
  margin: auto auto 2.5rem;
}

.pittari h3.pittari__ttl img {
  width: 37.2rem;
  height: auto;
  margin:0 auto 4rem;
  position: absolute;
  top: 0;
}

.pittari ul.pittari__list li {
  font-size:2rem;
  font-weight: bold;
  text-align: left;
  margin-bottom:2.5rem;
  padding-left:4rem;
  position: relative;
}

.pittari ul.pittari__list li::before {
  content: "";
  position: absolute;
  left:0;
  top:0;
  border:2px solid #333;
  background: #fff;
  width:2.5rem;
  height: 2.5rem;
  border-radius:0.5rem;
}
.pittari .effect-pittari {
  position: absolute;
  width:17.5rem;
  height: 16.8rem;
  right: -10rem;
  bottom:-7rem;
  z-index: -1;
}


/* ----------------------------------------
2モード
----------------------------------------*/
.intro-2mode section {}

.c-inner.intro-2mode h3.intro-2mode__ttl img {
  width: 42.1rem;
  height: auto;
  margin:0 auto 4rem;
}

.c-inner.intro-2mode h4.intro-2mode__ttl2 img {
  height: 5rem;
  margin:0 auto 3rem;}

.c-inner.intro-2mode h5.intro-2mode__ttl3 img {
  height: 5.6rem;
  margin:0 auto 6rem;
  position: relative;
}

.c-inner.intro-2mode .intro-2mode__copy {
  position: relative; 
  margin:0 auto 5rem;
  height: 14.6rem;
}
.c-inner.intro-2mode .intro-2mode__copy img{
  height: 14.6rem;
  display: block;
  margin: auto;
}

.c-inner.intro-2mode h5.intro-2mode__ttl3 img.bachibachi-logo {
  position: absolute;
  top:-4rem;
  left:10rem;
  width:15.5rem;
  height:10rem;
}

/* effect */
.c-inner.intro-2mode .intro-2mode__copy img.effect-2mode-1-1 {
  position: absolute;
  z-index: -1;
  width:18.1rem;
  height: 18.4rem;
  top: -2rem;
  right: 20rem;
}
.c-inner.intro-2mode .intro-2mode__copy img.effect-2mode-1-2 {
  position: absolute;
  z-index: -1;
  width:21.5rem;
  height: 21.5rem;
  top: -3.5rem;
  left: 22rem;
}

.c-inner.intro-2mode .intro-2mode__copy img.effect-2mode-2-1 {
  position: absolute;
  z-index: -1;
  width:18.1rem;
  height: 18.4rem;
  top: -2.3rem;
  right: 23rem;}

.c-inner.intro-2mode .intro-2mode__copy img.effect-2mode-2-2 {
position: absolute;
  z-index: -1;
  width:18.4rem;
  height: 18.4rem;
    top: 1rem;
    left: 15rem;
}


/* 1column */
.intro-2mode ul.intro-2mode__img {
  margin: auto auto 8rem;}
.intro-2mode ul.intro-2mode__img figure {
  width:47rem;
  margin: auto;
}

.intro-2mode ul.intro-2mode__img figure figcaption {
  color: #fff;
  font-size:2.4rem;
  text-align: center;
  width: 100%;
  font-weight: bold;
  margin: 0;
  padding:1rem 0.5rem;
}

.intro-2mode ul.intro-2mode__img figure figcaption span {color:#ff0;}

.intro-2mode ul.intro-2mode__img li {
  position: relative;
  margin-bottom: 6rem;
}
.intro-2mode ul.intro-2mode__img li::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 2.3rem solid transparent;
  border-left: 2.3rem solid transparent;
  border-top: 2.3rem solid #1e3e91;
  border-bottom: 0;
  margin: auto;
  left: 0;
  right: 0;
  top: auto;
  bottom: -4.3rem;
}

.intro-2mode ul.intro-2mode__img li:last-child {margin-bottom:7.5rem;}
.intro-2mode ul.intro-2mode__img li:last-child::after {content: none;}


/* 2column */
.intro-2mode ul.intro-2mode__img2 {
  width:98rem;
  display: flex;
  justify-content: space-between;
  margin: auto auto 10rem;}



/* 2モード-モード1 */
.intro-2mode__mode-1 {}
.intro-2mode__mode-1 ul.intro-2mode__img figure figcaption {background: #1e3e91;}

/* 2モード-モード2 */
.intro-2mode__mode-2 {}
.intro-2mode__mode-2 ul.intro-2mode__img figure figcaption {background: #dc0000;}
.intro-2mode__mode-2 ul.intro-2mode__img li::after {border-top: 2.3rem solid #dc0000;}

/* 2モード-モードEX */
.intro-2mode__ex {
  background: url("/products/alaunen/images/bg_perfect.png");
  background-size: 100% auto;
  border-radius: 1.5rem;
  padding:4rem 4rem 8rem;
  position: relative;
}

.intro-2mode__ex ul.intro-2mode__img {
  width:88.2rem;
  display: flex;
  justify-content: space-between;
  margin: auto auto 6rem;
}
.intro-2mode__ex ul.intro-2mode__img li::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 2.3rem solid transparent;
  border-bottom: 2.3rem solid transparent;
  border-left: 2.3rem solid #eec600;
  border-right: 0;
  margin: auto;
  left: auto;
  right: -3.3rem;
  top: 0;
  bottom: 0;
}

.intro-2mode__ex ul.intro-2mode__img figure {width:42rem;}
.intro-2mode__ex ul.intro-2mode__img figure figcaption {
  width:42rem;
  padding:0.5rem;
  font-size:1.8rem;
}

.intro-2mode__ex ul.intro-2mode__img {}
.intro-2mode__ex ul.intro-2mode__img li,
.intro-2mode ul.intro-2mode__img li:last-child {margin-bottom: 0;}
.intro-2mode__ex ul.intro-2mode__img li:first-child figure figcaption {background: #1e3e91;}
.intro-2mode__ex ul.intro-2mode__img li:last-child figure figcaption {margin-bottom:0;background: #dc0000;}

.c-inner.intro-2mode .intro-2mode__copy2 img{
  height: 11.6rem;
  margin:0 auto 5rem;
}

.intro-2mode__ex figure.intro-2mode__img2 {
  margin: auto;
  width:47rem;
  margin-bottom:2rem;
}

.effect_2mode-ex {
  position: absolute;
  width:25.7rem;
  height:24.3rem;
  bottom:-6rem;
  right:-8rem;
  z-index: -1;
}



/* ----------------------------------------
introduction-2
----------------------------------------*/
.introduction-2,
.shop {
  background: url("/products/alaunen/images/bg_intro2.png");
  overflow: hidden;
  padding-bottom: 28rem;
}


/* ----------------------------------------
アンカー
----------------------------------------*/
.introduction-2 h3.introduction2__ttl2 {
  width:100%;
  background: #fff6d3;
  border-top:1rem solid #8b6d00;
  border-bottom:1rem solid #8b6d00;
  position: relative;
  margin-bottom:7rem;
}

.introduction2__ttl2.js-arrow.js-arrow-in::after,
.introduction-2 h3.introduction2__ttl2::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 22px solid transparent;
  border-left: 22px solid transparent;
  border-top: 55px solid #8b6d00;
  border-bottom: 0;
  position: absolute;
  top: auto;
  left: 0;
  right: 0;
  margin: auto;
}

.introduction-2 h3.introduction2__ttl2 img {
  width:62.4rem;
  height: auto;
  margin:3rem auto;
  position: relative;
}

/* features__box */
div.features__box {
  max-width: 88.2rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin: auto auto 6rem;
  position: relative;}

div.features__box figure {z-index: 2;}

/* photo */
div.features__box figure.features__shampoo,
div.features__box figure.features__cleaning-cloth,
div.features__box figure.features__water-absorption,
div.features__box figure.features__wash-bag,
div.features__box figure.features__brush{
  width:60rem;
  margin-right: 0;
}

div.features__box figure.features__shampoo img,
div.features__box figure.features__cleaning-cloth img,
div.features__box figure.features__water-absorption img,
div.features__box figure.features__wash-bag img,
div.features__box figure.features__brush img {
  width:100%;
  height: auto;}

div.features__box figure figcaption {
  font-size:2.4rem;
  font-weight: bold;
  color:#fff;
  margin:0;
  padding: 0.5rem 0.5rem 0.6rem;
}

figure.features__shampoo figcaption {background: #ff0666;}
figure.features__cleaning-cloth figcaption {background: #40ba00;}
figure.features__water-absorption figcaption {background: #ab3dc1;}
figure.features__wash-bag figcaption {background: #22b6bc;}
figure.features__brush figcaption {background: #d300ba;}


/* ancher */
div.features__box figure.anchor__shampoo,
div.features__box figure.anchor__cleaning-cloth,
div.features__box figure.anchor__water-absorption,
div.features__box figure.anchor__wash-bag,
div.features__box figure.anchor__brush {
  width: 25rem;}

div.features__box figure.anchor__shampoo a,
div.features__box figure.anchor__cleaning-cloth a,
div.features__box figure.anchor__water-absorption a,
div.features__box figure.anchor__wash-bag a,
div.features__box figure.anchor__brush a {
  position: relative;
  width: 25rem;
  margin: 2rem 0 0 3rem;}

div.features__box figure.anchor__shampoo a img.anchor__photo {
  transition: all 0.2s ease-out;
  width:23.5rem;
  height: auto;
  margin:auto;}

div.features__box figure.anchor__cleaning-cloth a img.anchor__photo {
  transition: all 0.2s ease-out;
  width:18.4rem;
  height: auto;
  margin:auto;}

div.features__box figure.anchor__water-absorption a img.anchor__photo {
  transition: all 0.2s ease-out;
  width:18.5rem;
  height: auto;
  margin:auto;}

div.features__box figure.anchor__wash-bag a img.anchor__photo {
  transition: all 0.2s ease-out;
  width:20.7rem;
  height: auto;
  margin:auto;}

div.features__box figure.anchor__brush a img.anchor__photo {
  transition: all 0.2s ease-out;
  width:25.2rem;
  height: auto;
  margin:auto;}


div.features__box figure.anchor__shampoo a.hover img.anchor__photo,
div.features__box figure.anchor__cleaning-cloth a.hover img.anchor__photo,
div.features__box figure.anchor__water-absorption a.hover img.anchor__photo,
div.features__box figure.anchor__wash-bag a.hover img.anchor__photo,
div.features__box figure.anchor__brush a.hover img.anchor__photo {
  transform:scale(1.1,1.1);}

/* right_effect */
div.features__box figure.anchor__shampoo a img.effect__anchor,
div.features__box figure.anchor__cleaning-cloth a img.effect__anchor,
div.features__box figure.anchor__water-absorption a img.effect__anchor,
div.features__box figure.anchor__wash-bag a img.effect__anchor,
div.features__box figure.anchor__brush a img.effect__anchor {
  position: absolute;
  width:23.5rem;
  height:22.9rem;
  z-index: -1;
  bottom:0;
  left: 0;
}

img.effect-introduction__shampoo {
  position: absolute;
  bottom: 4rem;
  left: -8rem;
  width:18.3rem;
  height:18.3rem;}

img.effect-introduction__cleaning-cloth {
  position: absolute;
  bottom: 4rem;
  left: -9.5rem;
  width:19.5rem;
  height:18.4rem;}

img.effect-introduction__water-absorption {
  position: absolute;
  bottom: 0.5rem;
  left: -9.8rem;
  width:18.1rem;
  height:18.4rem;}

img.effect-introduction__wash-bag {
  position: absolute;
  bottom: 0.5rem;
  left: -9.8rem;
  width:18.1rem;
  height:18.4rem;}


img.effect-introduction__brush {
  position: absolute;
  bottom: 0.5rem;
  left: -9.8rem;
  width:18.1rem;
  height:18.4rem;}


/* ----------------------------------------
products__box
----------------------------------------*/
.products__box {margin: 15rem auto 16rem;}

.products__box .c-inner {
  width:98rem;
  position: relative;
  border:0.2rem solid #000;
  background: #fff;
  box-shadow:0.2rem 0.2rem 0 0.4rem rgba(0, 0, 0, 1);
  border-radius: 0.2rem;
}

.products__box .c-inner figure.products__img {
  display: block;
  position: relative;
  top:-6rem;
  margin: 0 auto;
  z-index: 2;
  height:40rem;
}

.products__box .c-inner figure.products__name {
  margin:0 auto 4rem;
  position: relative;
  z-index: 2;
  top:-6rem;
}
.products__box .c-inner figure.products__name img{
  height: 14.7rem;
  width:auto;
  display: block;
  margin: auto;}

.products__box img.products__effect01 {
  position: absolute;
  left:5rem;
  top:17rem;
  width:28.1rem;
  height: auto;}

.products__box img.products__effect02 {
  position: absolute;
  right:9rem;
  top:3.6rem;
  width:16.8rem;
  height: auto;
  opacity: 0.5;}

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

/* .introduction-1 products__box */
.introduction-1 .products__box {margin: 10rem auto 6rem;}
.introduction-1 .products__box .c-inner figure.products__img {
  display: block;
  position: relative;
  top:-10rem;
  margin: 0 auto;
  z-index: 2;
  height:41.7rem;
}
.introduction-1 .products__box .c-inner figure.products__name {
  margin:0 auto 4rem;
  position: relative;
  z-index: 2;
  top:0;
}
.introduction-1 .products__box .c-inner figure.products__name img{
  height: 14.7rem;
  width:auto;
  display: block;
  margin: auto;}

.introduction-1 .products__box img.products__effect01,
.introduction-1 .products__box img.products__effect02 {z-index: -1;}


/* ----------------------------------------
common
----------------------------------------*/
/*ttl周り*/
h2.shampoo_ttl figure,
h2.cleaning-cloth_ttl figure,
h2.water-absorption_ttl figure,
h2.wash-bag_ttl figure,
h2.brush_ttl figure {
  position: relative;
  z-index: 2;}

h2.shampoo_ttl figure img,
h2.cleaning-cloth_ttl figure img,
h2.water-absorption_ttl figure img,
h2.wash-bag_ttl figure img,
h2.brush_ttl figure img {
  height:11.2rem;
  width: auto;
  margin: auto;
}

img.effect__ttl {
  width:12.6rem;
  height:12.2rem;
  position: absolute;
  top:calc(50% - 6.1rem);
  left:calc(50% - 42rem);}

h5.ttl__mode {margin:0 auto 2.5rem;}


/* figure */
.shampoo .c-inner figure,
.cleaning-cloth .c-inner figure,
.water-absorption .c-inner figure,
.wash-bag .c-inner figure,
.brush .c-inner figure {
  width: 98rem;
  margin: 0 auto 4.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.shampoo .c-inner figure img,
.cleaning-cloth .c-inner figure img,
.water-absorption .c-inner figure img,
.wash-bag .c-inner figure img,
.brush .c-inner figure img {
  width: 47rem;
  height: auto;
  margin-bottom: 3rem;
}

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

.c-inner figure.single-photo {
  display: block;
  margin: 0 auto 8rem;}
.c-inner figure.single-photo img {
  width:60rem;
  display: block;
  margin: auto;
}

.c-inner figure.column3-photo {
  width: 98rem;
  margin: 0 auto 4.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;}
.c-inner figure.column3-photo img {
  width:32rem;
  display: block;
  margin: 0;
}


.c-inner p.txt__copy,
.c-inner p.txt__copy2,
.c-inner figcaption {
  text-align: center;
  width:100%;
  font-size:2.4rem;
  font-weight: bold;
  margin: 0 auto 2rem;
}

.c-inner p.txt__copy span,
.c-inner p.txt__copy2 span{
  font-size: 1.4rem;
  margin-top: 1rem;
  display: block;
}

.c-inner figure.photo-s {
  position: relative;
  margin: 0 auto 8rem;
}
.c-inner figure.photo-s::after {
  content: "";
  width:32rem;
  margin:0;
  position: relative;}

.c-inner figure.photo-s img{
  width: 47rem;
  height: auto;
  margin-bottom: 4rem;
}

.c-inner figure.photo-s figcaption{
  width: 32rem;
  margin: 0;
  font-size: 1.8rem;
  text-align: left;
  font-weight: normal;
  text-indent: -1em;
  padding-left: 1em;
  display: flex;
  align-items: end;
}


.c-inner h4.mode,
.c-inner h4.mode img{
  margin: 0 auto 4.5rem;
  width:98rem;}

.c-inner h5.mode2,
.c-inner h5.mode2 img{
  margin: 0 auto 2.5rem;
  height:4rem;
  width: auto;}


.shampoo .products__box .c-inner figure.products__name img,
.cleaning-cloth .products__box .c-inner figure.products__name img,
.water-absorption .products__box .c-inner figure.products__name img,
.wash-bag .products__box .c-inner figure.products__name img,
.brush .products__box .c-inner figure.products__name img,
.shampoo .products__box .c-inner h2,
.cleaning-cloth .products__box .c-inner h2,
.water-absorption .products__box .c-inner h2,
.wash-bag .products__box .c-inner h2,
.brush .products__box .c-inner h2 {
  height: 7rem;
  width: auto;
  display: block;
  margin: auto;
}


.shampoo .shop-btn,
.cleaning-cloth .shop-btn,
.water-absorption .shop-btn,
.wash-bag .shop-btn,
.brush .shop-btn {margin-top:-2rem;}





/* ----------------------------------------
shampoo
----------------------------------------*/
.shampoo {
  background: url("/products/alaunen/images/bg_shampoo.png");
  padding-bottom: 16rem;
  margin-top: -24rem;
  padding-top: 5rem;
  background-clip: content-box;
}

h2.shampoo_ttl {
  color:#fff;
  background: #fff;
  border-top:1rem solid #ff0666;
  border-bottom:1rem solid #ff0666;
  padding:4rem;
  text-align: center;
  margin-bottom: 6.5rem;
  position: relative;
}
.shampoo figure.products__img img,
.shampoo .products__box .c-inner figure.products__img img {
  width:15rem;
  height: auto;}

.c-inner figure.single-photo img.photo_img06 {width:40rem;height: auto;}


.c-inner figure.shampoo__main_copy ,
.c-inner figure.shampoo__main_copy img {
  width: 68.6rem;
  height: 11.1rem;
  margin: auto auto 5rem;
}


h3.shampoo__line {
  width:100%;
  min-height:12rem;
  color:#fff;
  font-size:3rem;
  font-weight: bold;
  background: url("/products/alaunen/images/shampoo_line.png") no-repeat;
  background-size: 100% 100%;
  padding: 3.5rem 5rem 3rem;
  margin: 0 auto 1rem;
}
h3.shampoo__line span {
  color:#fff;
  font-size:1.2rem;}


figure.shampoo__arrow {position: relative;}
figure.shampoo__arrow::after {
  content: "";
  display: block;
  position: absolute;
  left: calc(50% - 0.8rem);
  bottom: calc(50% - 3rem);
  width: 2.6rem;
  height: 1.8rem;
  border-style: solid;
  border-top: 1.3rem solid transparent;
  border-bottom: 1.3rem solid transparent;
  border-left: 1.8rem solid #df0666;
  border-right: 0;
}


.shampoo .products__box img.products__effect01 {
  position: absolute;
  left:5rem;
  top:17rem;
  width:28.1rem;
  height: auto;
  z-index: -1;}

.shampoo .products__box img.products__effect02 {
  position: absolute;
  right:9rem;
  top:3.6rem;
  width:16.8rem;
  height: auto;
  opacity: 0.5;
  z-index: -1;
}


/* ----------------------------------------
cleaning-cloth
----------------------------------------*/
.cleaning-cloth {
  background: url("/products/alaunen/images/bg_cleaning-cloth.png");
  padding-bottom: 16rem;
  margin-top: -24rem;
  padding-top: 5rem;
  background-clip: content-box;
}

h2.cleaning-cloth_ttl {
  background: #fff;
  border-top:1rem solid #73db00;
  border-bottom:1rem solid #73db00;
  padding:4rem;
  text-align: center;
  margin-bottom: 6.5rem;
  position: relative;
}

.cleaning-cloth .products__box .c-inner figure.products__img {top:-10rem;}

.cleaning-cloth figure.products__img img,
.cleaning-cloth .products__box .c-inner figure.products__img img {
  width:28.6rem;
  height: auto;}

.c-inner figure.cleaning-cloth__main_copy ,
.c-inner figure.cleaning-cloth__main_copy img {
  width: 93.7rem;
  height: 11.2rem;
  margin: auto auto 5rem;}

h3.cleaning-cloth__line {
  width:100%;
  min-height:12rem;
  color:#fff;
  font-size:3rem;
  font-weight: bold;
  background: url("/products/alaunen/images/cleaning-cloth_line.png") no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 5rem 3rem;
  margin: 0 auto 1rem;}


h4.ttl__kaiser-change {margin: 4rem auto 2.5rem;}
h6.sub-ttl__kaiser-change {
  width:98rem;
  margin: auto auto 1.5rem;
  font-size:2.4rem;
  color:#fff;
  background: #246a00;
  padding: 0.8rem;  }


.cleaning-cloth .products__box img.products__effect01 {
  position: absolute;
  right:5rem;
  left: auto;
  top:17rem;
  width:28.1rem;
  height: auto;
  z-index: -1;}

.cleaning-cloth .products__box img.products__effect02 {
  position: absolute;
  left:9rem;
  top:3.6rem;
  width:16.8rem;
  height: auto;
  opacity: 0.5;
  z-index: -1;}

.cleaning-cloth .c-inner figure.photo-s img {
    width: 32rem;
    height: auto;
    margin-bottom: 1rem;
}


/* ----------------------------------------
water-absorption
----------------------------------------*/
.water-absorption {
  background: url("/products/alaunen/images/bg_water-absorption.png");
  padding-bottom: 16rem;
  margin-top: -24rem;
  padding-top: 5rem;
  background-clip: content-box;
}

h2.water-absorption_ttl {
  background: #fff;
  border-top: 1rem solid #ab3dc1;
  border-bottom: 1rem solid #ab3dc1;
  padding: 4rem;
  text-align: center;
  margin-bottom: 6.5rem;
  position: relative;
}

.water-absorption .products__box .c-inner figure.products__img {top:-10rem;}

.water-absorption figure.products__img img,
.water-absorption .products__box .c-inner figure.products__img img {
  width:28.6rem;
  height: auto;}

.c-inner figure.water-absorption__main_copy,
.c-inner figure.water-absorption__main_copy img {
  width: 98.6rem;
  height: 11.6rem;
  margin: auto auto 5rem;
}


h3.water-absorption__line {
  width:100%;
  min-height:12rem;
  color:#fff;
  font-size:3rem;
  font-weight: bold;
  background: url("/products/alaunen/images/water-absorption_line.png") no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 5rem 3rem;
  margin: 0 auto 1rem;
}


figure.water-absorption__arrow {position: relative;}
figure.water-absorption__arrow::after {
  content: "";
  display: block;
  position: absolute;
  left: calc(50% - 0.8rem);
  bottom: -5.5rem;
  width: 3.5rem;
  height: 2.4rem;
  border-style: solid;
  border-top: 2.4rem solid #ab3dc1;
  border-left: 1.7rem solid transparent;
  border-right: 1.7rem solid transparent;
  border-bottom: 0;
}

h4.ttl__action-change {margin: 4rem auto 2.5rem;}
h5.ttl__ex {margin:0 auto 1rem;}
.c-inner figure.ex_photo {margin-bottom:4rem;}


/*超吸水パワーの秘密*/
.secret-box{
  width:60rem;
  position:relative;
  background:#ffff00;
  padding:2rem 2.5rem;
  border:0.5rem solid #ab3dc1;
  color:#FFF;
  margin: -2rem auto 8rem;
}
.secret-box:after,.secret-box:before{
    border: solid transparent;
    content:'';
    height:0;
    width:0;
    pointer-events:none;
    position:absolute;
    bottom:100%;
    left:50%;
}
.secret-box:after{
    border-top-width: 4rem;
    border-bottom-width: 4rem;
    border-left-width: 1.5rem;
    border-right-width: 1.5rem;
    margin-left: -1.5rem;
    border-bottom-color: #ffff00;
}
.secret-box:before{
   border-top-width: 5rem;
    border-bottom-width: 5rem;
    border-left-width: 2rem;
    border-right-width: 2rem;
    margin-left: -2rem;
    margin-bottom: 0.2rem;
    border-bottom-color: #ab3dc1;
}

.c-inner .secret-box figure,
.c-inner .secret-box figure img {
  width:26.7rem;
  height:14.6rem;
  margin: auto 2.5rem auto 0;}

.secret-box dl dt {
  font-size:3.4rem;
  font-weight: bold;
  color:#ab3dc1;
  margin-bottom:1.5rem;
}

.secret-box dl dd {
  text-align: left;
  display: flex;
}
.secret-box dl dd > div h4 {
  font-size:2rem;
  margin-bottom:2rem;
}
.secret-box dl dd > div p {font-size:1.6rem;}


.water-absorption .products__box img.products__effect01 {
  position: absolute;
  left:5rem;
  top:11rem;
  width:28.1rem;
  height: auto;
  z-index: -1;}
.water-absorption .products__box img.products__effect02 {
  position: absolute;
  right:9rem;
  top:3.6rem;
  width:16.8rem;
  height: auto;
  opacity: 0.5;
  z-index: -1;
}


/* ----------------------------------------
wash-bag
----------------------------------------*/
.wash-bag {
  background: url("/products/alaunen/images/bg_wash-bag.png");
  padding-bottom: 16rem;
  margin-top: -24rem;
  padding-top: 5rem;
  background-clip: content-box;
}

h2.wash-bag_ttl {
  background: #fff;
  border-top: 1rem solid #22b6bc;
  border-bottom: 1rem solid #22b6bc;
  padding: 4rem;
  text-align: center;
  margin-bottom: 6.5rem;
  position: relative;
}

.wash-bag figure.gorogoro {margin-bottom:2rem;}

.wash-bag figure.products__img img,
.wash-bag .products__box .c-inner figure.products__img img {
  width:28.6rem;
  height: auto;}


.c-inner figure.wash-bag__main_copy,
.c-inner figure.wash-bag__main_copy img {
  width: 65.8rem;
  height: 17.2rem;
  margin: auto auto 5rem;
}


h3.wash-bag__line {
  width:100%;
  min-height:12rem;
  color:#fff;
  font-size:3rem;
  font-weight: bold;
  background: url("/products/alaunen/images/wash-bag_line.png") no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 5rem 3rem;
  margin: 0 auto 1rem;
}


.wash-bag figure.products__img img,
.wash-bag .products__box .c-inner figure.products__img img {
  width:auto;
  height: 37rem;}

.wash-bag .products__box img.products__effect01 {
  position: absolute;
  left:5rem;
  top: 4rem;
  width:28.1rem;
  height: auto;
  z-index: -2;
}

.wash-bag .products__box img.products__effect02 {
  position: absolute;
  right:9rem;
  top: 23rem;
  width:16.8rem;
  height: auto;
  opacity: 0.5;
  z-index: -2;
}


/* ----------------------------------------
brush
----------------------------------------*/
.brush {
  background: url("/products/alaunen/images/bg_brush.png");
  padding-bottom: 16rem;
  margin-top: -24rem;
  padding-top: 5rem;
  background-clip: content-box;
}

h2.brush_ttl {
  background: #fff;
  border-top: 1rem solid #ab3dc1;
  border-bottom: 1rem solid #ab3dc1;
  padding: 4rem;
  text-align: center;
  margin-bottom: 6.5rem;
  position: relative;
}


.brush figure.products__img img,
.brush .products__box .c-inner figure.products__img img {
  width:28.6rem;
  height: auto;}

.c-inner figure.brush__main_copy,
.c-inner figure.brush__main_copy img {
  width: 72.1rem;
  height: 17rem;
  margin: auto auto 5rem;
}


h3.brush__line {
  width:100%;
  min-height:12rem;
  color:#fff;
  font-size:3rem;
  font-weight: bold;
  background: url("/products/alaunen/images/brush_line.png") no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 5rem 3rem;
  margin: 0 auto 1rem;
}



ul.brush-img {
  width:98rem;
  display: flex;
  justify-content: space-between;
  margin: auto;}

ul.brush-img li {width:47rem;}

ul.brush-img li figure {width:47rem !important;}
ul.brush-img li figcaption {
  color: #fff;
  font-size:1.8rem;
  background: #d300ba;
  text-align: center;
  width: 100%;
  font-weight: bold;
  margin: 0;
  padding: 0.5rem 1rem;
}


.brush .c-inner figure.photo-s img {
  width: 32rem;}


.brush figure.products__img img,
.brush .products__box .c-inner figure.products__img img {
  width:auto;
  height: 37rem;}

.brush .products__box img.products__effect01 {
  position: absolute;
  left:5rem;
  top:6rem;
  width:16.8rem;
  height: auto;
  opacity: 0.5;
  z-index: -2;
  }
.brush .products__box img.products__effect02 {
  position: absolute;
  right:9rem;
  top:11.6rem;
  width:28.1rem;
  height: auto;
  opacity: 1;
  z-index: -2;
}


/* ----------------------------------------
shop
----------------------------------------*/
.shop {
  padding-bottom: 4rem;
  margin-top: -16rem;}

/* mv */
.shop .mv {
  overflow-x: hidden;
  position: relative;
}
.shop .mv__img {
  height: 100%;
  padding-bottom:0;
  line-height: 0;
  margin: 0 auto 6rem;
}
.shop .mv__img img {
  width: 100%;
  height: auto;
}

.shop .shop__main {width:100%;}
.shop h3.txt__shop figure,
.shop h3.txt__shop figure img {
  margin: auto auto 3.5rem;
  display: block;}


/* logo */
.shop .c-inner figure.alaunen__logo,
.shop .c-inner figure.alaunen__logo img{margin: auto auto 9rem;}


/* container */
.shop__products-box .c-inner {
  width:98rem;
  border:0.1rem solid #000;
  background: #fff;
  box-shadow:0.2rem 0.2rem 0 0.4rem rgba(0, 0, 0, 1);
  border-radius: 2rem;
  margin-bottom:8rem;
  position: relative;
}

.shop__products-box .c-inner img.shop__effect {
  position: absolute;
  top:calc(50% - 13.5rem);
  left:0.5rem;
  width:27.9rem;
  height:27rem;
}


.shop__products-box .c-inner dl {
  display: flex;
  justify-content: space-between;
  z-index: 2;
  position: relative;
}

.shop__products-box .c-inner dt {width:51rem;}


.shop__products-box .c-inner dd.shop-btn {
  width:46rem;
  padding:6.5rem 9rem 3.5rem 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.shop__products-box .c-inner figure,
.shop__products-box .c-inner figure img {
  width: auto;
  margin: auto;
}

.shop__products-box figure.shop__photo--shampoo img {
  width:15.6rem;
  height: auto;
  margin: -3rem auto 2.5rem;}

.shop__products-box figure.shop__photo--cleaning-cloth img,
.shop__products-box figure.shop__photo--water-absorption img {
  width:24rem;
  height: auto;
  margin: 4rem auto 2.5rem;}

.shop__products-box figure.shop__photo--bachibachi img {
  width:16.1rem;
  height: auto;
  margin: -4rem auto 2.5rem;}

.shop__products-box figure.shop__photo--wash-bag img {
  width:20.1rem;
  height: auto;
  margin: 3.5rem auto 2.5rem ;}

.shop__products-box figure.shop__photo--brush img {
  width:15.1rem;
  height: auto;
  margin: -3rem auto 2.5rem;}



.shop__products-box .c-inner figure.products__name,
.shop__products-box .c-inner figure.products__name img {height:7rem;}

.shop__products-box .c-inner figure.products__name--bachibachi,
.shop__products-box .c-inner figure.products__name--bachibachi img {height:11.9rem;}




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





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