@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Noto+Serif+JP:wght@400;700&display=swap');


.questionnairePage {
  /* 		border:8px solid #edad0b; */
  /* 		background-color:#eee; */
      font-family: 'Noto Sans JP', sans-serif;
      font-display: swap;
      padding-bottom:3em;
    }
    
    .questionnairePage button {
      border:none;
      color:#fff;
      display:flex;
      justify-content:center;
      align-items:center;
      width:320px;
      max-width:92%;
      height:64px;
      border-radius:32px;
      margin:2.4em auto;
      font-size:18px;
      font-weight:bold;
      cursor:pointer;
      outline:none;
      color: #FFF;
        background-image: linear-gradient(180deg, #ff8b5f  0%,#FFC107 100%);
      box-shadow: 0px 6px 4px -2px rgba(0, 0, 0, 0.2);
      position:relative;
    }
    
    @media screen and (max-width:720px){
      .questionnairePage button {
        margin-top: 1em;
      }
    }
    
    .questionnairePage button:active {
      transform:translatey(3px);
    }
  
    .questionnairePage button::before {
      content:'';
      display:block;
      position:absolute;
  
      box-sizing:border-box;
      left:6px;
      right:6px;
      top:0px;
  
      height:64px;
      border-radius:32px;
      transform:translatey(3px);
      background-image: linear-gradient(180deg,  #fff  0%,rgba(255,255,255,0) 33%);
      opacity:.3;
    }
    
    .questionnairePage button > img {
      width:40px;
      height:40px;
      margin-right:8px;
      margin-left:24px;
      flex-shrink:0;
    }
    
    .questionnairePage button > span {
      flex-grow:1;
  
      margin-right:24px;
    }
    
    .question_box {
      position:relative;
    }
  
     .question_box .question_sentense_box {
       text-align:center;
       font-weight:bold;
       font-family: 'Noto Serif JP', serif;
     }
      
    .question_box .questionHeader {
      display:flex;
      justify-content:center;
      align-items:flex-end;
      color:#fff;
      line-height:2.4;
  /* 		background-color:#c7243a; */
  /* 		height:120px; */
      background-image: linear-gradient(to bottom, rgba(199,36,58,1), rgba(199,36,58,.6));
      
      font-size:calc( (720px / 375 ) * 32);
    }
    
    @media screen and (max-width:720px){
      .question_box .questionHeader {
        font-size:calc( (100vw / 375 ) * 48);
      }
    }
    
    .question_sentense_box .question_sentense {
      padding:1.4em 0 3em;
      font-size:calc( (720px / 375 ) * 14);
      max-width:96%;
      margin:0 auto;
    }
    
    @media screen and (max-width:720px){
      .question_sentense_box .question_sentense {
        font-size:calc( (100vw / 375 ) * 22);
      }
    }
    
    .question_sentense_box .question_sentense em {
      font-style:normal!important;
  /* 		background-image: linear-gradient(to right, rgba(255,139,95,.6), rgba(255,193,7,.6));
      background-repeat: no-repeat;
      background-size: 100% 20%;
      background-position: bottom; */
      color:#c7243a;
    }
    
    .question_box .inputs_box {
      padding:2em 0;
    }
    
    .inputs_box input {
      display:none;
    }
    
    .inputs_box label {
      display:flex;
      align-items:center;
      min-height:54px;
      background-color:#fff;
      padding:1em 2em;
      width:90%;
      margin-left:auto;
      margin-right:auto;
      font-size:22px;
      border-radius:6px;
      background-color:#eee;
      transition:background .2s,transform .05s;
    }
    
    .inputs_box label:active {
      transform:scale(.9);
    }
    
    @media screen and (max-width:720px){
      .inputs_box label {
        font-size:calc( (100vw / 375 ) * 18);
      }
    }
    
    .inputs_box input + label {
      margin-top:1em;
      
    }
    
    .inputs_box input:checked + label {
  /* 		background-color:#c7243a; */
      background-image: linear-gradient(to top, rgba(199,36,58,1), rgba(199,36,58,.6));
      color:#fff;
    }
    
    .inputs_box label .icon_radio {
      border:4px solid #ccc;
      background-color:#ccc;
      width:24px;
      height:24px;
      border-radius:100%;
      transition:background .2s,border-color .2s;
      padding:2px;
    }
    
    .inputs_box input:checked + label .icon_radio {
      background-color:#c7243a;
      border-color:#fff;
    }
    
    .inputs_box label .answerSentense {
  /* 		margin-left:1em; */
      transition:color .2s;
    }
    
    /* .inputs_box input:checked + label .icon_radio + .answerSentense {
    } */
    
    .question_box .questionNumArea {
      display:flex;
      justify-content:center;
      align-items:center;
      font-size:20px;
      padding:1.2em 0;
    }
    
    @media screen and (max-width:720px){
      .question_box .questionNumArea {
        font-size:18px;
      }
    }
    
    .questionNumArea .questionNumBox {
      display:flex;
      justify-content:center;
      align-items:center;
      width:2em;
      height:2em;
      border-radius:1em;
      background-color:#ccc;
      color:#fff;
    }
    
    .questionNumArea .questionNumBox.isCurrent {
      background-color:#E38692;
    }
    
    .questionNumArea .questionNumDots {
      width:1em;
      margin:0 4px;
      border-top:4px dotted #eee;
    }