/* Scss Document */
:root {
  --pc: 1000px;
  --sp: 999px;
  --fs48: 4.8rem;
  --fs40: 4rem;
  --fs36: 3.6rem;
  --fs28: 2.8rem;
  --fs22: 2.2rem;
  --fs20: 2.0rem;
  --fs18: 1.8rem;
  --fs16: 1.6rem;
  --fs14:1.4rem;
  --fs12:1.2rem; }

@media (max-width: 999px) {
  :root {
    --fs48: 2.6rem;
    --fs40: 2.2rem;
    --fs36: 2.4rem;
    --fs28: 2.2rem;
    --fs22: 2.0rem;
    --fs20: 1.8rem;
    --fs18: 1.4rem;
    --fs16: 1.4rem;
    --fs14: 1.2rem;
    --fs12: 1.0rem; } }
/* 
---------------------------------------
voice01
---------------------------------------
*/
#voice01 {
  padding-top: 10rem; }
  #voice01 .ttlBox {
    text-align: center; }
    #voice01 .ttlBox .ico1 {
      margin: 0 auto 4rem; }
      @media (max-width: 999px) {
        #voice01 .ttlBox .ico1 {
          margin-bottom: 1rem;
          width: 6rem; } }
  #voice01 .ttl {
    font-size: 4.2rem;
    color: #21A934; }
    @media (max-width: 999px) {
      #voice01 .ttl {
        font-size: 2.4rem; } }
  #voice01 .deco {
    font-size: 2.2rem;
    color: #FEC9D3; }
    @media (max-width: 999px) {
      #voice01 .deco {
        font-size: 1.2rem; } }
  #voice01 .txtBox {
    position: relative;
    z-index: 1;
    width: max-content;
    margin: 0 auto; }
    @media (max-width: 999px) {
      #voice01 .txtBox {
        width: 100%;
        text-align: left; } }
  #voice01 .ico2 {
    position: absolute;
    left: -16rem;
    bottom: 0; }
    @media (max-width: 999px) {
      #voice01 .ico2 {
        position: absolute;
        left: 0rem;
        bottom: -10rem;
        width: 5rem; } }
  #voice01 .ico3 {
    position: absolute;
    right: -20rem;
    bottom: 0; }
    @media (max-width: 999px) {
      #voice01 .ico3 {
        position: absolute;
        right: 0rem;
        bottom: -10rem;
        width: 7rem; } }
  #voice01 .cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4rem; }
    @media (max-width: 999px) {
      #voice01 .cards {
        grid-template-columns: 1fr;
        gap: 1rem;
        width: 28rem; } }
    #voice01 .cards .txt {
      font-size: 1.8rem;
      line-height: 1.5; }
      @media (max-width: 999px) {
        #voice01 .cards .txt {
          font-size: 1.4rem;
          text-align: left;
          width: 70%;
          margin: 0 0 0 auto; } }
  #voice01 .card {
    position: relative;
    display: block;
    background: #fff;
    border: 0.6rem solid #F9F3D9;
    border-radius: 50% / 30%;
    text-align: center;
    padding: 5.5rem 0 5rem; }
    @media (max-width: 999px) {
      #voice01 .card {
        padding: 2rem 0 3rem;
        min-height: auto;
        border-width: 0.4rem;
        border-radius: 50% / 30%;
        z-index: 1; } }
  #voice01 .num {
    position: absolute;
    left: 1rem;
    top: 1rem;
    width: 6.8rem;
    height: 6.8rem;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 3.2rem;
    line-height: 1;
    font-weight: bold;
    z-index: 2; }
    @media (max-width: 999px) {
      #voice01 .num {
        left: 1.5rem;
        top: 0;
        width: 6rem;
        height: 6rem;
        font-size: 2.8rem; } }
  #voice01 .num.pink {
    background: #FE869B; }
  #voice01 .num.green {
    background: #6FCC35; }
  #voice01 .pic {
    width: 14rem;
    height: auto;
    margin: 0 auto 2rem;
    background: #FDFBF2;
    border-radius: 999px; }
    @media (max-width: 999px) {
      #voice01 .pic {
        width: 6rem;
        margin-bottom: 1.5rem;
        position: absolute;
        bottom: 22px;
        left: 1rem; } }
  #voice01 .sttl {
    font-size: 2rem;
    line-height: 1.5;
    margin-bottom: 1.5rem; }
    @media (max-width: 999px) {
      #voice01 .sttl {
        font-size: 2rem;
        margin-bottom: 1rem; } }
  #voice01 .line {
    display: block;
    width: 9rem;
    height: 0.5rem;
    border-radius: 999px;
    margin: 0 auto 2rem;
    background-size: 1.4rem 0.5rem;
    background-repeat: repeat-x; }
    @media (max-width: 999px) {
      #voice01 .line {
        width: 8rem;
        height: 0.4rem;
        margin-bottom: 1.5rem;
        background-size: 1.2rem 0.4rem; } }
  #voice01 .line.pink {
    background-image: linear-gradient(to right, #FE869B 0 60%, transparent 60% 100%); }
  #voice01 .line.green {
    background-image: linear-gradient(to right, #6FCC35 0 60%, transparent 60% 100%); }

#voice02 {
  padding: 12rem 0; }
  @media (max-width: 999px) {
    #voice02 {
      padding: 6rem 0; } }
  #voice02 #case01, #voice02 #case02, #voice02 #case03 {
    margin-top: -10rem;
    padding-top: 10rem;
    margin-bottom: 8rem; }
    @media (max-width: 999px) {
      #voice02 #case01, #voice02 #case02, #voice02 #case03 {
        margin-bottom: 6rem; } }
  #voice02 .boxs {
    padding: 10rem 4vw;
    background: #fff;
    border-radius: 2rem; }
    @media (max-width: 999px) {
      #voice02 .boxs {
        padding: 3rem 2rem 2rem; } }
  #voice02 .headBox {
    display: flex;
    align-items: center;
    gap: 3rem;
    margin-bottom: 4rem; }
    @media (max-width: 999px) {
      #voice02 .headBox {
        gap: 1.5rem;
        margin-bottom: 2rem; } }
  #voice02 .num {
    flex: 0 0 auto;
    width: 8.4rem;
    height: 8.4rem;
    border-radius: 999px;
    background: #FE869B;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    line-height: 1;
    font-weight: bold; }
    @media (max-width: 999px) {
      #voice02 .num {
        width: 5.6rem;
        height: 5.6rem;
        font-size: 2rem; } }
  #voice02 .ttl {
    font-size: 4.2rem; }
    @media (max-width: 999px) {
      #voice02 .ttl {
        font-size: 2rem; } }
    #voice02 .ttl span {
      color: #FE869B; }
  #voice02 .profileBox {
    border: 0.4rem dashed #FE869B;
    border-radius: 2rem;
    padding: 5rem 3vw;
    display: grid;
    grid-template-columns: 18rem 1fr 40rem;
    gap: 4rem;
    align-items: center; }
    @media (max-width: 999px) {
      #voice02 .profileBox {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        padding: 2rem 2rem;
        border-width: 0.3rem; } }
  #voice02 .person {
    text-align: center; }
  #voice02 .person .ico {
    width: 14rem;
    height: auto;
    margin: 0 auto 2rem;
    background: #FDFBF2;
    border-radius: 999px; }
    @media (max-width: 999px) {
      #voice02 .person .ico {
        width: 10rem; } }
  #voice02 .label {
    font-size: 2rem;
    line-height: 1.5;
    margin-bottom: 1rem; }
    @media (max-width: 999px) {
      #voice02 .label {
        font-size: 1.6rem; } }
  #voice02 .line {
    display: block;
    width: 7rem;
    height: 0.4rem;
    margin: 0 auto;
    background-image: linear-gradient(to right, #FE869B 0 60%, transparent 60% 100%);
    background-size: 1.2rem 0.4rem;
    background-repeat: repeat-x; }
  #voice02 .info {
    display: grid;
    gap: 1rem;
    margin-left: 1vw; }
    @media (max-width: 999px) {
      #voice02 .info {
        width: 100%;
        max-width: 100%;
        margin: 0 auto; } }
    #voice02 .info div {
      display: grid;
      grid-template-columns: 11rem 1fr;
      gap: 1rem;
      font-size: 1.5rem;
      line-height: 1.5; }
      @media (max-width: 999px) {
        #voice02 .info div {
          grid-template-columns: 10rem 1fr;
          font-size: 1.3rem; } }
    #voice02 .info dt {
      color: #FE869B;
      font-weight: bold; }
    #voice02 .info dd {
      color: #333; }
  #voice02 .profileBox .pic {
    width: 100%;
    height: auto;
    border-radius: 1.5rem; }
    @media (max-width: 999px) {
      #voice02 .profileBox .pic {
        max-width: 36rem;
        margin: 0 auto; } }
  #voice02 .txtBox,
  #voice02 .resultBox {
    position: relative; }
  #voice02 .resultBox {
    margin-bottom: 2rem; }
  #voice02 .deco {
    position: absolute;
    top: 0;
    right: 0;
    width: 48rem;
    height: auto; }
    @media (max-width: 999px) {
      #voice02 .deco {
        display: none; } }
  #voice02 .sttl {
    font-size: 3.8rem;
    line-height: 1.5;
    color: #FE869B;
    margin-bottom: 2rem; }
    @media (max-width: 999px) {
      #voice02 .sttl {
        font-size: 2.2rem;
        margin-bottom: 1.5rem; } }
  #voice02 ul li {
    position: relative;
    padding-left: 2.5rem; }
    @media (max-width: 999px) {
      #voice02 ul li {
        margin-bottom: 1rem;
        line-height: 1.8; } }
    #voice02 ul li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 1em;
      width: 1.4rem;
      height: 1.4rem;
      background: #FEC9D3;
      border-radius: 999px;
      transform: translateY(-50%); }
      @media (max-width: 999px) {
        #voice02 ul li::before {
          width: 0.8rem;
          height: 0.8rem; } }
  #voice02 .resultBox .txt {
    font-size: 1.6rem;
    line-height: 2; }
    @media (max-width: 999px) {
      #voice02 .resultBox .txt {
        font-size: 1.4rem; } }
  #voice02 .mainPic {
    position: relative; }
    @media (max-width: 999px) {
      #voice02 .mainPic {
        margin-bottom: 3rem; } }
    #voice02 .mainPic img {
      width: 100%;
      height: auto;
      border-radius: 1.5rem; }
    #voice02 .mainPic span {
      position: absolute;
      right: 1.5rem;
      bottom: 1rem;
      font-size: 1.2rem;
      color: #333; }
      @media (max-width: 999px) {
        #voice02 .mainPic span {
          font-size: 1rem; } }
  #voice02 .voiceBox {
    display: grid;
    grid-template-columns: 16rem 1fr;
    gap: 4rem;
    align-items: center; }
    @media (max-width: 999px) {
      #voice02 .voiceBox {
        grid-template-columns: 1fr;
        gap: 1.5rem; } }
  #voice02 .personIco {
    width: 14rem;
    height: auto;
    margin: 0 auto;
    background: #FDFBF2;
    border-radius: 999px; }
    @media (max-width: 999px) {
      #voice02 .personIco {
        width: 10rem; } }
  #voice02 .comment {
    position: relative;
    background: #FEECEF;
    border-radius: 1.5rem;
    padding: 5rem 7rem; }
    @media (max-width: 999px) {
      #voice02 .comment {
        padding: 3rem 2rem; } }
    #voice02 .comment::before {
      content: '';
      position: absolute;
      left: -2.8rem;
      top: 50%;
      transform: translateY(-50%);
      width: 0;
      height: 0;
      border-top: 2rem solid transparent;
      border-bottom: 2rem solid transparent;
      border-right: 3rem solid #FEECEF; }
      @media (max-width: 999px) {
        #voice02 .comment::before {
          left: 50%;
          top: -1rem;
          transform: translateX(-50%);
          border-left: 1.8rem solid transparent;
          border-right: 1.8rem solid transparent;
          border-bottom: 2rem solid #FEECEF;
          border-top: none; } }
    #voice02 .comment .commentTtl {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 2rem;
      width: 100%;
      font-size: 3.8rem;
      line-height: 1.5;
      color: #FE869B;
      margin-bottom: 1rem; }
      @media (max-width: 999px) {
        #voice02 .comment .commentTtl {
          font-size: 2.2rem;
          gap: 1rem;
          margin-bottom: 1rem; } }
      #voice02 .comment .commentTtl::before, #voice02 .comment .commentTtl::after {
        content: '';
        flex: 1;
        height: 1rem;
        background-image: radial-gradient(circle, #FEC9D3 0 35%, transparent 38%);
        background-size: 2rem 1rem;
        background-repeat: repeat-x;
        background-position: center; }
        @media (max-width: 999px) {
          #voice02 .comment .commentTtl::before, #voice02 .comment .commentTtl::after {
            height: 0.6rem;
            background-size: 1.2rem 0.6rem; } }
  #voice02 .bird {
    position: absolute;
    right: -3rem;
    top: -5rem;
    width: 13rem;
    height: auto;
    transform: rotate(22deg); }
    @media (max-width: 999px) {
      #voice02 .bird {
        width: 8rem;
        top: -3rem; } }
  #voice02 #case02.greenCase .num {
    background: #6FCC35; }
  #voice02 #case02.greenCase .ttl span {
    color: #6FCC35; }
  #voice02 #case02.greenCase .profileBox {
    border-color: #6FCC35; }
  #voice02 #case02.greenCase .line {
    background-image: linear-gradient(to right, #6FCC35 0 60%, transparent 60% 100%); }
  #voice02 #case02.greenCase .info dt {
    color: #6FCC35; }
  #voice02 #case02.greenCase .sttl {
    color: #6FCC35; }
  #voice02 #case02.greenCase ul li::before {
    background: #E1F4D5; }
  #voice02 #case02.greenCase .comment {
    background: #E9F8E3; }
    #voice02 #case02.greenCase .comment::before {
      border-right-color: #E9F8E3; }
      @media (max-width: 999px) {
        #voice02 #case02.greenCase .comment::before {
          border-right-color: transparent;
          border-bottom-color: #E9F8E3; } }
  #voice02 #case02.greenCase .commentTtl {
    color: #6FCC35; }
    #voice02 #case02.greenCase .commentTtl::before, #voice02 #case02.greenCase .commentTtl::after {
      background-image: radial-gradient(circle, #C4E9A7 0 35%, transparent 38%); }