@charset "UTF-8";

/* -------------------------------------------------------- */
/* -------------------------------------------------------- */
/* -------------------------------------------------------- */

 /* 丸囲み文字_青 */
 .cirBlue, .cirBlue_two{
  display: block;
  color: var(--white);
  background-color: var(--main-c);
  text-align: center;
  border-radius: 50%;
  font-size: var(--font30);
  font-weight: 500;
  margin-bottom: 2rem;
  }
.cirBlue{padding: 8.5rem 0;}
.cirBlue_two{padding: 7.5rem 0;}
/* ------------------------------------------*/
 /* 見出し ワックス */
#content__sub_wax h3, #wax_flow h3, #wax_price h3,
#content__sub_durable, #durable_features h3,
#durable_flow h3, #durable_price h3{
    color: var(--gray);
    text-align: center;
    line-height: 3.5rem;
}
#content__sub_wax h3 span,
#content__sub_durable h3 span{
    color: var(--main-c);
    font-size: var(--font-xl);
    display: block;
}

#wax_flow h3,#wax_price h3,
#durable_features h3,
#durable_flow h3, #durable_price h3{
  font-size: var(--font-xl);
  padding-top: 8rem;
}


/* ------------------------------------------*/
 /*    */
.wax_more{
  background-color: var(--main-c);
  padding:3rem 0;
}
.wax_more p{
  text-align: center;
  letter-spacing: 0.1rem;
  color: var(--white);
  font-size: var(--font-sl);
  font-weight: 500;
  line-height: 2.5rem;
}
.wax_more img{width: 90px;margin: 0 2rem;}
 /*◎751〜900の間の幅*/
@media screen and (min-width: 751px) and (max-width: 900px){
.wax_more img{width: 8vw;margin: 0 0 1rem 0}
}

.wax_more span{
  font-weight: 800;
  letter-spacing: 0.3rem;
  color: var(--yellow);
  font-size: var(--font30);
  margin: 0 0.3rem;
}

/* ------------------------------------------*/
/*  サービスの流れ  */
/*  背景  */
#wax_flow,
#durable_features{
  width: 100%;
  background: url("../img/bg_02.png") no-repeat top center/100%;
  background-color: rgb(193, 231, 247);
}

/*  流れ  */
.box_flow{margin: 3rem auto 3.5rem auto;}


.step{
  background-color: var(--white);
  padding: 1rem;
  border-radius: var(--r15);
  display: flex;
  filter: drop-shadow(0 0 5px rgb(0, 0, 0, 0.3));/*影*/
}

.step{margin-bottom: 1.5rem;}


 .step_h{
  background-color: var(--main-c);
  width: 10%;
  text-align: center;
  color: var(--white);
  border-radius: var(--r1);
  margin-right: 1rem;
  position: relative;
}
.step_h p{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:100%;
}
.step_h p span{
  display: block;
  font-size: var(--font30);
  font-weight: 600;
  padding-bottom: 0.5rem;
 }

.step_txtBox h5 {
  font-size: var(--font-sl);
  margin-top: 0.3rem;
  color: var(--main-c);
}
.step_txtBox h6 {
  font-size: var(--font-m);
  margin-top: 0.3rem;
  margin-bottom: 0.5rem;
  color: var(--main-c);
}
.step_txtBox p {
  font-weight: 500;
  margin-top: 0.5rem;
  color: var(--main-c);
}

/* ------------------------------------------*/
 /*  価格一覧  */
.price_table{
  width: 100%;
  margin-top: 3rem;
  margin-bottom: 2rem;
}
.price_table th{
  background-color: var(--main-d);
  color: var(--white);
  font-weight: 500;
}
.price_table th, .price_table td{
  padding: 0.8rem 0;
  border: solid 1px var(--gray);
  font-weight: 500;
}
.price_table td:last-child{padding-left: 2em;}
.price_table td:nth-last-child(2){
  text-align: center;
  background-color:#f3f8f8;
  width: 25vw;
}

.price_table td span{font-size: var(--font-sl);}

/* 利用注意リスト */
.note{
  margin:1.5rem auto 5rem auto;
  padding-bottom: 2rem;
  border-bottom: solid 1px var(--gray);
}
.note li{line-height: 1.7rem;}

/* ------------------------------------------*/
 /*  デュラブル  */

.durable__heading{
  margin-top: -10rem;
    z-index: 10;
}
/* ----------------------------------------- */
/* 背景動く文字 */
#content__sub_durable{
    position: relative;
    overflow: hidden;
    background: linear-gradient(rgb(214, 241, 255),rgb(193, 231, 247));
    z-index: -10;
  }
  .loop_wrap_durable {
      display: flex;
      width: 100%;
      overflow: hidden;
    }

  .loop_wrap_durable div {
      flex: 0 0 auto;
      white-space: nowrap;
      font-size: 380px;
      height:300px;
      overflow: hidden;
      color: rgb(255,255,255,0.15);
      font-family:"Roboto Condensed";
      font-weight: 600;
      padding-top: 6rem;
      z-index: -5;
    }


  .loop_wrap_durable div:nth-child(odd) {animation: loop 80s -40s linear infinite;}
  .loop_wrap_durable div:nth-child(even) {animation: loop2 80s linear infinite;}

  @keyframes loop {
      0% {transform: translateX(100%);}
      to {transform: translateX(-100%);}
    }

  @keyframes loop2 {
      0% {transform: translateX(0);}
      to {transform: translateX(-200%);}
    }
/* ----------------------------------------- */
/* 背景動く文字 */

.box__sub_top .item_durable{width: 340px;}


/* ----------------------------------------- */
/* 背景ストライプ */
.durable_more{
  background-color:var(--main-c);
  background-image: linear-gradient(45deg, rgba(181, 224, 245, 0.1) 25%, transparent 25%, transparent 50%, rgba(181, 224, 245, 0.1) 50%, rgba(181, 224, 245, 0.1) 75%, transparent 75%, transparent);
  background-size: 3rem 3rem;
}

.durable_more{padding:3rem 0;}
.durable_more p{
  width: 100%;
  text-align: center;
  letter-spacing: 0.1rem;
  color: var(--white);
  font-size: var(--font-ml);
  font-weight: 600;
  line-height: 2.5rem;
  letter-spacing: 0.15rem;
}
.durable_more p b,
.durable_more p span{
  font-size: var(--font-xl);
  font-weight: 600;
}
.durable_more p span{color: var(--yellow);}

/* 背景ストライプ */
.durable_more ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  margin: 2rem auto;
}
.durable_more ul li{
  width: 340px;
  background-color: var(--yellow);
  color: var(--main-c);
  font-weight: 600;
  display: block;
  border-radius: 1rem;
  line-height: 1.5rem;
}
.durable_more ul li:nth-child(1),.durable_more ul li:nth-child(2),
.durable_more ul li:nth-child(3),.durable_more ul li:nth-child(5){padding: 1rem 0;}
.durable_more ul li:nth-last-child(2){padding-top: 1.6rem;}

/* ----------------------------------------- */
/* デュラブルコーティングとは？ */
.about_durable{margin: 3rem auto 2rem auto;}
.about_durable p{
  background-color: var(--main-c);
  color: var(--white);
  font-weight: 600;
  text-align: center;
  padding: 1rem 0;
  width: 30vw;
  border-radius: 1rem;
  font-size: var(--font-sl);
  letter-spacing: 0.15rem;
  transition: 0.3s ease;
}
/*◎1600px以上*/
@media screen and (min-width: 1600px) {
  .about_durable p{width: 20vw;}
}
.iconPlus{width: 50px; height: 50px;}
.iconPlus{margin-top: 0.3rem;}

.box_features{
  background-color: var(--white);
  border-radius:var(--r15);
  border: solid 2px var(--main-c);
  margin-top: 3rem;
}
.box_features h5{
  background-color: var(--main-c);
  text-align: center;
  color: var(--white);
  font-size: var(--font30);
  font-weight: 600;
  letter-spacing: 0.2rem;
  padding: 0.8rem;
  border-radius: 1.3rem 1.3rem 0 0;
}
.wrap_features{width: 100%;padding: 2rem 2.3rem;}
.wrap_features img{margin-top: 6rem;}
.wrap_features .box{
  width: 43%;
  background-color: var(--main-el);
  padding: 2rem;
  border-radius: var(--r1);
}
 /*◎751〜900の間の幅*/
@media screen and (min-width: 751px) and (max-width: 900px){
.wrap_features{padding: 1.5rem;}
}

.wrap_features .box h6{
  background-color: var(--white);
  text-align: center;
  color: var(--main-c);
  font-weight: 600;
  padding: 1rem 0;
  border-radius: 0.6rem;
  font-size: var(--font-sl);
  margin-bottom: 1rem;
}

.box_arrow img{
  width: 16vw;
  margin: 1rem auto;
}
.box_arrow p{
  text-align: center;
  font-weight: 600;
  font-size: var(--font20);
  line-height: 2.3rem;
  letter-spacing: 0.15rem;
}
.box_arrow p span{
  color: var(--main-c);
  font-size: var(--font30);
}
.box_result{
  background-color: var(--yellow);
  text-align: center;
  padding: 1rem;
  border-radius: var(--r1);
  font-size: var(--font-ml);
  font-weight: 600;
  letter-spacing: 0.15rem;
  margin-top: 2rem;
}
/* ----------------------------------------- */
/* 施工の流れ・施工対象 */


/* 対象となる床材種類 */
.box_subject{
  width: 45vw;
  margin: 3rem auto;
}
.box_subject h6,
.box_subject .txt_around{text-align: center;}
.box_subject h6{
  width: 300px;
  background-color:var(--gray);
  color: var(--white);
  font-size: var(--font-sm);
  border-radius: 30px;
  margin: 0 auto -0.8rem auto;
  padding: 0.2rem 0;
  font-weight: normal;
  letter-spacing: 0.1rem;
}
.box_subject .txt_around{
  border-top: solid 1px var(--gray);
  border-bottom: solid 1px var(--gray);
  padding: 1.5rem 0 1rem 0;
  font-weight: 500;
  letter-spacing: 0.1rem;
}
.step_txtBox ul {
  margin-top: 0.5rem;
  line-height: 1.6rem;
}

.step_txtBox ul li:before {
    content:  "";     /* 空の要素作成 */
    width:  0.8rem; height:  0.8rem;
    display:  inline-block;
    background-color:var(--main-el);
    border-radius:  50%;
    margin-right: 0.3rem;
    text-indent: 1em;
}
/* ------------------------------------------*/
 /*    */
.step_more{
  background-color: var(--main-c);
  padding:2rem 0;
  border-radius: var(--r1);
  filter: drop-shadow(0 0 5px rgb(0, 0, 0, 0.3));/*影*/
  margin-bottom: 5rem;
}
.step_more p{
  text-align: center;
  letter-spacing: 0.2rem;
  color: var(--white);
  font-size: var(--font-sl);
  font-weight: 500;
  line-height: 2.5rem;
}
.step_more img{width: 90px;margin: 0 2rem;}
.step_more b{font-size: var(--font30);}
.step_more span{
color: var(--yellow);
margin: 0 0.3rem;
}

 /*◎751〜900の間の幅*/
@media screen and (min-width: 751px) and (max-width: 900px){
.step_more img{width: 8vw;margin: 0 0 1rem 0}
}