/* ===============================================### 
共通パーツ
###=============================================== */
.UU240626towel{
  --primary-color: #555;
  overflow: hidden;
}

html {
  font-size: 62.5%;
}

body {
  background-color: #E4E4E4;
}

.lp{
  padding-bottom: 0;
}

:where(.UU240626towel) img,
:where(.UU240626towel) svg {
  width: 100%;
  height: auto;
}

@media only screen and (min-width: 768px) and (max-width: 1600px) {
	html {
		font-size: calc(10 * (100vw / 1600)) !important;
	}
}

/* ===========### PC版用設定 ###=========== */
@media screen and (min-width: 767px) {
  .UU240626towel{
    --mv-width: 90rem;
    --content-width: 68.3rem;
  }
  .pc-visible{
    display: block;
  }

  .sp-visible{
    display: none;
  }
}

/* ===========### SP版用設定 ###=========== */
@media screen and (max-width: 767px) {
  .UU240626towel{
    --mv-width: calc(750 * 100vw / 750);
    --content-width: calc(660 * 100vw / 750);
  }

  .pc-visible{
    display: none;
  }

  .sp-visible{
    display: block;
  }
}

/* ===========### フォント ###=========== */
.UU240626towel .yu-gothic{
  font-family: var(--font-ja);
  font-feature-settings: "palt";
  font-weight: normal;
  font-weight: 400;
  color: var(--primary-color);
}

/* ===========### フェードアニメーション ###=========== */
.js-fade-up-trigger {
  transition-property: opacity, transform;
  transition-duration: 1.5s;
  opacity: 0;
  transform: translateY(1.5rem);
}
.js-fade-up {
  opacity: 1;
  transform: translateY(0);
}


/* ===============================================### 
MV
###=============================================== */
.mv{
  width: var(--mv-width);
  margin-inline: auto;
}

.UU240626towel .mv__image{
  width: 100%;
}

.UU240626towel .mv h2{
  margin-top: 7.8rem;
  font-weight: 400;
  text-align: center;
}

.UU240626towel .mv h2 p:first-child{
  font-size: 1.8rem;
  letter-spacing: 0.12em;
}

.UU240626towel .mv h2 p:last-child{
  margin-top: 2.7rem;
  font-size: 2.3rem;
  letter-spacing: 0.1em;
}

.UU240626towel .mv__text{
  margin-top: 3.3rem;
  font-size: 1.4rem;
  line-height: 2;
  letter-spacing: 0.085em;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .mv__image{
    width: 100%;
  }

  .UU240626towel .mv h2{
    margin-top: calc(80 * 100vw / 750);
  }

  .UU240626towel .mv h2 p:first-child{
    font-size: calc(30 * 100vw / 750);
    letter-spacing: 0.1em;
  }

  .UU240626towel .mv h2 p:last-child{
    margin-top: calc(28 * 100vw / 750);
    margin-left: calc(5 * 100vw / 750);
    font-size: calc(40 * 100vw / 750);
    line-height: 1.8;
  }

  .UU240626towel .mv__text{
    margin-top: calc(30 * 100vw / 750);
    margin-left: calc(3 * 100vw / 750);
    font-size: calc(24 * 100vw / 750);
    letter-spacing: 0.1em;
  }
};


/* ===============================================### 
section共通パーツ
###=============================================== */
.UU240626towel .content__box01,
.UU240626towel .content__box02{
  width: var(--content-width);
  margin-inline: auto;
}

/************** text **************/
.UU240626towel .section__title{
  text-align: left;
  font-weight: 400;
}

.UU240626towel .section__title p:first-child{
  font-size: 1.5rem;
  letter-spacing: 0.12em;
}

.UU240626towel .section__title p:last-child{
  margin-top: 1.7rem;
  font-size: 2rem;
  letter-spacing: 0.125em;
  white-space: nowrap;
}

/************** line **************/
.UU240626towel .decoration__line {
  display: block;
  position: relative;
  z-index: 1;
  margin-top: -1.6rem;
}

.UU240626towel .decoration__line.isActive:after {
  content: "";
  position: absolute;
  left: 0;
  /* top: 3.4rem; */
  bottom: 0;
  /* bottom: -1.4rem; */
  width: 0%;
  height: 0.075rem;
  background-color: #555;
  z-index: -1;
  animation: border_anime 1.8s ease forwards;
  animation-delay: 0.5s;
}
@keyframes border_anime {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

@media screen and (max-width: 767px) {
  /************** text **************/
  .UU240626towel .section__title p:first-child{
    font-size: calc(26 * 100vw / 750);
    letter-spacing: 0.12em;
  }

  .UU240626towel .section__title p:last-child{
    margin-top: calc(25 * 100vw / 750);
    font-size: calc(34 * 100vw / 750);
    letter-spacing: 0.125em;
  }

  /************** line **************/
  .UU240626towel .decoration__line {
    display: block;
    position: relative;
    z-index: 1;
    /* margin-top: calc(-19 * 100vw / 750); */
    /* margin-top: calc(-53 * 100vw / 750); */
    width: var(--content-width);
    margin-inline: auto;
  }

  .UU240626towel .decoration__line:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    /* top: calc(34 * 100vw / 750); */
    /* bottom: calc(-14 * 100vw / 750); */
    width: 0%;
    height: calc(0.75 * 100vw / 750);
    background-color: #555;
    z-index: -1;
    transition: all 3s;
  }
}

/* ===============================================### 
section01
###=============================================== */
.UU240626towel .section01{
  width: var(--content-width);
  margin-top: 12.9rem;
  margin-inline: auto;
}

/* ===========### content__box01 ###=========== */
.UU240626towel .section01 .content__box01{
  margin-top: 4rem;
}

.UU240626towel .section01 .content__box01 .content__item01,
.UU240626towel .section01 .content__box01 .content__item02{
  width: 31.6rem;
}

/* ===========### content__box02 ###=========== */
.UU240626towel .section01 .content__box02{
  margin-top: 7.2rem;
  margin-left: 0.2rem;
}

/************** flex **************/
.UU240626towel .section01 .text-wrapper .flex-wrapper{
  display: flex;
  align-items: end;
}

.UU240626towel .section01 .content__box01 .flex-wrapper{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  flex-direction: row;
}

.UU240626towel .section01 .content__box02 .flex-wrapper{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  flex-direction: row;
}

/************** text **************/
.UU240626towel .section01 .text-wrapper{
  padding-bottom: 1.8rem;
}

.UU240626towel .section01 .sub__text{
  width: 15.7rem;
  margin-left: 30.4rem;
  margin-bottom: 0.2rem;
}

.UU240626towel .section01 .content__text{
  margin-top: 3.8rem;
  font-size: 1.4rem;
  line-height: 2;
  letter-spacing: 0.07em;
  text-align: justify;
}

.UU240626towel .section01 .content__box02 .content__text{
  margin-top: 16.9rem;
  width: 31.9rem;
}

/************** firefox用設定 **************/
@-moz-document url-prefix() {
  .UU240626towel .section01 .sub__text{
    margin-left: 29.5rem;
  }
}

/************** image **************/
.UU240626towel .section01 .content__box02 .content__image{
  width: 31.6rem;
}

@media screen and (max-width: 767px) {
  .UU240626towel .section01{
    width: 100%;
    margin-top: calc(181 * 100vw / 750);
  }

  /* ===========### content__box01 ###=========== */
  .UU240626towel .section01 .content__box01{
    width: var(--content-width);
    margin-inline: auto;
    margin-top: calc(59 * 100vw / 750);
  }

  .UU240626towel .section01 .content__box01 .content__item01,
  .UU240626towel .section01 .content__box01 .content__item02{
    width: 100%;
  }

  .UU240626towel .section01 .content__box01 .content__item02{
    margin-top: calc(106 * 100vw / 750);
  }

  /* ===========### content__box02 ###=========== */
  .UU240626towel .section01 .content__box02{
    width: var(--content-width);
    margin-inline: auto;
    margin-top: calc(106 * 100vw / 750);
  }

  /*** flex ***/
  .UU240626towel .section01 .text-wrapper .flex-wrapper{
    display: flex;
    align-items: end;
  }

  .UU240626towel .section01 .content__box01 .flex-wrapper{
    flex-direction: column;
  }

  .UU240626towel .section01 .content__box02 .flex-wrapper{
    flex-direction: column;
  }

  /************** text **************/
  .UU240626towel .section01 .text-wrapper{
    margin-left: calc(44 * 100vw / 750);
    padding-bottom: calc(34 * 100vw / 750);
  }

  .UU240626towel .section01 .sub__text{
    width: calc(195 * 100vw / 750);
    margin-left: calc(90 * 100vw / 750);
    margin-bottom: calc(5 * 100vw / 750);
  }

  .UU240626towel .section01 .content__text{
    margin-top: calc(48 * 100vw / 750);
    font-size: calc(24 * 100vw / 750);
    letter-spacing: 0.07em;
  }

  .UU240626towel .section01 .content__box02 .content__text{
    width: 100%;
    margin-top: calc(48 * 100vw / 750);
  }

  /************** image **************/
  .UU240626towel .section01 .content__image a:hover{
    opacity: 1;
  }
  
  .UU240626towel .section01 .content__box02 .content__image{
    width: var(--content-width);
  }
}


/* ===============================================### 
section02
###=============================================== */
.UU240626towel .section02{
  width: var(--content-width);
  margin-inline: auto;
  margin-top: 13.6rem;
}

.UU240626towel .section02 .content__box01{
  margin-top: 4rem;
  margin-left: 0.2rem;
}

.UU240626towel .section02 .content__item01,
.UU240626towel .section02 .content__item02,
.UU240626towel .section02 .content__item03{
  width: 58.1rem;
}

.UU240626towel .section02 .content__item02{
  margin-top: 4.1rem;
}

.UU240626towel .section02 .content__item03{
  margin-top: 3.9rem;
}

/************** flex **************/
.UU240626towel .section02 .content__box01 .flex-wrapper{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  flex-direction: row;
}

.UU240626towel .section02 .content__item .flex-wrapper{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

/************** slide **************/
.UU240626towel .section02 .slide-wrapper{
  margin-left: 0.1rem;
}

/************** text **************/
.UU240626towel .section02 .section__title{
  padding-bottom: 1.9rem;
}

.UU240626towel .section02 .section__title p:last-child{
  letter-spacing: 0.135em;
}

.UU240626towel .section02 .content__text{
  width: 23.5rem;
  text-align: justify;
}

.UU240626towel .section02 .content__text h4{
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.12em;
}

.UU240626towel .section02 .content__text p{
  font-size: 1.4rem;
  line-height: 2;
}

.UU240626towel .section02 .content__text p:nth-child(2){
  letter-spacing: 0.05em;
}

.UU240626towel .section02 .content__text .caution__text{
  margin-top: 1.2rem;
  letter-spacing: 0.1em;
  font-size: 1.2rem;
}

/************** Safari用設定 **************/
_::-webkit-full-page-media, _:future, :root .UU240626towel .section02 .content__text h4{
  font-weight: 400;
}

_::-webkit-full-page-media, _:future, :root .UU240626towel .section02 .content__text p:nth-child(2),
_::-webkit-full-page-media, _:future, :root .UU240626towel .section02 .content__text .caution__text{
  font-weight: 400;
}

/************** item01 text微調整 **************/
.UU240626towel .section02 .content__item01 .content__text{
  margin-top: 1.29rem;
}

.UU240626towel .section02 .content__item01 .content__text h4{
  margin-left: -0.3rem;
}

.UU240626towel .section02 .content__item01 .content__text p:nth-child(2){
  margin-top: 1.5rem;
}

/************** item02 text微調整 **************/
.UU240626towel .section02 .content__item02 .content__text{
  margin-top: 2.19rem;
}
.UU240626towel .section02 .content__item02 .content__text h4{
  letter-spacing: 0.1em;
}

.UU240626towel .section02 .content__item02 .content__text p:nth-child(2){
  margin-top: 1.6rem;
}

.UU240626towel .section02 .content__item02 .caution__text{
  letter-spacing: 0.1em;
}

/************** item03 text微調整 **************/
.UU240626towel .section02 .content__item03 .content__text{
  margin-top: 4.39rem;
}

.UU240626towel .section02 .content__item03 .content__text h4{
  margin-left: -0.2rem;
}

.UU240626towel .section02 .content__item03 .content__text p:nth-child(2){
  margin-top: 1.6rem;
}

.UU240626towel .section02 .content__item03 .content__text p:last-child{
  margin-top: 1.4rem;
}

/************** image **************/
.UU240626towel .section02 .steps__image{
  width: 6rem;
}

.UU240626towel .section02 .content__image{
  width: 30rem;
}

@media screen and (max-width: 767px) {
  .UU240626towel .section02{
    width: 100%;
    margin-top: calc(178 * 100vw / 750);
  }

  .UU240626towel .section02 .content__box01{
    margin-top: calc(58 * 100vw / 750);
    margin-left: 0;
  }

  .UU240626towel .section02 .content__item02{
    margin-top: 0;
  }

  .UU240626towel .section02 .content__item03{
    margin-top: 0;
  }

  /************** flex **************/
  .UU240626towel .section02 .content__box01 .flex-wrapper{
    flex-direction: column-reverse;
    flex-wrap: nowrap;
  }

  /************** slide **************/
  .UU240626towel .section02 .slide-wrapper{
    margin-top: 0;
    margin-left: 0;
  }

  .UU240626towel .slick-slide{
    width: calc(600 * 100vw / 750);
  }

  .UU240626towel .slick-slide:nth-of-type(2){
    margin-inline: calc(60 * 100vw / 750);
  }

  .UU240626towel .slick-list.draggable{
    position: relative;
    left: calc(-30 * 100vw / 750);
    padding: 0!important;
    overflow: initial;
  }

  .UU240626towel .section02 .slide__item:first-of-type::before{
    content: "";
    display: block;
    width: calc(1524 * 100vw / 750);
    height: calc(8 * 100vw / 750);
    background-color: #fff;
    position: absolute;
    top: calc(26 * 100vw / 750);
    left: 0;
  }

  /************** text **************/
  .UU240626towel .section02 .section__title{
    margin-left: calc(43 * 100vw / 750);
    padding-bottom: calc(16 * 100vw / 750);
  }

  .UU240626towel .section02 .section__title p:first-child{
    letter-spacing: 0.125em;
  }

  .UU240626towel .section02 .section__title p:last-child{
    margin-top: calc(24 * 100vw / 750);
    margin-bottom: calc(19 * 100vw / 750);
  }

  .UU240626towel .section02 .content__text{
    width: fit-content;
    text-align: justify;
  }

  .UU240626towel .section02 .content__text h4{
    font-size: calc(30 * 100vw / 750);
    font-weight: 400;
    line-height: 1.75;
  }

  .UU240626towel .section02 .content__text p{
    font-size: calc(24 * 100vw / 750);
    line-height: 2;
  }

  .UU240626towel .section02 .content__text .caution__text{
    font-size: calc(20 * 100vw / 750);
    letter-spacing: 0.1em;
  }

  /************** item01 text微調整 **************/
  .UU240626towel .section02 .content__item01 .content__text{
    margin-top: calc(47 * 100vw / 750);
    letter-spacing: 0.55em;
  }

  .UU240626towel .section02 .content__item01 .content__text h4{
    margin-left: -0.3rem;
    letter-spacing: 0.18em;
  }

  .UU240626towel .section02 .content__item01 .content__text p:nth-child(2){
    width: calc(560 * 100vw / 750);
    margin-top: calc(34 * 100vw / 750);
    /* margin-right: calc(36 * (100vw / 750)); */
    letter-spacing: 0.07em;
  }

  .UU240626towel .section02 .content__item01 .content__text p:last-child{
    margin-top: calc(27 * 100vw / 750);
  }


  /************** item02 text微調整 **************/
  .UU240626towel .section02 .content__item02 .content__text{
    margin-top: calc(46 * 100vw / 750);
  }
  .UU240626towel .section02 .content__item02 .content__text h4{
    letter-spacing: 0.12em;
  }

  .UU240626towel .section02 .content__item02 .content__text p:nth-child(2){
    margin-top: calc(36 * 100vw / 750);
    margin-right: calc(36 * (100vw / 750));
    letter-spacing: 0.08em;
  }

  .UU240626towel .section02 .content__item02 .content__text p:last-child{
    margin-top: calc(26 * 100vw / 750);
    letter-spacing: 0.1em;
  }

  /************** item03 text微調整 **************/
  .UU240626towel .section02 .content__item03 .content__text{
    margin-top: calc(48 * 100vw / 750);
  }

  .UU240626towel .section02 .content__item03 .content__text h4{
    margin-left: calc(-2 * 100vw / 750);
    letter-spacing: 0.12em;
  }

  .UU240626towel .section02 .content__item03 .content__text p:nth-child(2){
    margin-top: calc(56 * 100vw / 750);
    margin-right: calc(36 * (100vw / 750));
    letter-spacing: 0.08em;
  }

  .UU240626towel .section02 .content__item03 .content__text p:last-child{
    margin-top: calc(34 * 100vw / 750);
    letter-spacing: 0.1em;
  }

  /************** image **************/
  .UU240626towel .section02 .steps__image{
    width: calc(204 * 100vw / 750);
    position: absolute;
    z-index: 1;
  }

  .UU240626towel .section02 .content__image{
    width: calc(600 * 100vw / 750);
    margin-top: calc(120 * 100vw / 750);
  }

  /************** scroll-bar **************/
  .UU240626towel .section02 .scroll-bar{
    height: calc(6 * 100vw / 750);
    background: #CCCCCC;
    line-height: 0;
    width: 88%;
    margin: calc(61 * 100vw / 750) auto 0;
    position: relative;
  }

  .UU240626towel .section02 .js-scroll-bar{    
    width: calc(220 * 100vw / 750);
    height: calc(6 * 100vw / 750);
    background: var(--primary-color);
    position: absolute;
    margin-top: 0;
    transition: 0.5s;
  }

  .UU240626towel .section02 .mousearea{
    position: absolute;
    top: calc(-9 * 100vw / 750);
    left: 0;
    width: 100%;
    height: calc(20 * 100vw / 750);
  }
}


/* ===============================================### 
link-area
###=============================================== */
.UU240626towel .link-area{
  margin-top: 11.9rem;
  margin-bottom: 11.7rem;
}

/************** image **************/
.UU240626towel .link-area .button__image{
  width: 44rem;
  margin-inline: auto;
}

@media screen and (max-width: 767px) {
  .UU240626towel .link-area{
    width: 100%;
    margin-top: calc(136 * 100vw / 750);
    margin-bottom: calc(68 * 100vw / 750);
  }

  /************** image **************/
  .UU240626towel .link-area .button__image{
    width: calc(540 * 100vw / 750);
    margin-inline: auto;
  }
}