/* 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; } }
/* 
---------------------------------------
faq01
---------------------------------------
*/
#faq01 {
  padding: 10rem 0 14rem; }
  @media (max-width: 999px) {
    #faq01 {
      padding: 8rem 0 4rem; } }
  #faq01 .mainImg {
    width: 28rem;
    margin: 0 auto 2rem; }
    @media (max-width: 999px) {
      #faq01 .mainImg {
        width: 11rem;
        margin-bottom: 1.5rem; } }
    #faq01 .mainImg img {
      width: 100%;
      height: auto; }
  #faq01 .ttl {
    font-size: 4.2rem;
    line-height: 1.5;
    color: #21A934;
    font-weight: bold;
    text-align: center;
    margin-bottom: 4rem; }
    @media (max-width: 999px) {
      #faq01 .ttl {
        font-size: 2.4rem;
        margin-bottom: 2rem; } }
  #faq01 .leadBox {
    position: relative;
    text-align: center;
    margin-bottom: 5rem; }
    @media (max-width: 999px) {
      #faq01 .leadBox {
        text-align: left;
        margin-bottom: 3rem; } }
    #faq01 .leadBox .txt {
      line-height: 2; }
    #faq01 .leadBox .illust {
      position: absolute;
      top: 50%;
      width: 11rem;
      height: auto;
      transform: translateY(-50%); }
      @media (max-width: 999px) {
        #faq01 .leadBox .illust {
          display: none; } }
      #faq01 .leadBox .illust.left {
        left: 4vw; }
      #faq01 .leadBox .illust.right {
        right: 4vw; }
  #faq01 .faqNav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-bottom: 12rem; }
    @media (max-width: 999px) {
      #faq01 .faqNav {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        margin-bottom: 6rem; } }
    #faq01 .faqNav a {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 2rem 0 2rem 0;
      border-radius: 1rem;
      background: #FE869B;
      color: #fff;
      font-weight: bold;
      text-align: center;
      text-decoration: none;
      transition: .3s; }
      @media (max-width: 999px) {
        #faq01 .faqNav a {
          width: 48%;
          padding: 0.4rem 0 2rem 0;
          margin: 0 auto;
          font-size: 1.2rem; } }
      #faq01 .faqNav a::after {
        content: '';
        position: absolute;
        right: 2rem;
        top: 50%;
        width: 1rem;
        height: 1rem;
        border-right: 2px solid #fff;
        border-bottom: 2px solid #fff;
        transform: translateY(-65%) rotate(45deg); }
        @media (max-width: 999px) {
          #faq01 .faqNav a::after {
            transform: translateY(-65%) translateX(-50%) rotate(45deg);
            top: inherit;
            left: 50%;
            right: 0;
            bottom: 5px; } }
  #faq01 .faqBlock {
    margin-bottom: 13rem;
    margin-top: -16rem;
    padding-top: 16rem; }
    @media (max-width: 999px) {
      #faq01 .faqBlock {
        margin-bottom: 6rem;
        margin-top: -8rem;
        padding-top: 8rem; } }
    #faq01 .faqBlock:last-child {
      margin-bottom: 0; }
  #faq01 .faqHead {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6rem; }
    @media (max-width: 999px) {
      #faq01 .faqHead {
        min-height: initial;
        margin-bottom: 3rem;
        justify-content: center; } }
    #faq01 .faqHead h3 {
      font-size: 4.2rem;
      line-height: 1.5;
      color: #6FCC35;
      font-weight: bold;
      text-align: center; }
      @media (max-width: 999px) {
        #faq01 .faqHead h3 {
          font-size: 2.3rem;
          text-align: left; } }
    #faq01 .faqHead img {
      position: absolute;
      right: 6vw;
      top: 2rem;
      width: 24rem;
      height: auto; }
      @media (max-width: 999px) {
        #faq01 .faqHead img {
          position: absolute;
          right: 0vw;
          top: 3.5rem;
          width: 8rem;
          height: auto; } }
  #faq01 .faqList {
    width: 86%;
    margin: 0 auto; }
    @media (max-width: 999px) {
      #faq01 .faqList {
        width: 100%; } }
  #faq01 .box {
    margin-bottom: 2rem;
    background: #fff;
    padding: 3rem 4vw;
    border-radius: 2rem; }
    @media (max-width: 999px) {
      #faq01 .box {
        margin-bottom: 2rem;
        padding: 2rem; } }
    #faq01 .box:last-child {
      margin-bottom: 0; }
  #faq01 dl {
    display: flex;
    align-items: flex-start; }
  #faq01 .q {
    margin-bottom: 1rem; }
    #faq01 .q dt {
      color: #6BCB3F; }
    #faq01 .q dd {
      font-weight: bold; }
  #faq01 .a dt {
    color: #F47B93; }
  #faq01 dt {
    width: 2.8rem;
    flex: 0 0 2.8rem;
    font-size: 2.6rem;
    line-height: 1.2;
    font-weight: bold;
    font-family: "Lato", sans-serif; }
    @media (max-width: 999px) {
      #faq01 dt {
        width: 2.4rem;
        flex-basis: 2.4rem;
        font-size: 2.1rem; } }
  #faq01 dd {
    flex: 1;
    min-width: 0;
    padding-left: 1rem;
    line-height: 2; }
    @media (max-width: 999px) {
      #faq01 dd {
        line-height: 1.8;
        padding-left: .5rem; } }

.tabs {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2rem; }
  @media (max-width: 999px) {
    .tabs {
      justify-content: space-around;
      gap: 0.5rem 1rem; } }

.tab {
  padding: 1rem;
  cursor: pointer;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.5; }
  @media (max-width: 999px) {
    .tab {
      font-size: 1.2rem;
      padding: .5rem; } }

.tab.is-active {
  color: #01A0E9;
  border-bottom: 2px solid #01A0E9; }

.content {
  display: none;
  margin-top: 2rem; }

.content.is-active {
  display: block; }