@charset "utf-8";
/* 月極保育 */

/***************************
 ** 冒頭のメッセージ
 */
.monthly_lead {
  margin-bottom: 3rem;
}

.monthly_lead > p {
  flex-basis: 25%;
  margin-right: 3%;
}

.monthly_lead > div {
  flex-basis: 72%;
}

@media screen and (max-width: 736px) {
  .monthly_lead {
    margin-bottom: 1.5rem;
  }

  .monthly_lead > p {
    flex-basis: 100%;
    margin-right: 0;
    margin-bottom: 1rem;
  }

  .monthly_lead > div {
    flex-basis: 100%;
  }
}


/***************************
 ** 営業時間
 */
.course {
  margin-bottom: 1rem;
}

.course li:first-child::before {
  font-family: "Font Awesome 5 Free";
  content: '\f185';
  font-weight: 900;
  font-size: 1.25rem;
  display: inline-block;
  margin-right: 0.5rem;
  color: red;
}

.course li:last-child::before {
  font-family: "Font Awesome 5 Free";
  content: '\f186';
  font-weight: 900;
  font-size: 1.25rem;
  display: inline-block;
  margin-right: 0.5rem;
  color: blue;
}


/***************************
 ** 月極保育料金
 */
/* コース別料金のタブ切り替え */
.tab_area li::before {
  font-family: "Font Awesome 5 Free";
  content: '\f12e';
  font-weight: 900;
  font-size: 1.25rem;
  display: inline-block;
  margin-right: 0.5rem;
  color: #F57878;
}

.tab_area {
  border-bottom: 1px solid #F57878;
  margin-bottom: 2rem;
}

.tab_area li {
  display: inline-block;
  padding: 1rem;
  margin-right: 1rem;
  border: 1px solid #F57878;
  border-bottom: none;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  font-size: 1.15rem;
  font-weight: bold;
  cursor: pointer;
}

.tab_area li br {
  display: none;
}

.select {
  background: #F57878;
  color: #fff;
}

.tab_area li.select::before {
  color: #fff;
}

.hide {
  display: none;
}

/* 月極保育料金(タブコンテンツ)*/
.price_wrap h4 {/* タブコンテンツのタイトル */
  font-family: "Sawarabi Mincho";
  margin-bottom: 1.5rem;
  font-size: 1.35rem;
}

.price_wrap h4 br {
  display: none;
}

.price_wrap .sec_sub_ttl_s {
  margin-bottom: 0.5rem;
}

.price_table_01 {
  width: 30%;
  margin-bottom: 1rem;
}

.price_table_01 tr th,
.price_table_01 tr td {
  width: 50%;
  vertical-align: middle;
}

.price_table_01 tr td {
  text-align: right;
}

.double_table {
  width: 60%;
}

.price_table_02 {
  width: 60%;
  margin-bottom: 1rem;
}

.price_table_02 tr th,
.price_table_02 tr td {
  vertical-align: middle;
}

.price_table_02 tr th br {
  display: none;
}

.price_table_02 tr td {
  text-align: right;
}

.price_wrap .base_list {
  margin-top: 2rem;
}

.price_wrap .base_list li {
  margin-bottom: 0.5rem;
}

@media screen and (max-width: 736px) {
  /* コース別料金のタブ切り替え */
  .tab_area li::before {
    display: none;
  }

  .tab_area {
    margin-bottom: 1rem;
  }

  .tab_area li {
    padding: 0.6rem;
    margin-right: 0.6rem;
    font-size: 1rem;
    line-height: 1.3;
  }
  
  .tab_area li span {
    font-size: 0.75rem;
  }
  
  .tab_area li:last-child {
    margin-right: 0;
  }
  
  .tab_area li br {
    display: inline;
  }

  /* 月極保育料金(タブコンテンツ)*/
  .price_wrap h4 {/* タブコンテンツのタイトル */
    font-size: 1.25rem;
  }
  
  .price_wrap h4 br {
    display: inline;
  }

  .price_table_01 {
    width: 100%;
  }

  .double_table {
    width: 100%;
    margin-bottom: 1rem;
  }
  
  .double_table table {
    margin: 0;
  }

  .price_table_02 {
    width: 100%;
  }
  
  .price_table_02 tr th {
    line-height: 1.2;
  }
  
  .price_table_02 tr th br {
    display: inline;
  }
}

@media screen and (max-width: 320px) {
  .tab_area li {
    font-size: 0.875rem;
    margin-right: 0.3rem;
  }
  
  .tab_area li:last-child {
    margin-right: 0;
  }
  
  .price_table_01 tr th,
  .price_table_01 tr td {
    font-size: 0.75rem;
  }
  
  .price_table_02 tr th,
  .price_table_02 tr td {
    font-size: 0.75rem;
  }
}


/***************************
 ** お預かりについて
 */
.necessary_list {
  margin-bottom: 2rem;
}

.necessary_list li {
  display: inline-block;
  margin-right: 1rem;
}

.necessary_list li::before {
  content: "□";
  display: inline-block;
  margin-right: 0.3rem;
  color: #ccc;
}

.caution_sub_list {
  margin-left: 2rem;
  font-size: 0.875rem;
}

.caution_sub_list li::before {
  content: "- ";
}

@media screen and (max-width: 736px) {
  .necessary_list li {
    font-size: 0.875rem;
  }
}


/***************************
 ** 一日の流れ
 */
.flow_list dt {
  font-size: 1.25rem;
  font-family: "Sawarabi Mincho";
  color: #F57878;
  margin-bottom: 0.5rem;
}

.flow_list dd {
  position: relative;
  margin-bottom: 3rem;
}

.flow_list dd:last-child {
  margin-bottom: 0;
}

.flow_list dd::after {
  content: "";
  position: absolute;
  /*right: 0;*/
  bottom: -1.5rem;
  left: 0;
  width: 0;
  height: 0;
  margin: auto;
  border-style: solid;
  border-color: #FFD8D0 transparent transparent transparent;
  border-width: 20px 20px 0 20px;
}

.flow_list dd:last-of-type::after {
  display: none;
}

.schedule > div {
  flex-basis: 49%;
}
.schedule > div:first-child {
  margin-right: 2%;
}

.schedule h4 {
  margin-bottom: 0.5rem;
}

.schedule table {
  border: 1px solid #ccc;
  width: 100%;
}

.schedule table tr th,
.schedule table tr td {
  box-sizing: border-box;
  padding: 0.5rem 1rem;
  border-bottom: 1px dotted #ccc;
  text-align: left;
}

.schedule table tr th {
  width: 30%;
  font-weight: bold;
}

.schedule table tr td {
  width: 70%;
}

@media screen and (max-width: 736px) {
  .flow_list dd {
    font-size: 1.15rem;
  }
  
  .flow_list dd {
    font-size: 0.875rem;
  }
  
  .schedule > div {
    flex-basis: 100%;
  }
  
  .schedule > div:first-child {
    margin-right: 0;
    margin-bottom: 1rem;
  }

  .schedule table tr th {
    width: 40%;
  }

  .schedule table tr td {
    width: 60%;
  }
}


/***************************
 ** 設定保育
 */
#setting_list {
  margin-bottom: 2rem;
}

#setting_list li {
  display: inline-block;
  margin-right: 1.5rem;
  margin-bottom: 0.3rem;
}

#setting_list li span {
  display: inline-block;
  margin-left: 2rem;
}

#setting_table {
  width: 50%;
}

@media screen and (max-width: 736px) {
  #setting_table {
    width: 100%;
  }
}


/***************************
 ** 月ごとの行事
 */
#event_table table:first-of-type {
  margin-right: 2%;
}

#event_table table tr th {
  width: 20%;
}

#event_table table tr td {
  width: 80%;
}

@media screen and (max-width: 736px) {
  #event_table table {
    width: 100%;
  }
  
  #event_table table:first-of-type {
    margin-right: 0;
  }
}