@font-face {
  font-family: 'FOT-TsukuARdGothicStd-B';
  src: url("../fonts/FOT-TsukuARdGothicStd-B.otf");
}

@media screen and (min-width: 769px) {
  .counselor {
    margin: 135px 0 140px;
  }
  .counselor__main {
    position: relative;
    -webkit-transform: translateZ(0);
       -moz-transform: translateZ(0);
            transform: translateZ(0);
    max-width: 1000px;
  }
  .counselor__main::before, .counselor__main::after {
    position: absolute;
    content: "";
    z-index: -1;
  }
  .counselor__main::before {
    width: 234px;
    height: 313.43px;
    background: url("../img/counselorIc.png") 0 0 no-repeat;
    -moz-background-size: contain;
         background-size: contain;
    top: -102.6px;
    right: 0px;
  }
  .counselor__main--title h2 {
    text-align: center;
    line-height: 0;
  }
  .counselor__main--title h2 img {
    width: 466px;
  }
  .counselor__main--intro {
    font-size: 20px;
    line-height: 35px;
    font-weight: 400;
    color: #525252;
    margin-top: 32.5px;
    text-align: center;
  }
  .counselor__main--list {
    margin: 35px -17.5px -15px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
       -moz-box-orient: horizontal;
       -moz-box-direction: normal;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
    -webkit-box-pack: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .counselor__main--list article {
    width: 310px;
    margin: 15px 17.5px;
    -moz-border-radius: 30px;
         border-radius: 30px;
    border: 3px solid #EF908E;
    background: #FFFAF7;
    overflow: hidden;
    padding: 22px 12px 32px;
  }
  .counselor__main--list article figure {
    text-align: center;
  }
  .counselor__main--list article figure img {
    width: 208px;
    height: 208px;
    object-fit: cover;
    -moz-border-radius: 40px;
         border-radius: 40px;
    border: 3px solid #FFE6E5;
  }
  .counselor__main--list article figure figcaption {
    font-size: 16px;
    line-height: 1;
    font-family: 'FOT-TsukuARdGothicStd-B';
    margin-top: 15px;
  }
  .counselor__main--list article h3 {
    text-align: center;
    font-family: 'FOT-TsukuARdGothicStd-B';
    font-size: 24px;
    line-height: 1;
    margin-top: 8px;
    color: #EF908E;
  }
  .counselor__main--list article .meta {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
       -moz-box-orient: horizontal;
       -moz-box-direction: normal;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
    margin: 11px -4px -4px;
    justify-content: center;
  }
  .counselor__main--list article .meta span {
    margin: 4px;
    display: -webkit-inline-box;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    white-space: nowrap;
    height: 23px;
    -moz-border-radius: 11.5px;
         border-radius: 11.5px;
    border: 1px solid #EF908E;
    background: #FFFAF7;
    padding: 0 5px 0 5px;
    font-size: 12px;
    line-height: 1.7;
    font-weight: 700;
    color: #EF908E;
  }
  .counselor__main--list article p {
    font-size: 14px;
    line-height: 1.7;
    color: #525252;
    margin-top: 17px;
  }
  .counselor__main--btn {
    text-align: center;
    margin-top: 46px;
  }
  .counselor__main--btn a {
    width: 340px;
  }
  .counselor__main--btn a:hover::before {
    right: -10%;
  }
}

@media screen and (max-width: 768px) {
  .counselor {
    margin: 31.40097vw 0 33.81643vw;
  }
  .counselor__main {
    position: relative;
    -webkit-transform: translateZ(0);
       -moz-transform: translateZ(0);
            transform: translateZ(0);
    max-width: 241.54589vw;
  }
  .counselor__main::before, .counselor__main::after {
    position: absolute;
    content: "";
    z-index: -1;
  }
  .counselor__main::before {
    width: 234px;
    height: 313.43px;
    background: url("../img/counselorIc.png") 0 0 no-repeat;
    -moz-background-size: contain;
         background-size: contain;
    top: -25.33333vw;
    right: -4.58937vw;
  }
  .counselor__main--title h2 {
    text-align: center;
    line-height: 0;
  }
  .counselor__main--title h2 img {
    width: 100%;
  }
  .counselor__main--intro {
    font-size: 3.86473vw;
    line-height: 1.7;
    font-weight: 400;
    color: #525252;
    margin-top: 7.24638vw;
    text-align: center;
  }
  .counselor__main--list {
    margin: 3.62319vw -4.22705vw -3.62319vw;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
       -moz-box-orient: horizontal;
       -moz-box-direction: normal;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
    -webkit-box-pack: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .counselor__main--list article {
    width: 74.87923vw;
    margin: 3.62319vw 4.22705vw;
    -moz-border-radius: 7.24638vw;
         border-radius: 7.24638vw;
    border: 0.72464vw solid #EF908E;
    background: #FFFAF7;
    padding: 5.31401vw 2.89855vw 7.72947vw;
    overflow: hidden;
  }
  .counselor__main--list article figure {
    text-align: center;
  }
  .counselor__main--list article figure img {
    width: 50.24155vw;
    height: 50.24155vw;
    object-fit: cover;
    -moz-border-radius: 9.66184vw;
         border-radius: 9.66184vw;
    border: 0.72464vw solid #FFE6E5;
  }
  .counselor__main--list article figure figcaption {
    font-size: 3.86473vw;
    line-height: 1;
    font-family: 'FOT-TsukuARdGothicStd-B';
    margin-top: 3.62319vw;
  }
  .counselor__main--list article h3 {
    text-align: center;
    font-family: 'FOT-TsukuARdGothicStd-B';
    font-size: 5.7971vw;
    line-height: 1;
    margin-top: 1.93237vw;
    color: #EF908E;
  }
  .counselor__main--list article .meta {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
       -moz-box-orient: horizontal;
       -moz-box-direction: normal;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
    margin: 2.657vw -0.96618vw -0.96618vw;
    justify-content: center;
  }
  .counselor__main--list article .meta span {
    margin: 0.96618vw;
    display: -webkit-inline-box;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    white-space: nowrap;
    height: 5.55556vw;
    -moz-border-radius: 2.77778vw;
         border-radius: 2.77778vw;
    border: 1px solid #EF908E;
    background: #FFFAF7;
    padding: 0 2.89855vw 0 3.1401vw;
    font-size: 2.8vw;
    line-height: 1.7;
    font-weight: 700;
    color: #EF908E;
  }
  .counselor__main--list article p {
    font-size: 3.38164vw;
    line-height: 1.7;
    color: #525252;
    margin-top: 4.10628vw;
  }
  .counselor__main--btn {
    text-align: center;
    margin-top: 12.07729vw;
  }
  .counselor__main--btn a {
    width: 82.1256vw;
    font-size: 4.34783vw;
    padding-left: 0;
    -webkit-box-pack: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .counselor__main--btn a::after {
    margin-left: 2.41546vw;
  }
  .counselor__main--btn a:hover::before {
    right: -10%;
  }
}