@charset "utf-8";
.slid_wrap {
	width: 100%;
	position: relative;
	overflow: hidden;
}
/*---------縮小して表示---------*/
.reduction{
    opacity: 0;
    animation:reduction 3.0s 0s 1 forwards;
    -webkit-animation:reduction 1.0s 0s 1 forwards;
    -moz-animation:reduction 1.0s 0s 1 forwards;
}
@keyframes reduction {
	0%{
		opacity: 0;
		transform:scale(1.3,1.3);
	}
	100%{
		opacity: 1;
		transform:scale(1.0,1.0);
	}
}
.slider {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 0px;
	line-height: 0;
    }
.slick-slide {
  transition: all ease-in-out 0.5s;
  /*opacity: .2;*/
}
.slid {
  width: 100%;
  height: 400px;
  background-repeat: no-repeat;
  background-position:  center center;
  background-size: 768px;
}
.slid_01 {
	background-image: url("../images/top/slide_01.jpg");
    }
.slid_02 {
	background-image: url(../images/top/slide_02.jpg);
    }
.slid_03 {
	background-image: url(../images/top/slide_03.jpg);
    }
.slid_04 {
	background-image: url(../images/top/slide_04.jpg);
    }
.slid_05 {
	background-image: url(../images/top/slide_05.jpg);
    }
.slide_tx{
	position: absolute;
	width: 100%;
	bottom: 25% ;
	text-align: center;
	font-size: var(--font-size48);
  font-weight: var(--Bold);
	color: #ffffff;  
  text-shadow: 1px 1px 3px #000;
}

/*---------ご挨拶sp---------*/
.title_01{
  position: relative;
	font-size: var(--font-size28);
  font-weight: var(--SemiBold);	
  overflow: hidden;
  padding-bottom: 0.3em;
}
.title_01::before,.title_01::after{
  position: absolute;
  content: "";
	bottom: 0;
	width: 100%;
}
.title_01::before{
  border-bottom: 0.2em solid #365e6c;/*文字下のライン*/
}
.title_01::after{
  border-bottom: 0.2em solid #799390;/*文字以外のライン*/
}
.title_02{
	font-size: var(--font-size18);
	position: relative;
	margin: var(--px30) 0 3px;
  padding-left: 1em;
  color: var(--main-color);
  font-weight: var(--Bold);
}
.title_02:after{
	position: absolute;
	content: '';
	display: inline-block;
	width: .7em;
	bottom: 0.7em;
	left: 0;
	border-bottom: solid 2px var(--main-color);
}
.sub_title{
  color: var(--main-color);	
	font-size: var(--font-size14);
	padding-left: 10px;
  font-weight: var(--Regular);
}
/*--------- お知らせ sp  ---------*/
.news{
  /*min-height: 100vh;*/
  
  .inner{
    width: 87.5%;
    margin: 0 auto;
    padding: var(--px100) 0;
  }
  
  table{
    width: 100%;
    border-collapse: collapse;
      border-spacing: 0;
    margin: 10px auto 0;
    
    tr{
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      padding: 8px 0;
      border-bottom: 1px solid #cccccc;
      
      th{
        font-weight: 400;
        text-align: left;
        width: 90px;
        padding: 4px 0;
      }
      
      td{
        padding: 4px 0;
        
        &:first-of-type{
          width: 60%;
          text-align: center;
          color: #ffffff;
          font-size: 85%;
        }
        &:last-of-type{
          width: 100%;	
        }
        &:last-of-type a{
          color: #252935;
          width: 100%;
          display: block;
        }
      }
    }
  }
  .tagu_01{
    background-color: #BA5448;
    width: 6em;
    padding: 2px 0;
    border-radius: 15px;
  }
  .tagu_02{
    background-color: #604C3F;
    width: 6em;
    padding: 2px 0;
  }
  .tagu_03{
    background-color: #C9A063;
    width: 6em;
    padding: 2px 0;
  }
  .news_list{
    padding: 10px 5px;
    text-align: right;
  }
}

/*--------- ご挨拶 sp  ---------*/
.message{
  /*min-height: 100vh;*/
  
  .inner{
    width: 87.5%;
    margin: 0 auto;
    padding: var(--px100) 0;
  }
  .wrap{
    margin: var(--px20) auto;  

      .text{
        margin: var(--px40) auto 0;

        h3{
          font-size: var(--font-size24);
          font-weight: var(--Bold);
          padding-bottom: 10px;
        }
        p{
          font-weight: var(--SemiBold);
          padding-top: var(--px10);
          line-height: 2.2;

          &.name{
            text-align: right;

            span{
              font-size: 120%;
            }
          }
        }
      }
      .photo {
        margin: var(--px40) auto 0; 
        width: min(100%,400px);
      }
  }
}




/*---------診療時間 sp---------*/
  .medical-hours {
      width: min(100%,800px);
      border-collapse: separate;
      border-spacing: 0;
      background: #ffffff;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
      margin-top: var(--px40);
    

    /* 共通 */
    th, td {
      padding: var(--px20) var(--px10);
      text-align: center;
      border: 1px dashed #d6f0f2;
    }

    /* ヘッダー */
    thead th {
      background: linear-gradient(135deg, #b9e5e8, #e3f6f5);
      color: #006d77;
      font-weight: 700;
    }

    /* 時間帯 */
    tbody th {
      background: #f7fbfc;
      color: #333;
      font-weight: 600;
      text-align: left;
      padding-left: 16px;
    }

    /* ○ */
    td {
      background: #ffffff;
      
      &.maru {
        color: #2a9d8f;
        font-weight: var(--Black);
      }

      &.batu {
        color: #888;
      }
    }

    /* 角丸調整 */
    thead th:first-child {
      border-top-left-radius: 16px;
    }

    thead th:last-child {
      border-top-right-radius: 16px;
    }
}

    /* 注記 */
    .note {
      margin-top: 12px;
      color: #666;
    }
   
/*---------沿革 sp---------*/
.history{
  background-image: url("../images/top/bg_01.png");
  background-position: center bottom;
  background-repeat: repeat-x;
  background-size: auto 40px;
  padding-bottom: var(--px80);
  
  .inner{
    width: 87.5%;
    margin: 0 auto;
    padding: var(--px100) 0 var(--px80);


    table{
      width: 100%;
      margin-top: var(--px20);
      border-collapse: collapse;
      border-spacing: 0;

      caption{
        font-weight: var(--SemiBold);
        font-size: var(--font-size18);
        text-align: left;
        border-bottom: 2px solid #707070;
        padding-bottom: clamp(6px,1vw,10px);
      }
      tr{
        border-bottom: 1px solid #cccccc;
        vertical-align: top;
        line-height: 1.4;
      }

      th{
        text-align: left;
        padding: 1em 0 .5em;
        width: 6em;
        text-align-last: justify;
        font-weight: var(--Bold);
        display: block;
      }
      td{
        padding: .5em 0 1em;
        font-weight: var(--Medium);
        display: block;

        img{
          width: min(45%,300px);
          padding: 15px var(--px20) 0 0;
        }
      }
    }
  }
  
}
/*---------路面切削工事 sp---------*/
.pavement{
	background-color: var(--bg-color);

  .pavement_inner{
    width: 87.5%;
    margin: 0 auto;
    padding: var(--px100) 0;
  }
  .pavement_inner p{
    font-size: var(--font-size18);
    padding-left: 1em;
  }
  .flow-wrap {
    margin: var(--px30) 0;
    
    .flow{
      .step {
        position: relative;
        padding: 15px 15px;
        margin-bottom: 40px;
        background: #fff;
        border-radius: 6px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.05);
      }
      .step h3 {
        margin: 0 0 5px;
        font-size: clamp(1.4rem,1.6vw,1.6rem);
        font-weight: var(--SemiBold);
      }
      
      .step p {
        margin: 0;
        padding-left: 0;
        font-size: clamp(1.4rem,1.6vw,1.6rem);
      }
      
      /* 下矢印 */
      .step::before {
        content: '';
        position: absolute;
        left: 50%;
        bottom: -1.5em; /* 縦線下端に矢印先端 */
        transform: translateX(-50%) rotate(45deg);
        width: 10px;
        height: 10px;
        border-right: 2px solid #3498db;
        border-bottom: 2px solid #3498db;
        background: transparent;
      }

      /* 最後のステップは矢印非表示 */
      .step:last-child::after,
      .step:last-child::before {
        display: none;
      }
    }
    .flow_img{
      width: min(100%,400px);
      margin: 0 auto;
      
      li{
        padding: 0 0 var(--px20) 0;
        
        img{
          border-radius: 6px;
        }
      }
    }
  }



}
/*---------パラボラ工法 sp---------*/
.parabolic{

  .parabolic_inner{
    width: 87.5%;
    margin: 0 auto;
    padding: var(--px100) 0;
  }
  .parabolic_inner p{
    font-size: var(--font-size18);
    padding-left: 1em;
  }
  .card{
    background:#fff;
    padding:var(--px50) var(--px30);
    box-shadow:var(--shadow);
    margin-top: var(--px20);
  }

  /* グリッド */
  .grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:var(--px20);
  justify-items:center;
  }


  figure.step{
    margin:0;position:relative;background:#fff;
    border-top-left-radius: var(--px10);
    border-top-right-radius: var(--px10);
    overflow:hidden;
    max-width:300px;
  }
  .step img{display:block;width:100%;height:auto;max-width:300px;object-fit:cover}

  .badge{
    position:absolute;top:6px;left:6px;
    background:var(--sub-color);color:#fff;
    font-weight:var(--SemiBold);
    font-size:1.2rem;
    padding:3px 7px;border-radius:999px;
    line-height: 1;
  }
  figcaption{
    padding:var(--px10) 0;
    font-size:1.5rem;
  }
  .cap-title{
    display:block;
    font-weight:var(--SemiBold);
    margin-bottom:2px;
  }
  .cap-desc{
  display:block;
  color:var(--font-color);
  font-size:1.4rem;
  line-height: 1.4;
}
}
/*---------採用情報 sp---------*/
.recruit{
  background-color: var(--bg-color);
  
  .inner{
    width: 87.5%;
    margin: 0 auto;
    padding: var(--px100) 0 var(--px80);


    table{
      width: 100%;
      margin-top: var(--px20);
      border-collapse: collapse;
      border-spacing: 0;

      caption{
        font-weight: var(--SemiBold);
        font-size: var(--font-size18);
        text-align: left;
        border-bottom: 2px solid #707070;
        padding-bottom: clamp(6px,1vw,10px);
      }
      tr{
        border-bottom: 1px solid #cccccc;
        vertical-align: top;
        line-height: 1.4;
      }

      th{
        text-align: left;
        padding: 1em 0 .5em;
        width: 5em;
        text-align-last: justify;
        font-weight: var(--Bold);
        display: block;
      }
      td{
        padding: .5em 0 1em;
        font-weight: var(--Medium);
        display: block;
        
        img{
          width: 290px;
        }
      }
    }
  }  
  
}



/*---------アクセスsp---------*/
.access{
  
  .access_inner{
    width: 87.5%;
    margin: 0 auto;
    padding: var(--px100) 0;
    
    h2{
      width: 100%;
    }

    .wrap{
      padding-bottom: var(--px40);
      
      p{
        margin: var(--px20) 0 var(--px10);
      }
      .map{
        width: 100%;
        height: 200px;
      }
    }
  }
}

@media (min-width:768px){
.slid {
  height: 500px;
  background-size: cover;
}
.slide_tx{
	bottom: 15% ;
  line-height: 1.4;
}
/*--------- お知らせ tab  ---------*/
  .news{
    
    .inner{
      width: min(85%,1100px);
      position: relative;
    }	
    
    table{
      
      tr{
        padding: 12px 20px;
        
        th{
          width: 100px;
		      padding: 5px 0;
        }
        
        td{
         padding: 5px 0;
          
          &:first-of-type{
            width: 100px;
          } 
          &:last-of-type{
            width: calc(100% - 200px);
          }        
        }
      }
      
    }
    
  }


	

/*---------ご挨拶 tab---------*/
  .message{
    
    .inner{
      width: min(85%,1100px);
      position: relative;
    }	
  }






/*---------沿革 tab---------*/
.history{
  background-size: auto 50px;
  
  .inner{
    width: min(85%,1100px);

    table{

      th{
        padding: 1em 0;
        width: 6em;
        text-align-last: justify;
        display: table-cell;
        font-weight: var(--Medium);
      }
      td{
        padding: 1em 0 1em 5em;
        display: table-cell;
      }
    }
  }	
}
/*---------路面切削工事 tab---------*/
.pavement{

  .pavement_inner{
    width: min(85%,1100px);
  }
   .flow-wrap {
    display: flex;
     justify-content: space-between;
    
    .flow{
      width: 54%;
    }
    .flow_img{
      width: 40%;
      margin: 0;

    }
  }
  
}	
/*---------パラボラ工法 tab---------*/
.parabolic{

  .parabolic_inner{
    width: min(85%,1100px);
  }
}
/*---------採用情報 tab---------*/
.recruit{
  
  .inner{
    width: min(85%,1100px);

    table{

      th{
        padding: 1em 0;
        width: 5em;
        text-align-last: justify;
        display: table-cell;
        font-weight: var(--Medium);
      }
      td{
        padding: 1em 0 1em 5em;
        display: table-cell;
      }
    }
  }	
}	
/*---------アクセス tab---------*/
.access{
  
  .access_inner{
	  width: min(85%,1100px);       
  }
  
}


}
@media (min-width:1024px){
.slid {
  height: 600px;
}
/*---------ご挨拶 pc---------*/
  .message{
    
    .wrap{  
      display: flex;
      justify-content: flex-start;
      align-items: center;

        .text{
          margin: 0;
          width: 60%;  
          padding-right: 50px;

          p{
            width: min(100%,540px);
          }
        }
        .photo {
          margin: 0;
          width: min(40%,400px);
          order: 2;
        }
    }
  }  


	

}
@media (min-width:1280px){
.slid {
    height: calc(100vh);
    background-repeat: no-repeat;
    background-position: center center;
    background-size:cover;
    }
.slid_01 {
	background-position:  center center;
    }
.slide_tx{
	width: 80%;
  bottom: 12%;
	left: 10%;
	text-align: left;
  letter-spacing: .07em;
}

/*---------アクセス1280---------*/
.access{
  
  .access_inner{    
    
    .wrap{
      .map{
        height: 300px;
      }
    }    
  }
  
}


}