@charset "utf-8";

/* insurance-benefits.css
 * おまかせプラン ver.7 - v1.0.0
 * 2022-09-01
 * **************************************************
 * Care
 * **************************************************
 */

/* Care
------------------------------------------------------------------- */

/* Table*/
/* 要介護度 */
.common-table.limit-care th {
  text-align: center;
}
.common-table.limit-care td {
  text-align: center;
}
/* 居宅サービスの種類 */
.common-table.service-use th {
  width: 100px;
}
/* 高額介護サービス費 */
.common-table.service .line-top-none {
  width: 30px;
  border-top: none;
}
.common-table.service tbody td:last-child {
  width: 35%;
  text-align: center;
}

/* Div */
/* 要介護認定 */
.cert-flow {
  float: right;
  margin: 20px 0 20px 30px;
  width: 320px;
  text-align: center;
}
/* 要介護認定：矢印：共通 */
.cert-flow .fst::before,
.cert-flow .fst span::before,
.cert-flow .snd span::before,
.cert-flow .trd span::before,
.cert-flow .fth span::before {
  box-sizing: border-box;
  content: '';
  position: absolute;
  top: -15px;
  bottom: -89px;
  margin: auto;
  width: 15px;
  height: 15px;
  border: 15px solid transparent;
  border-left: 15px solid #ddd;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
}
.cert-flow .fst::after,
.cert-flow .fst span::after,
.cert-flow .snd span::after,
.cert-flow .trd span::after,
.cert-flow .fth span::after {
  box-sizing: border-box;
  content: '';
  position: absolute;
  bottom: -30px;
  margin: auto;
  width: 15px;
  height: 30px;
  background-color: #ddd;
}
/* 認定申請 */
.cert-flow .fst {
  position: relative;
}
.cert-flow .fst span {
  position: relative;
  display: block;
  padding: 8px 0;
  background-color: #cbdeef;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  outline: 1px solid #fff;
  outline-offset: -5px;
  font-size: 1.6em;
  font-weight: 500;
}
.cert-flow .fst::before {
  left: -53%;
  right: 0;
}
.cert-flow .fst::after {
  left: -53%;
  right: 0;
}
.cert-flow .fst span::before {
  left: 0;
  right: -53%;
}
.cert-flow .fst span::after {
  left: 0;
  right: -53%;
}
/* 認定調査・主治医意見書 */
.cert-flow .snd {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 45px;
}
.cert-flow .snd span {
  position: relative;
  display: block;
  padding: 8px 0;
  width: -webkit-calc(50% - 10px);
  width: calc(50% - 10px);
  -webkit-border-radius: 2px;
  border-radius: 2px;
  outline: 1px solid #fff;
  outline-offset: -5px;
  font-size: 1.6em;
  font-weight: 500;
}
.cert-flow .snd span::before {
  left: 0;
  right: 0;
}
.cert-flow .snd span::after {
  left: 0;
  right: 0;
}
.cert-flow .snd span:first-child {
  background-color: #c9e2c3;
}
.cert-flow .snd span:last-child {
  background-color: #d5caae;
}
.cert-flow .snd span:last-child::before {
  bottom: -270px;
}
.cert-flow .snd span:last-child::after {
  height: 120px;
  bottom: -120px;
}
.cert-flow .snd span + span{
  margin-left: 20px;
}
/* 1次判定 */
.cert-flow .trd {
  margin-top: 45px;
  width: 60%;
}
.cert-flow .trd span {
  position: relative;
  display: block;
  padding: 8px 0;
  background-color: #f8cfb6;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  outline: 1px solid #fff;
  outline-offset: -5px;
  outline: 1px solid #fff;
  outline-offset: -5px;
  font-size: 1.6em;
  font-weight: 500;
}
.cert-flow .fth span {
  position: relative;
  display: block;
  padding: 8px 0;
  background-color: #f8cfb6;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  outline: 1px solid #fff;
  outline-offset: -5px;
  font-size: 1.6em;
  font-weight: 500;
}
.cert-flow .trd span::before {
  left: 0;
  right: 0;
}
.cert-flow .trd span::after {
  left: 0;
  right: 0;
}
/* 2次判定 */
.cert-flow .fth {
  margin-top: 45px;
}
.cert-flow .fth span::before {
  left: 0;
  right: 0;
}
.cert-flow .fth span::after {
  left: 0;
  right: 0;
}
/* 要介護状態区分決定 */
.cert-flow .fith {
  margin-top: 45px;
  padding: 10px;
  background-color: #f1f1f1;
  -webkit-border-radius: 2px;
  border-radius: 2px;
}
.cert-flow strong {
  display: block;
  margin-bottom: 5px;
  font-size: 1.6em;
  font-weight: 700;
}
.cert-flow .fith > span {
  display: flex;
  justify-content: center;
  align-items: center;
}
.cert-flow .fith > span span {
  display: block;
  padding: 10px 0;
  width: -webkit-calc(50% - 10px);
  width: calc(50% - 10px);
  background-color: #f7bdbf;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  outline: 1px solid #fff;
  outline-offset: -5px;
  font-size: 1.6em;
  font-weight: 500;
  line-height: 1.4;
}
.cert-flow .fith > span span + span {
  margin-left: 20px;
}

/* 自己負担 */
.expenses h3 {
  position: relative;
  margin-left: 25px;
  font-size: 2.0em;
  font-weight: 500;
  color: #3bb5e2;
}
.expenses h3::before {
  content: '';
  position: absolute;
  top: 12px;
  left: -25px;
  display: block;
  width: 15px;
  height: 5px;
  border-left: 3px solid #00a8c4;
  border-bottom: 3px solid #00a8c4;
  transform: rotate(-45deg);
}
.expenses p {
  margin-top: 15px;
  font-size: 1.6em;
}
.expenses .rate {
  margin-right: 5px;
  padding: 8px 12px;
  border: 1px solid #3bb5e2;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  font-weight: 500;
  color: #3bb5e2;
}
.expenses .exp {
  margin-right: 5px;
  padding: 8px 12px;
  border: 1px solid #3bb5e2;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
.expenses .plus {
  margin-right: 5px;
  font-size: 120%;
  font-weight: 900;
  line-height: 1;
}
.expenses .set {
  position: relative;
  left: 265px;
  display: inline-block;
  margin-top: 20px;
  padding: 5px 8px;
  border: 1px solid #000;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  font-size: 1.4em;
}
.expenses .set::before {
  z-index: 2;
  content: "";
  position: absolute;
  top: -24px;
  left: 50%;
  margin-left: -15px;
  border: 12px solid transparent;
  border-bottom: 12px solid #FFF;
}
.expenses .set::after {
  z-index: 1;
  content: "";
  position: absolute;
  top: -28px;
  left: 50%;
  margin-left: -17px;
  border: 14px solid transparent;
  border-bottom: 14px solid #000;
}
.expenses p + h3 {
  margin-top: 30px;
}

/* List*/
/* 自己負担 */
.self-pay {
  display: flex;
  margin-top: 30px;
  width: 100%;
}
.self-pay > li {
  padding: 10px 20px;
  width: 50%;
  border: 2px solid #d7d7d7;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
.self-pay > li + li {
  margin-left: 20px;
}
.self-pay dt {
  margin-bottom: 5px;
  font-size: 1.6em;
  font-weight: 500;
  color: #3bb5e2;
}
.self-pay dd {
  font-size: 1.6em;
}
.self-pay .note li {
  font-size: 0.875em;
}

@media screen and (max-width: 767px) {
  /* Care
  ------------------------------------------------------------------- */

  /* Div */
  /* 要介護認定 */
  .cert-flow {
    float: none;
    margin: 10px 0 30px 0;
    width: auto;
    }

  /* Table*/
  /* 居宅サービスの種類 */
  .common-table.service-use th {
    width: 50px;
  }
  /* 高額介護サービス費 */
  .common-table.service .line-top-none {
    width: 5px;
  }
  .common-table.service tbody td:last-child {
    width: 40%;
  }

  /* 自己負担 */
  .expenses h3 {
    font-size: 1.8em;
  }
  .expenses p {
    margin-top: 10px;
  }
  .expenses .rate {
    display: block;
    margin: 0;
  }
  .expenses .exp {
    display: block;
    margin: 0;
  }
  .expenses .plus {
    display: block;
    margin: 10px 0 10px 0;
    text-align: center;
  }
  .expenses .set {
    left: 0;
    display: block;
    margin-top: 10px;
    padding: 5px 8px;
  }
  .expenses p + h3 {
    margin-top: 20px;
  }

  /* List*/
  /* 自己負担 */
  .self-pay {
    display: block;
  }
  .self-pay > li {
    padding: 10px 10px;
    width: -webkit-calc(100% - 20px);
    width: calc(100% - 20px);
  }
  .self-pay > li + li {
    margin: 20px 0 0 0;
  }
}