/*===========ゆり用左側吹き出し========*/
.balloon-009 {
    display: flex;
    justify-content: center;
    align-items: start;
    gap: 0 22px;
}

.balloon-009 img {
    max-width: 100px;
    height: 100%;
    border: 0px solid #e0efff;
    border-radius: 50%;
}

.balloon-009 p {
    position: relative;
    max-width: 800px;
    margin: 3px 0 0;
    padding: .8em 1em;
    border-radius: 5px;
    background-color: #e0efff;
    color: #333333;
}

.balloon-009 p::before {
    position: absolute;
    left: -15px;
    width: 15px;
    height: 30px;
    background-color: #e0efff;
    clip-path: polygon(0 50%, 100% 0, 100% 100%);
    content: '';
}


/*===========まこ用右側吹き出し========*/
.balloon-015 {
    display: flex;
    justify-content: center;
    align-items: start;
    gap: 0 22px;
}

.balloon-015 img {
    max-width: 70px;
    height: 100%;
    border: 3px solid #ffe0e0;
    border-radius: 50%;
}

.balloon-015 p {
    position: relative;
    max-width: 800px;
    margin: 3px 0 0;
    padding: .8em 1em;
    border-radius: 5px;
    background-color: #ffe0e0;
    color: #333333;
}

.balloon-015 p::before {
    position: absolute;
    right: -15px;
    width: 15px;
    height: 30px;
    background-color: #ffe0e0;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    content: '';
}









/*=======解説のためのcss====*/
.box-017 {
    max-width: 1000px;
    margin: 0 auto;
    padding: .5em 1.5em 1em;
    border-top: 5px solid #2589d0;
    border-radius: 3px;
    background-color: #f2f2f2;
}

.box-017 > div {
    margin-bottom: .5em;
    color: #2589d0;
    font-weight: 600;
    font-size: 1.05em;
}

.box-017 > p {
    margin: 0;
    color: #000000;
}

  /*============ひとことメモのためのcss=======*/
  .box-019 {
    position: relative;
    margin-top: 1em;
    padding: 1.8em 1.5em 1em 1.5em;
    border: 2px solid #2589d0;
    margin-left: 10%;
    margin-right: 10%;
  }
  
  .box-019 > div {
    position: absolute;
    top: -1.15em;
    left: -.5em;
    padding: .4em 1.4em;
    border-radius: 25px;
    background-color: #2589d0;
    color: #fff;
    font-size: .9em;
  }
  
  .box-019 > div::before {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 8px;
    background-color: #2589d0;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: '';
  }
  
  .box-019 p {
    margin: 0;
    color: #000000;
  }



/*===緑ボックス=====*/
.box-018 {
    position: relative;
    max-width: 600px;
    margin: 0 auto;
    padding: 1em calc(1.5em + 9px);
    border-top: 3px solid #96d35f;
    border-bottom: 3px solid #96d35f;
    color: #333;
}

.box-018::before,
.box-018::after {
    position: absolute;
    width: 3px;
    top: 50%;
    transform: translateY(-50%);
    height: calc(100% + 20px);
    background-color: #96d35f;
    content: '';
}

.box-018::before {
    left: 9px;
}

.box-018::after {
    right: 9px;
}

/*===黄ボックス=====*/
.box-020 {
    position: relative;
    max-width: 600px;
    margin: 0 auto;
    padding: 1em calc(1.5em + 9px);
    border-top: 3px solid #f7f45e;
    border-bottom: 3px solid #f7f45e;
    color: #333;
}

.box-020::before,
.box-020::after {
    position: absolute;
    width: 3px;
    top: 50%;
    transform: translateY(-50%);
    height: calc(100% + 20px);
    background-color: #f7f45e;
    content: '';
}

.box-020::before {
    left: 9px;
}

.box-020::after {
    right: 9px;
}



/*=====方眼紙======*/
.box-003 {
    max-width: 920px;
    margin: 0 auto;
    padding: 1em 1.5em;
    box-shadow: 0 4px 4px rgb(0 0 0 / 5%), 0 2px 3px -2px rgb(0 0 0 / 1%);
    background-image: linear-gradient(transparent calc(100% - 1px), #e6edf3 50%, #e6edf3), linear-gradient(90deg, transparent calc(100% - 1px), #e6edf3 50%, #e6edf3);
    background-size: 15px 15px;
    background-repeat: repeat;
    background-color: #fff8f4;
    color: #333333;
}