@charset "UTF-8";

/* ここから */

#questionnaire{
  @media (min-width: 992px) {
    margin-top: 80px;
  }
  *{
    font-family: "游ゴシック", YuGothic, "Segoe UI", Verdana, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  }
  ul{
    list-style: none;
    margin-inline: 1em;
    @media (max-width: 480px) {
      margin-inline: 0;
    }
  }
  section{
    margin-bottom: 60px;
    @media (max-width: 768px) {
      margin-bottom: 40px;
    }
    @media (max-width: 480px) {
      margin-bottom: 30px;
    }
    h3{
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 30px;
      *{
        color: #cc3333;
      }
      span{
        font-size: 40px; 
        font-weight: 700;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        margin-bottom: 30px;
        &::after{
          content: "";
          width: min(2em,45px);
          height: 3px;
          background: #cc3333;          
        }       
      }
      em{
        font-size: 26px;
        font-style: normal;
        font-weight: 600;
      }
      @media (max-width: 768px) {
        span{
          font-size: 30px;
          gap: 15px;
          margin-bottom: 30px;
          &::after{
            content: "";
            width: min(2em,38px);
            height: 3px;       
          }       
        }
        em{
          font-size: 20px;
        }
      }
      @media (max-width: 480px) {
        span{
          font-size: 26px;
          gap: 10px;
          margin-bottom: 20px;
          &::after{
            content: "";
            width: min(2em,30px);
            height: 2px;         
          }
        }
        em{
          font-size: 18px;
        }
      }
    }
    .contentBox{
      border: 2px solid #cc3333;
      border-radius: 10px;
      background: #fafafa;
      padding: 60px 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 60px 40px;
      &.oneGlaph_txt{
        padding: 50px 30px;
        row-gap: 40px;
      }
      @media (max-width: 768px) {
        padding: 40px 20px;
        gap: 30px;
        &.oneGlaph_txt{
          padding: 40px 20px;
          row-gap: 30px;
        }
      }
      @media (max-width: 480px) {
        padding: 20px 15px;
        gap: 0;
        &.oneGlaph_txt{
          padding: 20px 15px;
          row-gap: 0;
        }
      }
    }
    .wrapGraph{
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 60px;
      &.space20{
        gap: 20px;
      }
      &.space00{
        gap: 0;
      }
      &.align_top{
        align-items: flex-start;
      }
      &.align_bottom{
        align-items: flex-end;
      }

      @media (max-width: 1240px) {
        gap: 50px;
      }
      @media (max-width: 980px) {
        flex-direction: column;
        &.space20,
        &.space00{
          gap: 40px;
        }
        &.align_top{
          align-items: center;
        }
        &.align_bottom{
          align-items: center;
        }
      }
      @media (max-width: 480px) {
        gap: 40px;
        margin-bottom: 20px;
      }
      div{
        &:nth-of-type(1){
          text-align: right;
        }
        &:nth-of-type(2){
          text-align: left;
        }
        @media (max-width: 1240px) {
          &:nth-of-type(1),
          &:nth-of-type(2){
            text-align: center;
          }
          &.img_graph_txt{
            img{
              width: 90%;
            }
          }
          &.img_graph{
            img{
              width: 100%;
            }
          }
        }
        @media (max-width: 480px) {
          &.img_graph{
            img{
              width: 85%;
            }
          }
        }
      }
    }
    .wrapNote{
      width: min(100%, 800px);
      background: #FFF;
      padding: 30px 30px;
      /* margin: 0 auto; */
      &.width_middle{
        width: min(100%, 650px);
      }
      &.width_short{
        width: min(100%, 550px);
      }
      @media (max-width: 1240px) {
        padding: 30px 20px;
      }
      @media (max-width: 480px) {
        padding: 20px 20px;
      }
      h4{
        font-size: 18px;
        color: #cc3333;
        font-weight: 700;
        margin-bottom: 20px;
        text-align: left;
        @media (max-width: 480px) {
          font-size: 16px;
          text-align: center;
        }
      }
      ul{
        display: flex;
        flex-direction: column;
        gap: 1em;
        li{
          font-size: 18px;
          line-height: 1.4;
          padding-left: 1em;
          position: relative;
          text-align: left;
          &::after{
            content: "";
            width: 0.5em;
            height: 0.5em;
            border-radius: 50%;
            background: #cc3333;
            position: absolute;
            left: 0;
            top: 0.45em;            
          }      
        }
        @media (max-width: 480px) {
          gap: 0.8em;
          li{
            font-size: 16px;
              &::after{
              content: "";
              width: 0.4em;
              height: 0.4em;
              top: 0.45em;            
            } 
          }
        }
      }
    }
  }
  .marker{
    background: #f2f030;
    padding: 0.2em;
  }

    /* infoArea */
  .infoArea{
    background: #cdeefd;
    padding: 60px;
    @media (max-width: 768px) {
      padding: 40px;
    }
    @media (max-width: 480px) {
      padding: 40px 20px;
    }
    section{
      width: min(100% , 1100px);
      margin: 0 auto 80px;
      @media (max-width: 768px) {
        margin: 0 auto 60px;
      }
      @media (max-width: 480px) {
        margin: 0 auto 40px;
      }
      h3{
        span{
          color: #FFF;
          &::after{
            content: "";
            background: #FFF;
          }
          @media (max-width: 768px) {
            color: rgba(0, 148, 198, 0.5);
            &::after{
              content: "";
              background: rgba(0, 148, 198, 0.5);
            }
          }
          
        }
        em{
          color: #333;
        }
      }
      ul{
        width: min(100% ,680px);
        margin: 0 auto 40px;
        background: #FFF;
        border-radius: 10px;
        padding: 30px 40px;
        display: flex;
        flex-direction: column;
        gap: 1em;
        li{
          font-size: 20px;
          line-height: 1.4;
          padding-left: 1em;
          position: relative;
          &::after{
            content: "";
            width: 0.5em;
            height: 0.5em;
            border-radius: 50%;
            background: #cc3333;
            position: absolute;
            left: 0;
            top: 0.45em;            
          }       
        }
        @media (max-width: 768px) {
          width: 100%;
          padding: 30px;
          li{
            font-size: 18px;
          }
        }
        @media (max-width: 480px) {          
          padding: 20px;
          gap: 0.8em;
          margin-bottom: 30px;
          li{
            font-size: 16px;
              &::after{
              content: "";
              width: 0.4em;
              height: 0.4em;
              top: 0.45em;            
            } 
          }
        }
      }
      .bnrArea{
        display: flex;
        justify-content: center;
        gap: 40px;
        a{
          padding: 1.5em 2em;
          width: min(50%, 15em);
          display: flex;
          align-items: center;
          justify-content: center;
          color: #FFF;
          font-size: 18px;
          font-weight: 600;
          transition: background 0.5s;
          &:nth-of-type(1){
            background: #00bfff;
            &:hover{
              background: #007399;
              transition: background 0.5s;
            }
          }
          &:nth-of-type(2){
            background: #cc3333;
            &:hover{
              background: #992626;
              transition: background 0.5s;
            }
          }
        }
        @media (max-width: 768px) {
          gap: 20px;
          flex-wrap: wrap;
          a{
            width: min(80%, 15em);
          }
        }
        @media (max-width: 480px) {
          a{
            font-size: 16px;
          }
        }
      }
      /* 動くヤヒロ */
      .info{
        text-align: center;
        margin-bottom: 30px;
      }
      .bnr{
        /* 仮css */
        text-align: center;
        a{
          width: min(100% , 320px);
          height: 200px;
          background: #EFEFEF;
          display: block; 
          margin: 0 auto;        
        }
      }
    }
  }
} /* //#questionnaire */

  /* スライドイン */
.slidein {
    opacity: 0;
    transform: translate(0,0);
    transition: all 1s;
  &.slidein-left{
      transform: translate(-8%,0);
  }
  &.slidein-bottom{
      transform: translate(0,8%);
  }
  &.scrollin{
    transform: translate(0, 0)!important;
    opacity: 1!important;
  }
}