@charset "UTF-8";

/* -------------------------------------------------------- */
 /* 丸囲み文字_青 */

 .cirBlue, .cirBlue_two{
  display: block;
  width: 80%;
  color: var(--white);
  background-color: var(--main-c);
  text-align: center;
   border-radius: 50%;
   font-size: var(--font-l);
   font-weight: 500;
   margin: 0 auto 2rem auto;
 }
.cirBlue{padding: 7rem 0;}
.cirBlue_two{padding: 6rem 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: 2.5rem;
}
#content__sub_wax h3 span,
#content__sub_durable h3 span{
    color: var(--main-c);
    font-size: var(--font-ml);
    display: block;
}

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


/* ------------------------------------------*/
 /*    */
.wax_more{
  background-color: var(--main-c);
  padding:1rem 0;
  display: flex;
  justify-content: center;
}
.wax_more p{
  text-align: center;
  color: var(--white);
  font-size: var(--font-m);
  font-weight: 500;
  line-height: 2rem;
}
.wax_more img{width: 8vw;margin: 2rem auto;}
.wax_more span{
  font-weight: 500;
  color: var(--yellow);
  font-size: var(--font-l);
}

/* ------------------------------------------*/
/*  サービスの流れ  */
/*  背景  */
#wax_flow,
#durable_features{
  width: 100%;
  background: url("../img/bg_02.png") no-repeat top center/100%;
  background-color: rgb(193, 231, 247);
}
/*  見出し下　テキスト  */
.txt_title{
  margin-top: 1rem;
  margin-bottom: 3rem;
  text-align: center;
}

/*  流れ  */
.box_flow{margin: 2rem auto 4rem auto;}


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

.step{margin-bottom: 1.5rem;}

 .step_h{
  background-color: var(--main-c);
  text-align: center;
  color: var(--white);
  border-radius:0.5rem;
  font-weight: 500;
  font-size: var(--font-m);
  padding: 0.3rem 0;
}
.step_h p span{
  font-size: var(--font-l);
  vertical-align: bottom;
}

.step_txtBox h5 {
  font-size: var(--font-sl);
  margin-top: 0.8rem;
  color: var(--main-c);
  text-align: center;
}
.step_txtBox h6 {
  font-size: var(--font-m);
  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-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);}

 /*  table横スクロール  */
 .scroll-asterisk{font-size: var(--font12);}
 .table-scroll{
  overflow-x: scroll;
  margin: 0 auto;
}
 .table-scroll .table {
  width: 800px;
  border-collapse: collapse;
  white-space: nowrap;
  margin: 0 auto;
}
.table-scroll .price_table{width: 800px;}
.table-scroll .price_table td:nth-last-child(2){
  width: 30%;
}
 /*◎751〜900の間の幅*/
@media screen and (min-width: 751px) and (max-width: 900px){
.price_table td:nth-last-child(2){
  padding: 0 1em;
  width: 40%;
}
}

/* 利用注意リスト */
.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: -12rem;
    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: 200px;
      height:300px;
      overflow: hidden;
      color: rgb(255,255,255,0.15);
      font-family:"Roboto Condensed";
      font-weight: 600;
      padding-top: 3rem;
      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{
  text-align: center;
  letter-spacing: 0.1rem;
  color: var(--white);
  font-size: var(--font-l);
  font-weight: 600;
  line-height: 2.5rem;
  letter-spacing: 0.15rem;
}
.durable_more p b,
.durable_more p span{
  font-size: var(--font-ml);
  font-weight: 600;
}
.durable_more p span{color: var(--yellow);}

/* 背景ストライプ　リスト */
.durable_more ul{margin: 2rem auto;}
.durable_more ul li{
  width: 90%;
  background-color: var(--yellow);
  color: var(--main-c);
  font-weight: 600;
  display: block;
  border-radius: 1rem;
  line-height: 1.5rem;
  margin: 0 auto;
  padding: 1rem;
  margin-bottom: 1rem;

}

/* ----------------------------------------- */
/* デュラブルコーティングとは？ */
.about_durable{
  margin: 3rem auto 2rem auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}
.about_durable p{
  background-color: var(--main-c);
  color: var(--white);
  font-weight: 600;
  text-align: center;
  padding: 1rem;
  border-radius: 1rem;
  font-size: var(--font-sl);
  letter-spacing: 0.15rem;
}

.iconPlus{width: 30px; height: 30px;}
.iconPlus{margin-top: 1rem;}

.box_features{
  background-color: var(--white);
  border-radius:var(--r1);
  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(--font-sl);
  font-weight: 600;
  padding: 0.8rem;
  border-radius: 0.8rem 0.8rem 0 0;
}
.wrap_features{width: 100%;padding: 1rem;}
.ctr{text-align: center; margin-bottom: 1rem;}
.wrap_features .box{
  background-color: var(--main-el);
  padding: 1rem;
  border-radius: var(--r1);
}
.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: 20vw;
  margin: 1rem auto;
}
.box_arrow p{
  text-align: center;
  font-weight: 600;
  font-size: var(--font20);
  line-height: 2.3rem;
}
.box_arrow p span{
  color: var(--main-c);
  font-size: var(--font-l);
}
.box_result{
  background-color: var(--yellow);
  text-align: center;
  padding: 1rem;
  border-radius: var(--r1);
  font-size: var(--font-sl);
  font-weight: 600;
  margin-top: 1rem;
}
/* ----------------------------------------- */
/* 施工の流れ・施工対象 */


/* 対象となる床材種類 */
.box_subject{
  width: 90%;
  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: 3rem;
  display: flex;
  justify-content: center;
}
.step_more p{
  text-align: center;
  color: var(--white);
  font-size: var(--font-m);
  font-weight: 500;
  line-height: 2rem;
}
.step_more img{width: 8vw; margin: 2rem auto;}
.step_more b{
  font-size: var(--font-l);}
.step_more span{
color: var(--yellow);
margin: 0 0.3rem;
}