/* =======================================================
*
* 	Style Build by HSS 
*
* ======================================================= */
html {
  scroll-behavior: smooth;
}

body > section,
.footer {
	padding: 70px 0;
}

.v_button01 {
  padding: 3px 23px;
  display: inline-block;
  background-color:#ff6347;
  color: #fff;
  transition: 1s;
  text-align: center;
  line-height: 50px;
 }
 .v_button01:hover{
    transform: scale(1.1, 1.1);
 }
 
 .v_button02 {
   padding: 3px 23px;
   display: inline-block;
   background-color:#333;
   color: #fff;
   border: solid 1px #333;
   transition: 0.5s;
   text-align: center;
   line-height: 50px;
 }
 .v_button02:hover{
   background-color:#fff;
   color: #333;
 }
 
 .v_button03 {
   padding: 3px 23px;
   display: inline-block;
   background-color:#191970;
   color: #fff;
   transition: 0.5s;
   text-align: center;
   line-height: 50px;
 }
 .v_button03:hover{
   opacity: 0.6;
 }
 
 .v_button04 {
   padding: 2px 16px;
   display: inline-block;
   background-color:#ff6347;
   transition: 1s;
   text-align: center;
   line-height: 30px;
   font-size: 1.2em;
   font-weight: bold;
   color: whitesmoke;
  }
  .v_button04:hover{
     transform: scale(1.1, 1.1);
  }
 
  .v_button05 {
   padding: 3px 23px;
   display: inline-block;
   background-color:#006400;
   color: #fff;
   transition: 0.5s;
   text-align: center;
   line-height: 50px;
 }
 .v_button05:hover{
   opacity: 0.6;
 }
 
 .v_button06 {
   padding: 3px 23px;
   display: inline-block;
   background-color:#483d8b;
   color: #fff;
   transition: 0.5s;
   text-align: center;
   line-height: 50px;
 }
 .v_button06:hover{
   opacity: 0.6;
 }
 
 .v_button021 {
  width: 18em;
  height:3em;
  display: inline-block;
  background-color:#4169e1;
  color: #fff;
  border: solid 1px #4169e1;
  transition: 0.5s;
  text-align: center;
  line-height: 50px;
}
.v_button021:hover{
  background-color:#a9a9a9;
  color: #fff;
}
.v_button021:link, .v_button021:active, .v_button021:visited { color:#fff; text-decoration:none }

.v_button022 {
  width: 18em;
  height:3em;
  display: inline-block;
  background-color:#0000cd;
  color: #fff;
  border: solid 1px #0000cd;
  transition: 0.5s;
  text-align: center;
  line-height: 50px;
}
.v_button022:hover{
  background-color:#a9a9a9;
  color: #fff;
}
.v_button022:link, .v_button022:active, .v_button022:visited { color:#fff; text-decoration:none }

.v_button031 {
  width: 18em;
  height:3em;
  display: inline-block;
  background-color:#00ced1;
  color: #fff;
  border: solid 1px #00ced1;
  transition: 0.5s;
  text-align: center;
  line-height: 50px;
}
.v_button031:hover{
  background-color:#a9a9a9;
  color: #fff;
}
.v_button031:link, .v_button031:active, .v_button031:visited { color:#fff; text-decoration:none }

.v_button032 {
  width: 18em;
  height:3em;
  display: inline-block;
  background-color:#008b8b;
  color: #fff;
  border: solid 1px #008b8b;
  transition: 0.5s;
  text-align: center;
  line-height: 50px;
}
.v_button032:hover{
  background-color:#a9a9a9;
  color: #fff;
}
.v_button032:link, .v_button032:active, .v_button032:visited { color:#fff; text-decoration:none }

.v_button041 {
  width: 18em;
  height:3em;
  display: inline-block;
  background-color:#98fb98;
  color: #fff;
  border: solid 1px #98fb98;
  transition: 0.5s;
  text-align: center;
  line-height: 50px;
}
.v_button041:hover{
  background-color:#a9a9a9;
  color: #fff;
}
.v_button041:link, .v_button041:active, .v_button041:visited { color:#fff; text-decoration:none }

.v_button042 {
  width: 18em;
  height:3em;
  display: inline-block;
  background-color:#00ff00;
  color: #fff;
  border: solid 1px #00ff00;
  transition: 0.5s;
  text-align: center;
  line-height: 50px;
}
.v_button042:hover{
  background-color:#a9a9a9;
  color: #fff;
}
.v_button042:link, .v_button042:active, .v_button042:visited { color:#fff; text-decoration:none }

.v_button050 {
  width: 18em;
  height:3em;
  display: inline-block;
  background-color:#483d8b;
  color: #fff;
  border: solid 1px #483d8b;
  transition: 0.5s;
  text-align: center;
  line-height: 50px;
}
.v_button050:hover{
  background-color:#a9a9a9;
  color: #fff;
}
.v_button050:link, .v_button050:active, .v_button050:visited { color:#fff; text-decoration:none }

.v_button060 {
  padding: 2px 10px;
  display: inline-block;
  background-color:#4169e1;
  color: #fff;
  border: solid 1px #4169e1;
  transition: 0.5s;
  text-align: center;
  line-height: 40px;
}
.v_button060:hover{
  background-color:#a9a9a9;
  color: #fff;
}
.v_button060:link, .v_button060:active, .v_button060:visited { color:#fff; text-decoration:none }

.v_button061 {
  padding: 2px 10px;
  display: inline-block;
  background-color:#6a5acd;
  color: #fff;
  border: solid 1px #6a5acd;
  transition: 0.5s;
  text-align: center;
  line-height: 40px;
}
.v_button061:hover{
  background-color:#a9a9a9;
  color: #fff;
}
.v_button061:link, .v_button061:active, .v_button061:visited { color:#fff; text-decoration:none }


a.h_button01{
  display:inline-block;
  width: 18em;
  height:3em;
  margin:0.1em;
  line-height: 45px;

  color:#000000;
  border:0.15em solid #CCCCCC;
  background-color:#CCCCCC;

  box-sizing: border-box;
  text-decoration:none;
  font-family:'Segoe UI','Roboto',sans-serif;
  font-weight:400;
  text-align:center;
  position:relative;
  }

a.h_button01:hover{
  border-color:#7a7a7a;
}

a.h_button01:active{
  background-color:#999999;
}

@media all and (max-width:30em){
  a.h_button01{
  display:block;
  margin:0.2em auto;
  }
}

a.h_button02{
  display:inline-block;
  padding: 2px 10px;
  margin:0.1em;
  line-height: 45px;

  color:#000000;
  border:0.15em solid #CCCCCC;
  background-color:#CCCCCC;

  box-sizing: border-box;
  text-decoration:none;
  font-family:'Segoe UI','Roboto',sans-serif;
  font-weight:400;
  text-align:center;
  position:relative;
  }

a.h_button02:hover{
  border-color:#7a7a7a;
}

a.h_button02:active{
  background-color:#999999;
}

@media all and (max-width:30em){
  a.h_button02{
  display:block;
  margin:0.2em auto;
  }
}

.section01{
  background-color: #f8f8ff;
  padding: 10px 10px;
  }

.section02{
  background-color: #fffafa;
  padding: 10px 10px;
  }
  
.section03{
  background-color: #ffffe0;
  padding: 10px 10px;
  }
  
.section04{
  background-color: #f5f5dc;
  padding: 10px 10px;
  }

.section05{
  background-color: #e6e6fa;
  padding: 10px 10px;
  }
  
.section06{
  background-color: #fff8dc;
  padding: 10px 10px;
  }

    .v_column06 {
   color: #4d5156;
   font-size: 0.6em;
  }
 
  .v_column06 {
    color: #4d5156;
    font-size: 0.7em;
   }
  
   .v_column08 {
   color: #4d5156;
   font-size: 0.8em;
  }
 
  .v_column09 {
    color: #4d5156;
    font-size: 0.9em;
   }

   .v_column10 {
   color: #4d5156;
   font-size: 1.0em;
  }
 
  .v_column10B {
    color: #4d5156;
    font-size: 1.0em;
    font-weight: bold;
  }
 
  .v_column11 {
   color: #4d5156;
   font-size: 1.1em;
  }

  .v_column11B {
    color: #4d5156;
    font-size: 1.1em;
    font-weight: bold;
  }
 
  .v_column12 {
   color: #4d5156;
   font-size: 1.2em;
  }

  .v_column12B {
    color: #4d5156;
    font-size: 1.2em;
    font-weight: bold;
  }
  
  .v_column13 {
   color: #4d5156;
   font-size: 1.3em;
  }
 
  .v_column14 {
   color: #4d5156;
   font-size: 1.4em;
  }
  
 .v_column15 {
   color: #4d5156;
   font-size: 1.5em;
  }
 
 .v_column16 {
   color: #4d5156;
   font-size: 1.6em;
 }
 
 v_chgcolor {
   width: 100px;
   height: 100px;
   background-color: #f0ffff;
   animation-name: example;
   animation-duration: 4s;
 }
 
 @keyframes example {
   from {background-color: blue;}
   to {background-color: #e6e6fa;}
 }
 
 .flex-container {
   display: flex;
   flex-wrap: wrap;
 }
 
 .flex-item {
   /* background-color: #ffffe0; */
   margin: 20px;
   width: 185px;
 }
 
 /* 横並び */
 
 .flex {
   display: flex; /*横並び*/
 }
 .flex .image {
   width: 640px; /*画像サイズ指定*/
   margin: 0;
   padding: 0;
   overflow: hidden;
   position: relative;
 }
 .flex .text {
   margin: 0 0 0 40px;
   padding: 0;
   color: #000000;
   font-size: 1.4em;
 }
 
 
 .anime_test {
   width: 50px;
   height: 50px;
    /* 幅と高さの半分 */
   -webkit-border-radius: 35px;
   -moz-border-radius: 35px;
   border-radius: 35px;
   background-color: #d3d3d3;  /* 背景色指定 */
   position: relative;         /* 位置指定 */
   animation: anime 2s 0s infinite alternate; /* アニメーション指定 */
 
 }
 
 @keyframes anime {
   0% {
       background-color: #d3d3d3;         /* 背景色指定 */
       left: 0;
   }
   50% {
       background-color: #dcdcdc;      /* 背景色指定 */
       left: 150px;
   }
   100% {
       background-color: #d3d3d3;      /* 背景色指定 */
       left: 300px;
   }
 }
 
 #extendunderline {
   position: relative;
   overflow: hidden;
   padding: 4px;
 }
 #extendunderline::after {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   border-bottom: solid 1px blue;
   transform: scaleX(0);
   transition: all 0.6s 0.1s ease;
   content: "";
 }
 #extendunderline:hover::after {
   transform: scaleX(1);
 }
 
 /* page container */
 .lp-container{
   padding: 10px; /*上下左右に10px余白をあける スマホレスポンシブ*/
 }
 
 .news-list{
   list-style: none outside;
   margin: 0;
   padding: 0;
 }
 .news-list .item a{
   display: flex;
   flex-wrap: wrap;
   flex-wrap: nowrap;
   text-decoration: none;
   color: #333;
   border-bottom: 1px solid #CCC;
   padding: 20px 20px;
 }
 .news-list .item:first-child a{
   border-top: 1px solid #CCC;
 }
 .news-list .item .date{
   margin: 0;
   min-width: 140px;
   font-size: 16px;
   color: #999;
   padding: 0 20px 0 0;
 }
 .news-list .item .category{
   margin: 0;
   min-width: 140px;
   padding: 0 20px 0 0;
 }
 .news-list .item .category span{
   background: #a9a9a9;
   color: #FFF;
   text-align: center;
   display: inline-block;
   padding: 5px 20px;
   font-size: 12px;
   line-height: 1;
 }
 
 .news-list .item .title{
   margin: 0;
   width: 100%;
 }
 .news-list .item a:hover .title{
   color: #00F;
 }
 
 @media screen and (max-width: 767px){
 .news-list .item a{
   flex-wrap: wrap;
 }
 .news-list .item .date{
   min-width: 100px;
 }
 .news-list .item .title{
   margin-top: 10px;
 }
 }
 
 
 
 #cards {
   display: flex;
   justify-content: left;
 }
 
 .card {
   width: 100%;
   height: 100%;
   border: none;
 }
 
 .card:nth-child(2) {
   margin-right: 10px;
   margin-left: 10px;
 }
 
 .picture img {
   width: 100%;
   height: 100%;
 }
 
 .description {
   width: 100%;
   height: 100%;
   padding-right: 12px;
   padding-left: 12px;
   box-sizing: border-box;
 }
 
 .description p {
   font-size: 13px;
   color: dimgray;
 }
 
 /* 実線 */
 .hr2 {
   border-top: 2px solid skyblue;
 }
 
 .hr3 {
   border-top: 1px solid #e6e6fa;
   background-color: rgb(232, 243, 131);
 }
 
/* グラデーション */
 .hr4 {
   height: 1px;
   background: #aaa;
   background-image: -webkit-linear-gradient(left, #ddd, #999, #ddd);
   background-image: -moz-linear-gradient(left, #ddd, #999, #ddd);
   background-image: -ms-linear-gradient(left, #ddd, #999, #ddd);
   background-image: -o-linear-gradient(left, #ddd, #999, #ddd);
 }

 .hr5 {
  border-top: 1px solid #ffe4e1;
  background-color: rgb(232, 243, 131);
}

 .v_circle {
   background: rgba(15, 28, 63, 0.125);
   border-radius: 20%;
   width: 8em;
   height: 8em;
   object-fit: cover;
   margin-bottom: 1rem;
   
   /* border: 8px solid rgba(234, 240, 234, 0.2); /* 半透明の枠線を付加 */
 
 }
 
 #company {
   background-color: #fff0f5;
 }
 
 #paservice {
   background-color: #e6e6fa;
 }
 
 #bathtype {
   background-color: #f0f8ff;
 }
 
 #column {
   background-color: #fffaf0;
 }
 
 .tableSample {
   width: 95%;
   border-collapse: collapse;
   table-layout: auto;

  }
   
   .tableSample th,td {
   padding: 10px 15px;

  }
   
   .tableSample th {
   background: #4682b4;
   width: 30%;
   border: 1px solid #ddd;
   color: #f8f8ff;
   font-weight: normal;
   }
   
   .tableSample td {
    background: #f8f8ff;
    width: auto;
    border: 1px solid #c0c0c0;
    color: #4d5156;
    font-weight: normal;
    text-align: left;
    }

    @media only screen and (max-width:479px) {
   .tableSample th,td {
   width: auto;
   display: block;
   border-top: none;
   }
   .tableSample tr:first-child {
   border-top: 1px solid #d5d5d5;
   }
   }

   .tableSample2 {
    width: 95%;
    border-collapse: collapse;
    table-layout: auto;
 
   }
    
    .tableSample2 th,td {
    padding: 10px 15px;
 
   }
    
    .tableSample2 th {
    background: #3cb371;
    width: 30%;
    border: 1px solid #ddd;
    text-align: left;
    color: #f8f8ff;
    font-weight: normal;
    }
    
    .tableSample2 td {
    background: #f8f8ff;
    width: auto;
    border: 1px solid #c0c0c0;
    color: #4d5156;
    font-weight: normal;
    text-align: left;
    }

    @media only screen and (max-width:479px) {
    .tableSample2 th,td {
    width: auto;
    display: block;
    border-top: none;
    }
    .tableSample2 tr:first-child {
    border-top: 1px solid #d5d5d5;
    }
    }
 

    .tableSample3 {
      width: 90%;
      table-layout: auto;
      border: 0.5px solid #c0c0c0;
   
     }
      
      .tableSample3 th,td {
      padding: 2px 20px;
     }
      
    .tableSample3 th {
      background: #fffafa;
      width: auto;
      color: #4d5156;
      font-weight: normal;
      text-align: left;
      border: 0.5px solid #c0c0c0;
    }
      
    .tableSample3 td {
      background: #f8f8ff;
      width: auto;
      color: #4d5156;
      font-weight: normal;
      text-align: left;
      border: 0.5px solid #c0c0c0;
    }

    @media only screen and (max-width:479px) {
    .tableSample3 th,td {
    width: auto;
    display: block;
    border-top: none;
    }
    }

    .tableSample4 {
      background: #f8f8ff;
      width: auto;
      table-layout: auto;
   
     }
      
    .tableSample4 th,td {
      padding: 2px 10px;
      border: none
     }
      
    .tableSample4 td {
      width: auto;
      color: #4d5156;
      font-weight: normal;
      text-align: left;
    }

    @media only screen and (max-width:479px) {
    .tableSample4 th,td {
    width: auto;
    display: block;
    border-top: none;
    }
    }

    .tableSample5 {
      background: none;
      width: auto;
      table-layout: auto;
   
     }
      
    .tableSample5 th,td {
      padding: 2px 10px;
      border: none
     }
      
    .tableSample5 td {
      width: auto;
      color: #4d5156;
      font-weight: normal;
      text-align: left;
    }

    @media only screen and (max-width:479px) {
    .tableSample5 th,td {
    width: auto;
    display: block;
    border-top: none;
    }
    }

    .tableSample6 {
      background: none;
      width: auto;
      table-layout: auto;
     }
      
      .tableSample6 th,td {
      padding: 2px 10px;
      border: none
     }
      
    .tableSample6 th {
      width: auto;
      color: #4d5156;
      font-weight: bold;
      text-align: left;
    }
      
    .tableSample6 td {
      width: auto;
      color: #4d5156;
      font-weight: normal;
      text-align: left;
    }

    @media only screen and (max-width:479px) {
    .tableSample6 th,td {
    width: auto;
    display: block;
    border-top: none;
    }
    }

    
  /* table01 */
  table01{
    border-collapse: collapse;
    width: 100%;
  }
  .tb01 th {
    padding: 10px;
    border: solid 1px #ccc;
    text-align:left;
    box-sizing:border-box;
    }

  .tb01 td {
    padding: 10px;
    border: solid 1px #ccc;
    text-align:left;
    box-sizing:border-box;
  }
  .tb01 th {
    background: #fff0f5;
    color: #808080;
    
  }
  @media screen and (max-width: 640px) {
    .tb01 {
      width: 100%;
    }
    table01.tb01 th,
    table01.tb01 td {
      display: block;
      width: 100%;
      border-bottom:none;
    }
    .tb01 tr:last-child{
      border-bottom: solid 1px #ccc;
    }
  }