@charset "UTF-8";


/* ───────── 

  SYSTEM

───────── */


/*待ち合わせポイントへのリンク*/
.meetpoint-wrap{
  padding-bottom: 30px;
  text-align: center;
}
.meetpoint-wrap h3 span{
  display: inline-block;
  padding: 5px 10px;
  margin-bottom: 20px;
  background: var(--color-accent);
  color: var(--color-white);
  font-size: var(--text-base);
}



/* ───────── 
  #la-milk-mama - 在籍ママさんについて
───────── */
.la-milk-mama-wrap{
    display: flex;
    flex-direction: column;
    gap:40px;
}

.mama-info{
  display: flex;
  gap:10px;
  align-items: center;
}
.mama-info h3{
  font-size: var(--text-L);
}
.mama-img{
  width: 30%;
  text-align: center;
}
.mama-img img{
  max-width: 150px;
  width: 100%;
}
.mama-txt{
  width: 70%;
    display: flex;
    flex-direction: column;
    gap:10px;
}
.la-milk-mama-wrap .mama-info:nth-of-type(2){
  flex-direction: row-reverse;
}
.la-milk-mama-wrap .mama-info:nth-of-type(3),
.la-milk-mama-wrap .mama-info:nth-of-type(4){
  width: 100%;
  display: block;
}
.la-milk-mama-wrap .mama-info:nth-of-type(3) .mama-txt,
.la-milk-mama-wrap .mama-info:nth-of-type(4) .mama-txt{
  width: 100%;
}
.mama-info .btn-pale{
  margin: 10px auto;
}



/* ───────── 
  #flow - ご利用の流れ
───────── */
#flow.section-box-nobg{
  padding: 20px 0 0;
}
.flow-wrap{
    display: flex;
    flex-direction: column;
    gap:40px;
}
.flow-wrap .box-callout-icon{
  background: var(--color-white);
}

.flow-flow1,
.flow-flow2,
.flow-flow3,
.flow-flow4meet,
.flow-flow4deli,
.flow-flow5{
    display: flex;
    flex-direction: column;
    gap:10px;
}
.flow-box{
  padding: 20px 20px 50px;
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  background: var(--color-white);
  border-radius: 10px;
  scroll-margin-top: 100px;
  position: relative;
}

.flow-box .section-title{
  font-size: 2em;
}
@media (max-width: 480px) {
    .section-title-box {
        display: flex;
        flex-direction: row;
        gap: 5px;
        align-items: baseline;
    }
}


/*出勤日発表*/
.flow-flow1 .shopinfo{
  padding: 10px;
  margin:10px auto 0 auto;
  border: solid 1px var(--color-accent);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  max-width: 800px;
}
.flow-flow1 .list-dl-icon{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  width:100%;
  gap: 10px;
  font-size: var(--text-L);
}
.flow-flow1 .list-row {
  padding: 0;
}
.flow-flow1 .list-row dt{
  width: 7em;
  font-weight: 500;
}
.flow-flow1 .list-row dt .material-icons-round{
  margin-right: 5px;
}
.flow-flow1 .list-row dd{
  width:calc(100% - 7em);
  display: inline-block;
  padding: 0;
  font-weight: 500;
}
.flow-flow1 .list-row dd strong{
  font-size: var(--text-L3);
}

@media (min-width: 481px) {
  .flow-flow1 .shopinfo{
    align-items: flex-end;
    flex-direction: row;
    justify-content: space-between;
    gap: 5px;
  }
  .flow-flow1 .shopinfo .list-row{
    min-width:17em;
    max-width: 20em;
  }
}


/*ご予約内容の確認*/
  .flow-flow2 .list-nomal li{
    font-weight: 500;
  }
@media (min-width: 570px) {
  .flow-flow2 .list-nomal{
    flex-direction: row;
    flex-wrap: wrap;
    gap:10px;
  }
  .flow-flow2 .list-nomal li{
    width: calc((100% - 20px) / 3);
  }
}


/*待ち合わせ or デリバリー*/
.flow-flow4 .list-row{
  gap:5px;
  margin: 10px 0;
  justify-content: center;
}
.flow-flow4 .list-row li{
  gap:0;
}
.flow-flow4 .list-row li::after{
  content: '';
  width: 0;
  margin-left: 0;
}

.flow4inbox{
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap:20px;
}
.flow4inbox #flow-flow4meet,
.flow4inbox #flow-flow4deli{
  width: 100%;
}
.flow4inbox #flow-flow4meet > div,
.flow4inbox #flow-flow4deli > div{
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap:10px;
}

#meetpointlist{
  margin: 10px 0;
  display: flex;
  flex-direction: column;
  gap:20px;
}
#meetpointlist dt{
  font-size: var(--text-L);
  font-weight: 600;
}
#meetpointlist dd{
  padding-left: 1.3em;
}


@media (min-width: 481px) {
  .flow-flow4 .list-row{
    display: none;
  }
  .flow4inbox{
    gap:30px;
  }
  #meetpointlist{
    flex-wrap: wrap;
    flex-direction: row;
  }
  #meetpointlist li{
    width: calc((100% - 20px) / 2);
  }
}



/* ───────── 
  #price - 料金
───────── */
.price-wrap{
    display: flex;
    flex-direction: column;
    gap:40px;
}
/*基本の料金（入会金等）表示*/
.price-bace .table-price th span{
  display: none;
}
@media (min-width: 481px) {  /*PC*/
  .price-bace .table-price th span{
  display: block;
  line-height: 1.5;
  }
}

.price-mamatitle{
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.4;
  font-size: var(--text-L);
  margin-bottom: 15px;
}
.price-mamatitle img{
  width: 20%;
  max-width: 70px;
}
.price-mamatitle h3{
  color: var(--color-mid);
}
.price-mamatitle h3 span{
  font-size: 16px;
  display: block;
}

.table-price .priceTxt{
position: absolute;
left:-1.2em;
top:2px;
padding: 2px 1px;
background: var(--color-accent);
color: var(--color-white);
border-radius: 2px;
font-size: 80%;
line-height: 1.1;
transform: rotate(-5deg);
}
@media (min-width: 481px) {  /*PC*/
.table-price .priceTxt{
left:-0;
top:0;
  }
}


/*カード決済*/
.price-card{
    display: flex;
    flex-direction: column;
    gap:20px;
}
.price-card .card-fee{
  background: var(--color-accent);
  color: var(--color-white);
  padding: 5px;
  text-align: center;
  font-size: var(--text-L);
  font-weight: 600;
}




/* ───────── 
  #promise - ご利用のお約束
───────── */
.promise-wrap{
    display: flex;
    flex-direction: column;
    gap:20px;
}


/* ───────── 
  #forforeigners - 外国人の方へ
───────── */
.forforeigners-wrap{
    display: flex;
    flex-direction: column;
    gap:20px;
}