
br {
  display: block;
  content: "";
  margin: 10px 0;
  }

img{display: block;
    margin-left: auto;
    margin-right: auto;
}

@media screen and ( min-width:800px ){
  .main{
    width: 600px;
    margin:0 auto;
  }

  .quote-2 {
    max-width: 500px;
    position: relative;
    padding: 2.5em 2.5em 2em 3em;
    color: #333333;
}

.quote-2::before,
.quote-2::after {
    display: inline-block;
    position: absolute;
    width: 4em;
    height: 4em;
    content: '';
}

.quote-2::before {
    top: 0;
    left: 0;
    border-top: 3px solid #2589d0;
    border-left: 3px solid #2589d0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.58341 17.3211C3.55316 16.2274 3 15 3 13.0103C3 9.51086 5.45651 6.37366 9.03059 4.82318L9.92328 6.20079C6.58804 8.00539 5.93618 10.346 5.67564 11.822C6.21263 11.5443 6.91558 11.4466 7.60471 11.5105C9.40908 11.6778 10.8312 13.159 10.8312 15C10.8312 16.933 9.26416 18.5 7.33116 18.5C6.2581 18.5 5.23196 18.0095 4.58341 17.3211ZM14.5834 17.3211C13.5532 16.2274 13 15 13 13.0103C13 9.51086 15.4565 6.37366 19.0306 4.82318L19.9233 6.20079C16.588 8.00539 15.9362 10.346 15.6756 11.822C16.2126 11.5443 16.9156 11.4466 17.6047 11.5105C19.4091 11.6778 20.8312 13.159 20.8312 15C20.8312 16.933 19.2642 18.5 17.3312 18.5C16.2581 18.5 15.232 18.0095 14.5834 17.3211Z' fill='%232589d0'%3E%3C/path%3E%3C/svg%3E");
    background-position: top 35% left 35%;
    background-size: 2em;
    background-repeat: no-repeat;
}

.quote-2::after {
    bottom: 0;
    right: 0;
    border-bottom: 3px solid #2589d0;
    border-right: 3px solid #2589d0;
}

.quote-2 p {
    margin-top: 0;
}

.quote-2 cite {
    display: block;
    color: #737373;
    font-size: .8em;
    text-align: right;
}

.heading-1 {
    padding: .5em .7em;
    border-left: 5px solid #2589d0;
    color: #333333;
}

.heading-33 {
    border-bottom: 3px solid #f2f2f2;
}

.heading-33 span {
    display: inline-block;
    position: relative;
    padding: 0 .4em .2em;
    color: #333333;
}

.heading-33 span::before {
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #2589d0;
    content: '';
}

    .text {
      margin: 0 auto　20px;
      max-width: 90%;
      letter-spacing: 0.03em;
      font-size: 20px;
      line-height: 30px;
  }
 
    .img2{
      height: 693.75px;
      width: 600px;
      }
  
      .img3{
        height: 340px;
        width: 600px;
        }
  
        a.btn-c {
          font-size: 6vw;
          width: 100%;
          position: relative;
          padding: 0.25rem 10px 1.5rem 10px;
          color: #fff;
          background: #32b16c;
          -webkit-box-shadow: 0 5px 0 #2c9d60;
          box-shadow: 0 5px 0 #2c9d60;
          margin: 20px auto;
          display: block;
      }
  
      a.btn-c span {
        font-size: 17px;
        position: absolute;
        top: -10px;
        right: 0;
        left: 0;
        margin: 0 auto;
        display: block;
        width: 87%;
        padding: 0.2rem 0;
        color: #32b16c;
        border: 2px solid #32b16c;
        border-radius: 0.5rem;
        background: #fff;
        -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
        box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    }

  .btn, a.btn, button.btn {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.5;
    position: relative;
    display: inline-block;
    padding: 1rem 4rem;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    letter-spacing: 0.1em;
    color: #ffffff;
    border-radius: 0.5rem;
}

  ul, ol {
    background: #fffcf4;
    border-radius :8px;/*角の丸み*/
    box-shadow :0px 0px 5px silver;/*5px=影の広がり具合*/
    padding: 0.5em 0.5em 0.5em 2em;
  }
  ul li, ol li {
    line-height: 1.5;
    padding: 0.5em 0;
  }



      .ulf {
       
          color:rgb(0, 2, 5);
          font-size: 25px;
          }
      
          .line {
            background: linear-gradient(transparent 60%, yellow 30%);
            display: inline-block;
          }

      .spanline {
        font-weight: bold;
        text-align: center;
        font-size: 25px;
        margin: 15px auto 15px ;
        width: fit-content;
        color: rgb(28, 100, 255);
        background-color: yellow;
        font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    }

      .pinkB {
        font-weight: bold;
        color: rgb(0, 41, 175);
        font-size: 25px;
        text-align: center;
        font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    }

}
@media screen and ( max-width:799px ){

  .main {
    width: 100%;
    margin: 0px auto;
    padding: 3px;
    background-color: #fff;
}
  .text{letter-spacing: 0.03em;
    font-size: 16px;
    line-height: 30px;}

 .text2{letter-spacing: 0.03em;
    font-size: 16px;
    line-height: 30px;
    　text-align: center;
    }

.heading-1 {
    padding: .5em .7em;
    border-left: 5px solid #2589d0;
    color: #333333;
}

.heading-33 {
    border-bottom: 3px solid #f2f2f2;
}

.heading-33 span {
    display: inline-block;
    position: relative;
    padding: 0 .4em .2em;
    color: #333333;
}

.heading-33 span::before {
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #2589d0;
    content: '';
}

      .img3{
    width: 100%;
    margin: 0px auto;
        }
  
        a.btn-c {
          font-size: 6vw;
          width: 100%;
          position: relative;
          padding: 0.25rem 10px 1.5rem 10px;
          color: #fff;
          background: #32b16c;
          -webkit-box-shadow: 0 5px 0 #2c9d60;
          box-shadow: 0 5px 0 #2c9d60;
          margin: 20px auto;
          display: block;
      }
  
      a.btn-c span {
        font-size: 17px;
        position: absolute;
        top: -10px;
        right: 0;
        left: 0;
        margin: 0 auto;
        display: block;
        width: 87%;
        padding: 0.2rem 0;
        color: #32b16c;
        border: 2px solid #32b16c;
        border-radius: 0.5rem;
        background: #fff;
        -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
        box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    }

  .btn, a.btn, button.btn {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.5;
    position: relative;
    display: inline-block;
    padding: 1rem 4rem;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    letter-spacing: 0.1em;
    color: #ffffff;
    border-radius: 0.5rem;
}

  
      .ulf {
       
          color:rgb(0, 2, 5);
          font-size: 16px;
          }
      
          .line {
            background: linear-gradient(transparent 60%, yellow 30%);
            display: inline-block;
          }

      .spanline {
        font-weight: bold;
        text-align: center;
        font-size: 21px;
        margin: 15px auto 15px ;
        width: fit-content;
        color: rgb(28, 100, 255);
        background-color: yellow;
        font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    }

      .pinkB {
        font-weight: bold;
        color: rgb(255, 61, 109);
        font-size: 20px;
        text-align: center;
        font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    }

    .pink {
        font-weight: bold;
        color: #2589d0;
        font-size: 17px;
        text-align: center;
        font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    }

    .list-4 {
    border: 2px solid #2589d0;
}

.list-1 {
    list-style-type: disc;
    padding: 1em 1em 1em 2.5em;
    border: 2px solid #2589d0;
}

.list-1 li {
    padding: .3em .3em .3em 0;
}

.list-1 li::marker {
    color: #2589d0;
    font-size: 1.1em;
}

.list-8 {
    position: relative;
    padding: 1.5em 1em 1em 2.5em;
    border: 2px solid #2589d0;
}

.list-8 > div {
    position: absolute;
    top: -.75em;
    left: 1em;
    padding: 0 .5em;
    background-color: #fff;
    color: #2589d0;
    font-weight: 600;
}

.fusen-2 {
    display: inline-block;
    position: relative;
    padding: .5em 1em;
    border-right: 27px solid #2589d0;
    background-color: #f5f5f5;
    color: #333333;
}

.fusen-2::before {
    position: absolute;
    bottom: 2px;
    right: -20px;
    z-index: -1;
    transform: rotate(5deg);
    width: 100%;
    height: 50%;
    background-color: #d0d0d0;
    content: "";
    filter: blur(4px);
}

.list-8 ul {
    list-style-type: disc;
    margin: 0;
    padding: 0;
}

.list-8 li {
    padding: .3em .3em .3em 0;
}

.list-8 li::marker {
    color: #2589d0;
    font-size: 1.1em;
}

.list-4 div {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 10px 0;
    background-color: #2589d0;
    color: #fff;
    font-weight: 600;
}

.list-4 ul {
    list-style-type: disc;
    margin: 0;
    padding: 1em 1em 1em 2.5em;
}

.list-4 li {
    padding: .3em .3em .3em 0;
}

.list-4 li::marker {
    color: #2589d0;
    font-size: 1.1em;
}

    .quote-2 {
    max-width: 500px;
    position: relative;
    padding: 2.5em 2.5em 2em 3em;
    color: #333333;
}

.quote-2::before,
.quote-2::after {
    display: inline-block;
    position: absolute;
    width: 4em;
    height: 4em;
    content: '';
}

.quote-2::before {
    top: 0;
    left: 0;
    border-top: 3px solid #2589d0;
    border-left: 3px solid #2589d0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.58341 17.3211C3.55316 16.2274 3 15 3 13.0103C3 9.51086 5.45651 6.37366 9.03059 4.82318L9.92328 6.20079C6.58804 8.00539 5.93618 10.346 5.67564 11.822C6.21263 11.5443 6.91558 11.4466 7.60471 11.5105C9.40908 11.6778 10.8312 13.159 10.8312 15C10.8312 16.933 9.26416 18.5 7.33116 18.5C6.2581 18.5 5.23196 18.0095 4.58341 17.3211ZM14.5834 17.3211C13.5532 16.2274 13 15 13 13.0103C13 9.51086 15.4565 6.37366 19.0306 4.82318L19.9233 6.20079C16.588 8.00539 15.9362 10.346 15.6756 11.822C16.2126 11.5443 16.9156 11.4466 17.6047 11.5105C19.4091 11.6778 20.8312 13.159 20.8312 15C20.8312 16.933 19.2642 18.5 17.3312 18.5C16.2581 18.5 15.232 18.0095 14.5834 17.3211Z' fill='%232589d0'%3E%3C/path%3E%3C/svg%3E");
    background-position: top 35% left 35%;
    background-size: 2em;
    background-repeat: no-repeat;
}

.quote-2::after {
    bottom: 0;
    right: 0;
    border-bottom: 3px solid #2589d0;
    border-right: 3px solid #2589d0;
}

.quote-2 p {
    margin-top: 0;
}

.quote-2 cite {
    display: block;
    color: #737373;
    font-size: .8em;
    text-align: right;
}

  }