@charset "UTF-8";
/* CSS Document */




/*  ---------------------
   以下は調整用
 --------------------- */


.mb1rem{
margin-bottom: 1rem;
}
.mb2rem{
margin-bottom: 2rem;
}
.pd1rem{
padding: 1rem 0;
}
.pd2rem{
padding: 2rem 0;
}
.bgWht{
background: #FFF;
}
.bgOrg{
background: #f67900;
}
.bgGr{
background: #f5f5f5;
}

.txtCenter{
text-align: center;
}

.maxwdth1000{
max-width: 1000px;
margin: 0 auto;
}

.serif{
font-family: serif;
}
.english{
font-family: 'Josefin Sans', sans-serif;
}

.ttlEng{
font-size: 4.5rem;
}
.ttlSub{
font-size: 2rem;
line-height: 3rem;
}

.tXtWht{
color: #FFF;
}
.tXtorg{
color: #f67900;
}

/*about Us*/

#aboutUs{
background: url("../img/dt/bg.png") no-repeat;
background-position: right bottom;
background-size: 70%;
}
#aboutUs .chapter01 .txt{
padding: 2rem 10rem;
padding-left: 3rem;
}
#aboutUs .chapter02 .txt{
padding: 2rem 10rem;
padding-right: 3rem;
}
#aboutUs .chapter02 .img{
padding-right: 5rem;
}


#aboutUs .chapter01 .inner,
#aboutUs .chapter02 .inner{
font-size: 1.2rem;
}

#aboutUs .chapter01{
display: flex;
margin-bottom: 3rem;
}
#aboutUs .chapter02{
display: flex;
margin-bottom: 1rem;
}
#aboutUs .chapter02{
flex-direction:row-reverse;
}
#aboutUs h3.ttlSub{
  border-bottom: solid 3px #D4D4D4;
  position: relative;
  padding-bottom: 1rem;
  font-weight: 900;
}

#aboutUs h3.ttlSub:after{
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 3px #f67900;
  bottom: -3px;
  width: 10%;
}

#aboutUs .laboList{
display: flex;
padding: 4rem 0;
gap:2rem;
}

#aboutUs .laboList .item{
width: calc(100%/3);
text-align: center;
flex: 1;/*子要素に入れるflex*/
display: flex;/*子要素に入れるflex*/
flex-direction: column;/*子要素に入れるflex*/
}

.pie {
	display: flex;
	justify-content: center;
	align-items: center;
    flex-flow: column;
	margin-right: auto;
	margin-left: auto;
	width: 300px;
	height: 300px;
	font-size: 26px;
	font-weight: 700;
	background-image: radial-gradient(#f2f2f2 45%, transparent 31%), conic-gradient(#f67900 0% 90%, #d9d9d9 90% 100%);
	border-radius: 50%;
    font-family: 'Josefin Sans', sans-serif;
}
.pie p{
margin: 0;
line-height: 5rem;
}
.pie span{
font-weight: bold;
font-size: 6rem;
}

#facilities{
background: url("../img/dt/facilities.png") no-repeat;
padding: 6rem 0;
}

#facilities .facilitiesList{
display: flex;
gap:2rem;
}
#facilities .facilitiesList .item{
width: calc(100%/4);
display: flex;/*子要素に入れるflex*/
flex-direction: column;/*子要素に入れるflex*/
}
#facilities .facilitiesList .item .name{
background: #FFFFFF;
padding: 0.7rem;
font-size: 0.7rem;
 flex-grow: 1;/*孫要素に入れるflex*/
}

#recruit{
background: url("../img/dt/recruit_bg.webp") no-repeat;
background-size:cover;
padding: 4rem 0;
}

#recruit .chapter01{
background: #FFF;
background-color: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(3px);
box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
width: 60%;
padding: 4rem;
}

#recruit .chapter01 .txtWrap{
font-size: 1.2rem;
}
#recruit2 .message h3 span {
    display: block;
    text-align: center;
}


#recruit2 .message{
background:#f17200 url("../img/dt/recruit_bg2_2000px.png") no-repeat;
position: relative;
height: 400px;
    background-size: cover;
}
#recruit2 .message2{
background:#efefef url("../img/dt/recruit_img000.png") no-repeat;
background-size: contain;
display: flex;
flex-flow: row-reverse;
padding: 4rem 0;
}



#recruit2 .chapter02 .pointTTl {
    position: relative;
    display: inline-block;
    padding: 0 5rem;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 3rem;
}
 
#recruit2 .chapter02 .pointTTl:before,
#recruit2 .chapter02 .pointTTl:after {
    content: '';
    position: absolute;
    top: 50%;
    display: inline-block;
    width: 50px;
    height: 5px;
    background-color: #FFF;
}
 
#recruit2 .chapter02 .pointTTl:before {
    left: 0;
}
 
#recruit2 .chapter02 .pointTTl:after {
    right: 0;
}






#recruit2 .message2 .pointTTl:before, #recruit2 .message2 .pointTTl:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 45px;
  height: 2px;
  border-top: solid 1px black;
  border-bottom: solid 1px black;
}

#recruit2 .message2 .pointTTl:before {
  left:0;
}
#recruit2 .message2 .pointTTl:after {
  right: 0;
}



#recruit2 .message2 .inner .wrap{
    margin-left: auto;
    background: #FFF;
    background-color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(3px);
    box-shadow: 0px 2px 10px 0px rgb(0 0 0 / 10%);
    width: 60%;
    padding: 4rem;
    font-size: 1.2rem;
}


#recruit2 .message h3{
width: 80%;
font-size: 3rem;
color: #FFF;
font-weight: bold;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 2rem 5rem;
border:4px solid #FFF;
text-shadow: 1px 1px 3px rgb(0 0 0 / 50%);
box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(3px);
}


#recruit2 .chapter02{
padding: 3rem 0;

}
#recruit2 .chapter02.bgGr{
background: rgb(255,106,50);
background: linear-gradient(124deg, rgba(255,106,50,1) 0%, rgba(255,139,0,1) 48%);
}

#recruit2 .chapter02 h4.ttlSub{
  border-bottom: solid 3px #D4D4D4;
  position: relative;
  padding-bottom: 1rem;
  font-weight: 900;
}

#recruit2 .chapter02 h4.ttlSub:after{
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 3px #f67900;
  bottom: -3px;
  width: 10%;
}


#recruit2 .chapter02 .item{
padding: 2rem ;
display: flex;
margin-bottom: 2rem;
  border-radius: 5px;
  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
}
#recruit2 .chapter02 .item .img{
width: 20%;
}
#recruit2 .chapter02 .item .txt{
padding: 2rem;
font-size: 1.2rem;
width: 80%;
}

.tbl-r02 {
  margin: 20px auto;
  width: 100%;
  font-size: 1.2rem;
}
.tbl-r02 th {
  background:#464646;
  border: solid 1px #FFF;
  color: #fff;
  padding: 10px;
  width: 20%;
  text-align: center;
}
.tbl-r02 td {
　border: solid 1px #ccc;
  padding: 10px;
  
}

.webFormBtn {
  display: block;
  position: relative;
  background: #83c11e;
  width: 24rem;
  padding: 1.5rem;
  border-radius: .6rem;
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  letter-spacing: .1rem;
  transition: .5s;
}

.webFormBtn:before {
  content: "";
  position: absolute;
  top: 43%;
  right: 24px;
  width: 22px;
  height: 6px;
  background: #fff;
  transform: rotate(45deg);
}

.webFormBtn:after {
  content: "";
  position: absolute;
  top: 55%;
  right: 24px;
  width: 22px;
  height: 6px;
  background: #fff;
  transform: rotate(-45deg);
}


/*slider*/



.sliderWrapper #slider {
    width: 100%;
    height: 80vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}
.sliderWrapper{
  position: relative;
  margin-bottom: 3rem;
  padding-top: 5rem;
}
.sliderWrapper .dtName{
    color: #f67900;
    font-size: 5rem;
    position: absolute;
    top: 2rem;
    left: 2rem;
}
.sliderWrapper .circleIcon{
    display: inline-grid;
    color: #fff;
    background-color: #f00;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    text-align: center;
    align-content: center;
    background: #f67900;
    color: #FFF;
    font-weight: bold;
    font-size: 1rem;
    position: absolute;
    top: 1rem;
    left: 2rem;
    }
.sliderWrapper .circleIcon span{
display: block;
text-align: center;
}
.sliderWrapper .circleIcon span.big{
font-size: 2rem;
}

.sliderWrapper h1{
  position: absolute;
  z-index: 2;
  font-size:6vw;
  text-transform: uppercase;
  color: #fff;
  bottom: 2rem;
  right: 2rem;
}
.sliderWrapper h1 .txt01,
.sliderWrapper h1 .txt02{
display: block;
  text-align: right;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

.sliderWrapper h1 .txt02{
font-size: 10rem;
}
/*コンタクト*/
.contactWrap{
background:url("../img/dt/bg-contact02.png") no-repeat;
padding: 3rem 0;
}

.contactWrap .btnWrap{
display: flex;
gap:1rem;
}
.contactWrap .btnWrap a{
width: 80%;
margin: 0 auto;
border-radius: 10px;
text-align: center;
padding: 2rem 0;
font-size: 1.5rem;
text-decoration: none;
}
.contactWrap .btnWrap a:link{
text-decoration: none;
}

.contactWrap .btnWrap a.webFormBtn{
background: rgb(255,172,114);
background: linear-gradient(186deg, rgba(255,172,114,1) 14%, rgba(246,121,0,1) 62%);
box-shadow: 0px 0px 15px -5px #000000;

}
.contactWrap .btnWrap a.webFormBtn:link,
.contactWrap .btnWrap a.webFormBtn:visited{
color: #FFF;

}
.contactWrap .btnWrap a.telBtn:link,
.contactWrap .btnWrap a.telBtn:visited{
color: #FFF;
}

.contactWrap .btnWrap a.telBtn{
border: 2px solid #FFF;
}
.contactWrap .btnWrap a.telBtn span{
font-size: 1.3rem;
}
.laboWrap{
display: flex;
}
.laboGuide {
	display: flex;
    flex-flow: column;
}
.manuallay{
flex-wrap: wrap;
}

.manualWrap{
    width: 100%;
    display: flex;
    justify-content: center;
    padding-left: 0;
    gap: 10px;
}
.manualWrap li{
display: flex;
flex: 1;
}
.manualWrap div{
padding: 10px;
padding-bottom: 0;
}
.manualWrap div p.tit{
border-bottom: 1px dotted #B3B3B3;
font-weight: bold;
color: #f67900;

}
.manualWrap div:first-child{
flex: 1;
}
.manualWrap div:nth-child(2){
flex: 2;
}

@media screen and (max-width: 1000px) {
#aboutUs .chapter01 .txt{
padding: 2rem 4rem;
padding-left: 3rem;
}
#aboutUs .chapter02 .txt {
    padding: 2rem 4rem;
    padding-right: 3rem;
}
#facilities {
    background: url(../img/dt/facilities.png) no-repeat;
    padding: 6rem 2rem;
}
#aboutUs .laboList {
    display: flex;
    padding: 4rem 2rem;
    gap: 2rem;
}
#recruit {
    background: url(../img/dt/recruit_bg1000.png) no-repeat;
    background-size: cover;
    padding: 4rem 0;
}
.contactWrap {
    background: url(../img/dt/bg-contact02.png) no-repeat;
    padding: 3rem 2rem;
}
#recruit2 .chapter02 {
    padding: 3rem 1rem;
}
#recruit2 .chapter02 .item {
    padding: 1rem;
    display: flex;
    margin-bottom: 2rem;
    border-radius: 5px;
    box-shadow: 0px 2px 10px 0px rgb(0 0 0 / 10%);
}

}
@media screen and (max-width: 768px) {
#recruit {
    background: url(../img/dt/recruit_bg768.png) no-repeat;
    background-size: cover;
    padding: 4rem 1rem;
}
#recruit .chapter01 {
    background: #FFF;
    background-color: rgba(255, 255, 255, 0.7);
    box-shadow: 0px 2px 10px 0px rgb(0 0 0 / 10%);
    width: 100%;
    padding: 4rem;
}
.manualWrap{
flex-flow: column;
}
.manualWrap div:first-child {
    /* flex: 1; */
    flex: initial;
}
.manualWrap div img{
height: 100px;
}
}



@media screen and (max-width: 640px) {
.sliderWrapper{
padding-top: 0;
}
.manualWrap div {
padding-right: 0;
}

.webFormBtn:before {
  content: "";
  position: absolute;
  top: 40%;
  right: 24px;
  width: 22px;
  height: 6px;
  background: #fff;
  transform: rotate(45deg);
}

.webFormBtn:after {
  content: "";
  position: absolute;
  top: 56%;
  right: 24px;
  width: 22px;
  height: 6px;
  background: #fff;
  transform: rotate(-45deg);
}



#recruit2 .message{
background:#f17200 url("../img/dt/recruit_bg2_640px.png") no-repeat;
position: relative;
height: 400px;
    background-size: cover;
}

#recruit2 .message h3{
width: 90vw;
font-size: 2rem;
padding: 2rem 0;
}
#recruit2 .message h3 span{
display: block;
text-align: center;
}

.sliderWrapper h1 {
    position: absolute;
    z-index: 2;
    font-size: 8vw;
    text-transform: uppercase;
    color: #fff;
    bottom: 2rem;
    right: 2rem;
}

.sliderWrapper h1 .txt02 {
    font-size: 4.5rem;
}
.ttlSub {
    font-size: 1.4rem;
    line-height: 2rem;
    font-weight: 900;
}

.sliderWrapper .circleIcon {
    display: inline-grid;
    color: #fff;
    background-color: #f00;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    text-align: center;
    align-content: center;
    background: #f67900;
    color: #FFF;
    font-weight: bold;
    font-size: 0.8rem;
    position: absolute;
    top: 1rem;
    left: 1rem;
}
.sliderWrapper .circleIcon span.big {
    font-size: 1.4rem;
}



#aboutUs .chapter01 {
    display: flex;
    flex-flow:column-reverse;
    margin-bottom: 2rem;
}

#aboutUs .chapter01 .txt {
    padding: 2rem 1rem;
    padding-left: 1rem;
}
#aboutUs .chapter02 {
    display: flex;
    flex-direction:column-reverse;
}
#aboutUs .chapter02 .txt {
    padding: 2rem 1rem;
    padding-right: 1rem;
}

#aboutUs .chapter02 .img {
    padding-right: 0rem;
    margin-bottom: 2rem;
}
#aboutUs .chapter02 .img img{
width: 70%;
margin: 0 auto;
}

#aboutUs .laboList {
    display: flex;
    padding: 0rem;
    gap: 5px;
    margin-bottom: 0rem;
    padding-bottom: 3rem;

}



#aboutUs .laboList p{
padding: 10px 0;
    font-size: 0.8rem;
flex-grow: 1;/*孫要素に入れるflex*/
}

  .last td:last-child {
    border-bottom: solid 0px #ccc;
    width: 100%;
  }
  .tbl-r02 {
    width: 80%;
  }
  .tbl-r02 th,
  .tbl-r02 td {
　　border-bottom: none;
    display: block;
    width: 100%;
  }

.laboWrap{
display: block;
}

.laboGuide {
	display: flex;
}
.laboGuide .txt {
	background-color: #fff;
	padding: 30px;
	display: flex;
	align-items: center;
}  
  

#facilities {
    background: url(../img/dt/facilities.png) no-repeat;
    background-size: cover;
    padding: 3rem 1rem;
}
#facilities .facilitiesList {
    display: flex;
    gap: 0;
    flex-wrap: wrap;
}
#facilities .facilitiesList .item {
    width: calc(100%/2);
    padding: 2px;
}

#facilities .facilitiesList.mb2rem {
    margin-bottom: 0rem;
}
#facilities .tXtWht{
font-size: 1.2rem;
}

#recruit .chapter01 {
    background: #FFF;
    background-color: rgba(255, 255, 255, 0.7);
    box-shadow: 0px 2px 10px 0px rgb(0 0 0 / 10%);
    width: 100%;
    padding: 1rem;
    position: relative;
}

#recruit .chapter01 h2{
position: absolute;
top: -3rem;
}
#recruit .chapter01 h3{
padding-top: 1rem;
}
#recruit2 .message2{
padding: 4rem 1rem;
}
#recruit2 .message2 .inner .wrap {
    width: 100%;
    padding: 1rem;
    
}



#recruit2 h3.bgOrg span{
display: block;
text-align: center;
}
#recruit2 .chapter02 .item {
    padding: 1rem;
    display: flex;
    flex-flow: column;
    margin-bottom: 2rem;
    border-radius: 5px;
    box-shadow: 0px 2px 10px 0px rgb(0 0 0 / 10%);
}
#recruit2 .chapter02 .item .img {
    width: 100%;
    padding:0;
}
#recruit2 .chapter02 .item .img img{
width: 40%;
margin: 0 auto;
margin-bottom: 1rem;
display: block;
}

#recruit2 .chapter02 .item .txt {
    padding: 0;
    font-size: 1.2rem;
    width: 100%;
}

#recruit2 .message2 {
    background: #efefef url(../img/dt/recruit_img000.png) no-repeat;
    background-size: cover;
    }

.tbl-r02 {
width: 100%;
}

.sliderWrapper #slider {
    width: 100%;
    height: 80vh/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}
.sliderWrapper {
    position: relative;
    margin-bottom: 1rem;
}
#recruit {
    background: url(../img/dt/recruit_bg640.png) no-repeat;
    background-size: cover;
    padding: 4rem 1rem;
}
.tbl-r02 {
    margin: 0 auto;
    width: 100%;
    font-size: 1.2rem;
}
.contactWrap .btnWrap {
    display: flex;
    flex-flow: column;
    gap: 1rem;
}

.contactWrap .btnWrap a {
    width: 100%;
    padding: 1rem 0;
    }
#aboutUs {
    background: url(../img/dt/bg.png) no-repeat;
    background-position: right bottom;
    background-size: 100%;
}
#facilities h2.tXtWht {
font-size: 4.5rem;
}
}