.serviceSubTitle{
  border:none;
  font-size:32px;
  display:block;
  text-align:center;
  margin-top:30px;
  letter-spacing:4px;
}

.subTitleDetails{
  text-align:center;
  font-size:25px;
  letter-spacing:4px;
  font-weight:normal;
  margin-top:10px;
}

.aboutWapper{
  border:1px solid #CAC09E;
  background-color:white;
  padding:4px;
  margin-top:80px;
}

.aboutImage{
  background-image:url(../images/base/007.jpg);
  background-size:cover;
  width:100%;
  height:600px;
  margin-bottom:4px;
}

.aboutMessage{
  background-color:#F7F5EE;
  padding:30px;
}

.aboutTitleMessage{
  color:#06A097;
  margin-top:20px;
  font-size:22px;
  font-weight:600;
  letter-spacing: 4px;
}

.aboutTitleMessageSp{
  display:none;
}

.aboutMessageBody{
  letter-spacing: 4px;
  margin-top:20px;
}

.boldRed{
  color:red;
  font-weight:bold;
}

.indexArea{
  display: flex;
  align-items: center;/* 縦位置の調整 */
  width:300px;
  margin:auto;
  text-align:center;
  margin-top:100px;
  margin-bottom:50px;
}

.notFlex{
  display: block;  
}

.indexAreaRomaji{
  color:#06A097;
  display: inline-block;
  font-size:20px;
  letter-spacing:2px;
  font-weight:bold;
}

.indexAreaJa{
  font-weight:bold;
  display: inline-block;
  font-size:25px;
  letter-spacing: 4px;
}

.merit6{
  line-height:45px;
  font-size:25px;
  letter-spacing:1px;
  background-color:rgba(255,255,255,0.2);
  margin:50px 0px 50px 0px;
}

.indexArea::before,
.indexArea::after {
  content: '';
  flex-grow: 1;/* 余白を分け与える */
  height: 4px;
  background: #999999;
  margin:30px;
  border-radius:20px;
}

.indexList{
  display: table;
  border-spacing: 20px 0;
  margin-top:25px;
}

.indexBox{
  background: #FFFFFF;
  border: 1px solid #DDDDDD;
  box-sizing: border-box;
  box-shadow: 5px 5px 4px rgba(0, 0, 0, 0.25);
  border-radius: 91px;
  width:10%;
  height:80px;
  font-size:21px;
  vertical-align: middle;
  font-weight:600;
  padding-left:50px;
  letter-spacing: 3px;
  text-align: center;
  position: relative;
  display: table-cell;    
  vertical-align: middle;
  cursor: pointer;
}

.indexBox:hover{
  background-color: #336688;
  color:white;
}

.indexBox:hover > i{
  color:white!important;
}

.indexBox > i{
  font-size:42px;
  position:absolute;
  /* left:50;
  top:20; */
  left:50px;
  top:20px;
}

.wd100{
  width:100%!important;
}

.contentsBoxWrapper{
  text-align: center;
  margin-top:50px;
}
.slant-bg {
  width: 100%;
  margin: 0;
  padding: 50px 0;
  position: relative;
  top: 0px;
  margin-top:100px;
  margin-bottom:100px;
}

.slant-bg::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: url(../images/service/bgImage.png);
  transform: skewY(-2deg);
  z-index: -1;
}

.imgPCNone{
  display:none;
}

.slant-bg-inner{
  width:70%;
  margin:auto;
}

.boxRadiusDDD{
  background-color:#F8F8F8;
  border:4px solid #DDDDDD;
  border-radius:20px;
  margin:10px 0px;
  letter-spacing: 2px;
  line-height:30px;
  width:100%;
  margin-bottom:30px;
}

.boxRadiusDDD > p{
  padding:15px;
  color:#333333;
}

.greenBox{
  display: flex;
  flex-direction: row;

  width: 48%;
  font-size:24px;
  margin-top:30px;
  float:left;

  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%), #06A097;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 99px;
}

.greenBox > p{
  padding:10px;
  padding-left:80px;
  color:white;
  line-height:40px;

}

.greenBox > p > img{
  height:28px;
  margin-top:8px;
  position:absolute;
  margin-left:-40px;
}

.boxMerit{
  background-color:#E9FADC;
  margin-top:40px;
  width:48%;
  border-radius:10px;
  float:left;
}

.boxMerit > p{
  padding:25px;
  color:#19740A;
}


.boxMeritTitle{
  padding:6px 30px;
  background-color:#19740A;
  color:white;
  display:inline-block;
}

.boxMeritText{
  margin-left:30px;
  margin-bottom:15px;
  color:#19740A;
  text-decoration: underline;
  font-weight:bold;
  font-size:14.5px;
}

.boxDemerit{
  background-color:#FAECDC;
  margin-top:40px;
  width:48%;
  border-radius:10px;
  float:right;
}

.boxDemerit > p{
  padding:25px;
  color:#8A2D44;
}


.boxDemeritTitle{
  padding:6px 30px;
  background-color:#8A2D44;
  color:white;
  display:inline-block;
}

.boxDemeritText{
  margin-left:30px;
  margin-bottom:15px;
  color:#8A2D44;
  text-decoration: underline;
  font-weight:bold;
  padding-right:10px;
  font-size:14.5px;
}


.contentAreaBg{
  width: 100%;
  background-size: cover;
  padding-top:200px;
  padding-bottom:100px;
  margin-top:100px;
}

.contentAreaBoxList{
  margin:auto;
  width:80%;
  display:table;
  border-spacing: 25px 25px;
  margin-bottom:100px;
}

.contentAreaBoxListRow{
  display:table-row;
}

.contentAreaBox{
  background-color: white;
  border: 1px solid #FFFFFF;
  box-sizing: border-box;
  box-shadow: 10px 10px 4px rgba(0, 0, 0, 0.25);
  width:37%;
  margin:auto;
  margin-left:1.5%;
  margin-right:1.5%;
  display:table-cell;
}

.numImage{
  width:60px;
}

.contentBoxDetail{
  padding:20px 35px 35px 35px;
  font-size:14px;
  text-align:left;
  vertical-align: middle;
  display: inline-block;
  font-weight:300;
  letter-spacing: 4px;
  line-height:28px;
}

.contentBoxDetailTitle{
  font-size:20px;
  display: inline-block;
}

.numCircle {
  position: relative;
  display: inline-block;
  margin: 0em 15px 1em 0;
  padding: 0 5px;
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  color: black;
  font-size: 24px;
  font-weight: bold;
  border-radius: 50%;
  box-sizing: border-box;
}

.numImage{
  width:90%;
  margin:25px 0px 0px 0px;
}

.contentAreaBox2{
  background-color:white;
  border:1px solid #CAC09E;
  padding:3px;
  width:70%;
  margin:auto;
  margin-top:80px;
}

.contentAreaBox2Inner{
  display:table;
  background-color: #F7F5EE;
}

.contentAreaBox2Left{
  display: table-cell;
  width:200px;
  padding:20px;
  vertical-align: middle;
}
.contentAreaBox2Right{
  display: table-cell;
  padding:20px 40px 40px 40px;
  vertical-align: middle;
}
.box2Title{
  color:#06A097;
  font-size:21px;
  letter-spacing: 3px;
  font-weight:600;
  margin:20px 0px;
}

.box2Detail{
  font-weight:300;
  letter-spacing:4px;
  line-height:30px;
}

.mt100{
  margin-top:100px;
}

.w72{
  width:72%;
}

.pt300{
  padding-top:300px;
}

.p50{
  padding:50px;
}

.alertArea{
  border-radius:0px!important;
}

@media (max-width: 767px) {

  .serviceSubTitle{
    font-size:20px;
    letter-spacing: 0px;
  }
  .subTitleDetails{
    font-size:14px;
    letter-spacing: 0px;
    padding-top:10px;
  }
  .aboutTitleMessage{
    display:none;
  }
  .aboutMessage{
    padding:15px;
  }
  .aboutTitleMessageSp{
    color:#06A097;
    margin-top:20px;
    font-size:14px;
    font-weight:400;
    letter-spacing: 2px;
    display:block;
  }
  .aboutMessage > img{
    width:60%;
  }
  .aboutMessageBody{
    font-size:14px;
    font-weight:300;
    letter-spacing: 2px;
  }
  .aboutImage{
    height:200px;
  }

  .aboutWapper{
    margin-top:30px;
  }

  .indexArea{
    margin-top:30px;
    margin-bottom:20px;
  }
  .indexList{
    display:block;
    margin-top:0px;
  }
  .indexBox{
    display: block;
    width:100%;
    margin-bottom:15px;
    height:60px;
    font-size:16px;
    letter-spacing: 2px;
    padding-top:3px;
  }
  .indexBox > i{
    font-size:30px;
    position:absolute;
    /* left:30;
    top:14;  */
    left:30px;
    top:14px; 
  }

  .pt20{
    padding-top:16px;
  }
  

  .indexAreaRomaji{
    font-size:18px;
    letter-spacing:2px;
  }

  .indexAreaJa{
    font-size:22px;
    letter-spacing: 2px;
  }
  
  .contentAreaBoxList{
    display:block;
    width:95%
  }

  .contentAreaBox{
    display:block;
    width:100%;
  }

  .mt100{
    margin-top:0px;
  }


  .contentAreaBox2{
    width:95%;
  }

  .spNotDisplay{
    display:none;
  }
  .w72{
    width:95%;
  }
  .pt300{
    padding-top:150px;
  }

  .pt200{
    padding-top:100px;
  }

  .p50{
    padding:20px;
  }
  .box2Title{
    font-size:18px;
  }
  .box2Detail{
    font-size:14px;
    padding-bottom:30px;
  }
  .contentAreaBox2Right{
    padding:0px 20px;
  }
  .contentAreaBox2{
    margin-top:20px;
  }

  .mtm100{
    margin-top:-100px;
  }

  .slant-bg-inner{
    width:100%;
    margin:auto;
  }

  .greenBox{
    font-size:17px;
    display:block;
    width:96%;
    margin:8px;
    float:initial!important;
  }
  .greenBox > p{
    padding:10px;
    padding-left:60px;
    color:white;
    line-height:40px;
  
  }
  
  .greenBox > p > img{
    height:28px;
    margin-top:6px;
    position:absolute;
    margin-left:-40px;
  }
  .boxMerit{
    width:100%;
  }
  .boxDemerit{
    width:100%;
  }
  .imgPCNone{
    display:block;
    text-align:center;
    margin:20px 0px;
  }

  .imgPCNone > img{
    width:200px;
  }
  .otherAlert{
    font-size:18px;
    line-height:35px!important;
  }
  .boxMeritText{
    padding-right:20px;
  }
  .wd100{
    width:initial!important;
  }
  .facility_inbox{
    width:initial;
  }
  .contentAreaBox{
    width:initial;
  }
  .boxRadiusDDD{
    width:initial;
  }
  .facility_inbox_table{
    width:initial;
  }
  .slant-bg-inner{
    width:95%;
  }
  .pageWrapper{
    width:95%;
  }

  .merit6{
    font-size:16px;
    line-height:35px;
    padding:10px;
    margin:30px 0px;
  }

  .kodawariTitle{
    margin-top:20px;
  }

}