@charset "utf-8";
/* ----------------------------------------
 cmn-group
------------------------------------------- */
.page-group01{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.page-group01 .box01 {
  width: 35%;
}
.page-group01 .box02 {
  width: 60%;
}
.page-group01 .box02 p{
  line-height: 2;
}
.group-img{
  overflow: hidden;
  border-radius: 20px;
}
.group-img img{
  display: block;
}
/* ----------------------------------------
 faq
------------------------------------------- */
#voice .female {
  background-color: #f7faf9;
}
#faq li{
margin-bottom: 30px;
}
#faq li:last-child{
margin-bottom: 0;
}
#faq dt{
position: relative;
font-size: 2.4rem;
font-weight: 500;
line-height: 1.6;
background-color: #f7faf9;
padding: 20px 20px 20px 75px;
}
#faq dt::before{
position: absolute;
display: inline-block;
content: "Q";
color: #46a6cc;
font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
font-size: 5rem;
line-height: 1;
top: 10px;
left: 25px;
}
#faq dd{
position: relative;
padding: 30px 20px 20px 75px;
}
#faq dd::before{
position: absolute;
display: inline-block;
content: "A";
color: rgba(143, 162, 195,0.8);
font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
font-size: 5rem;
line-height: 1;
top: 20px;
left: 25px;
}
/* ----------------------------------------
 flow
------------------------------------------- */
#flow ul li{
  display: block;
  width: 100%;
  margin-bottom: 50px;
}
#flow ul li .box{
  box-sizing: border-box;
  background-color: rgba(143, 162, 195,0.2);
  padding: 50px;
}
#flow ul li:last-child{
  margin-bottom: 0;
}
#flow .box01{
  width: 30%;
}
#flow .box02{
  width: 65%;
}
#flow .box02 h3{
  color: #000;
  font-size: 3.0rem;
  line-height: 1.4;
  text-align: left;
  border-bottom: 1px solid #cde9d7;
  padding-bottom: 10px;
  margin-bottom: 30px;
}
#flow .box02 h3 span{
  font-size: 120%;
  margin-right: 10px;
}
/* ----------------------------------------
 cmn-table
------------------------------------------- */
.cmn-table01 {
  width: 100%;
}
.cmn-table01 th{
  width: 24%;
}
.cmn-table01 th,.cmn-table01 td{
  box-sizing: border-box;
  font-weight: 400;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid #ccc;
  padding: 16px 0;
}
.cmn-table01 tr:last-child th,.cmn-table01 tr:last-child td{
  border-bottom: none;
  padding: 18px 0 0 0;
}
.cmn-table02 {
  width: 100%;
}
.cmn-table02 th{
  width: 24%;
}
.cmn-table02 th,.cmn-table02 td{
  box-sizing: border-box;
  font-weight: 400;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid #ccc;
  padding: 15px;
}
.cmn-table02 tr:first-child th,.cmn-table02 tr:first-child td{
  border-top: 1px solid #ccc;
}
.cmn-table02 tr:nth-child(2n) th,.cmn-table02 tr:nth-child(2n) td{
  background:rgba(143, 162, 195,0.2);
}
/* ----------------------------------------
 cmn-list
------------------------------------------- */
.cmn-list01 {
  display: flex;
  flex-wrap: wrap;
}
.cmn-list01 li{
  width: 50%;
  margin-bottom: 10px;
}
.icon01 li::before {
  content: "\f0ad";
  color: #dd7436;
  font-family: 'Font Awesome 6 Free';
  display: inline-block;
  margin-right: 5px;
}



/* ----------------------------------------
 service
------------------------------------------- */
#service .box {
  position: relative;
  padding-bottom: 110px;
}
#service .wrapper {
  position: relative;
  z-index: 10;
}
#service .box::before {
  position: absolute;
  content: "";
  display: block;
  width: 65%;
  height: 85%;
  background-color: #f8f0eb;
  right: 0;
  bottom: 0;
  z-index: 1;
  border-radius: 30px 0 0 30px;
}
/* ----------------------------------------
 service
------------------------------------------- */
#greeting .txt {
  margin-bottom: 30px;
}
#greeting .name {
  text-align: right;
  font-weight: 700;
}

/* =======================
  PC
======================== */
@media screen and (min-width: 1600px) {}
/* =======================
  TABLET
======================== */
@media screen and (max-width:1599px) {
}
/* =======================
  SP
======================== */
@media screen and (max-width: 899px) {
/* ----------------------------------------
 cmn-group
------------------------------------------- */
.page-group01{
  display: block;
}
.page-group01 .box01 {
  width: 70%;
  margin: 0 auto 30px auto;
}
.page-group01 .box02 {
  width: 100%;
}
.group-img{
  border-radius: 15px;
}
  /* ----------------------------------------
 service
------------------------------------------- */
  #service .box {
    padding-bottom: 30px;
  }
  #service .wrapper {
    position: relative;
    z-index: 10;
  }
  #service .box::before {
    width: 65%;
    height: 95%;
    border-radius: 15px 0 0 15px;
  }
/* ----------------------------------------
 cmn-list
------------------------------------------- */
.cmn-list01 li{
  width: 100%;
  margin-bottom: 10px;
}
/* ----------------------------------------
 faq
------------------------------------------- */
#faq li{
margin-bottom: 15px;
}
#faq li:last-child{
margin-bottom: 0;
}
#faq dt{
font-size: 1.7rem;
padding: 15px 15px 15px 60px;
}
#faq dt::before{
font-size: 4rem;
top: 10px;
left: 15px;
}
#faq dd{
padding: 15px 15px 15px 60px;
}
#faq dd::before{
font-size: 4rem;
top: 10px;
left: 15px;
}
/* ----------------------------------------
 #flow
------------------------------------------- */
#flow ul li{
  margin-bottom: 30px;
}
#flow ul li .box{
  padding: 30px;
}
#flow ul li:last-child{
  margin-bottom: 0;
}
#flow .box01{
  width: 100%;
  margin-bottom: 15px;
}
#flow .box02{
  width: 100%;
}
#flow .box02 h3{
  font-size: 1.8rem;
  padding-bottom: 5px;
  margin-bottom: 15px;
}


}