.q_body{
  width: 80%;
  margin: 30px auto 20px;
  border: 4px solid #21879bd4;
  padding: 40px 45px;
}
.q_number{
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 20px;
}
.q_number p{
  background-color: #21879b;
  color: #fff;
  border-radius: 100%;
  width: 80px;
  height: 80px;
  font-size: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.q_body h2{
  text-align: center;
  margin-bottom: 100px;
  font-size: 28px;
}
.q_kiyaku{
  margin-bottom: 100px;
}
.q_choices{
  display: flex;
  width: 80%;
  min-width: 850px;
  margin: 0 auto;
  justify-content: space-between;
  margin-bottom: 100px;
}
@media (max-width: 1200px) {
  .q_choices{
    display: flex;
    width: 80%;
    min-width: 512px;
    flex-wrap: wrap;
    margin-bottom: 50px;
  }
  .flex_2{
    margin: 0 30px;
  }
  .flex_4{
    margin-left: 17.5% !important;
    margin-top: 40px;
  }
  .flex_5{
    margin-right: 17.5% !important; 
    margin-top: 40px;
  }
}
.q_choices a{
  width: 150px;
  aspect-ratio: 1 / 1;
  color: #000;
  border-bottom: none !important;
}
.q_choices label{
  width: 150px;
  aspect-ratio: 1 / 1;
  border: solid 1px #21879b;
  background-color: #F2FDFF;
  border-radius: 20px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  color: rgb(0, 31, 90, 65% );
}
.q_choices input{
  display: none;
}
.q_back{
  display: flex;
  justify-content: center;
  margin: 0 auto;
  margin-bottom: 100px;
}
.q_back a{
  background-color: #EF9339;
  color: #fff;
  font-size: 24px;
  padding: 15px;
  width: 350px;
  text-align: center;
  border-radius: 10px;
  margin: 0 30px;
  position: relative;
}
.triangle {
  --b: 4px;
  height: 20px;
  aspect-ratio: cos(30deg);
  clip-path: polygon(0 50%,100% 100%,100% 0,0 50%,var(--b) 50%,calc(100% - var(--b)/2) calc(var(--b)*cos(30deg)), calc(100% - var(--b)/2) calc(100% - var(--b)*cos(30deg)),var(--b) 50%);
  background: #fff;
  position: absolute;
  left: 30px;
  top: 0;
  bottom: 0;
  margin: auto 0;
}
.triangle2 {
  --b: 4px;
  height: 20px;
  aspect-ratio: cos(30deg);
  clip-path: polygon(0 0,100% 50%,0 100%);
  background: #fff;
  position: absolute;
  right: 30px;
  top: 0;
  bottom: 0;
  margin: auto 0;
}
.q_hidden{
  display: none;
}

.q_end_btn{
  height: 496px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.q_end_btn button{
  background-color: #21879b;
  color: #fff;
  font-size: 28px;
  padding: 10px 30px;
  border-radius: 10px;
  text-align: center;
  width: 350px;
  border: none;
}
.rest_number{
  text-align: center;
  font-size: 24px;
  background-color: #97E4F2;
  color: #001F5A;
  width: 320px;
  padding: 5px 0;
  padding-left: 10px;
  border-radius: 5px;
  margin: 0 auto;
}

/* 進捗ゲージ用 */
.progress-body{
  width: 50%;
  margin: 30px auto 50px;
}
.progress{
  width: 100%;
  height: 21px;
  border-radius: 10px;
  background-color: #d9d9d9;
  position:relative;
  overflow: hidden;
}
.progress .bar{
	height: 21px;
	background: #2A8697;
	position: absolute;
}

.bar_q2{
  height: 21px;
  background: #2A8697;
  animation: progress2 0.5s normal;
  animation-fill-mode: forwards;
}
@keyframes progress2 {
	0% {width: 0}
	100% {width: 7%}
}
.bar_q2_rem{
  height: 21px;
  width: 7%;
  background: #2A8697;
  animation: none !important;
}

.bar_q3{
  height: 21px;
  background: #2A8697;
  animation: progress3 0.5s normal;
  animation-fill-mode: forwards;
}
@keyframes progress3 {
	0% {width: 7%}
	100% {width: 14%}
}
.bar_q3_rem{
  height: 21px;
  width: 14%;
  background: #2A8697;
  animation: none !important;
}

.bar_q4{
  height: 21px;
  background: #2A8697;
  animation: progress4 0.5s normal;
  animation-fill-mode: forwards;
}
@keyframes progress4 {
	0% {width: 14%}
	100% {width: 21%}
}
.bar_q4_rem{
  height: 21px;
  width: 21%;
  background: #2A8697;
  animation: none !important;
}

.bar_q5{
  height: 21px;
  background: #2A8697;
  animation: progress5 0.5s normal;
  animation-fill-mode: forwards;
}
@keyframes progress5 {
	0% {width: 21%}
	100% {width: 28%}
}
.bar_q5_rem{
  height: 21px;
  width: 28%;
  background: #2A8697;
  animation: none !important;
}

.bar_q6{
  height: 21px;
  background: #2A8697;
  animation: progress6 0.5s normal;
  animation-fill-mode: forwards;
}
@keyframes progress6 {
	0% {width: 28%}
	100% {width: 35%}
}
.bar_q6_rem{
  height: 21px;
  width: 35%;
  background: #2A8697;
  animation: none !important;
}

.bar_q7{
  height: 21px;
  background: #2A8697;
  animation: progress7 0.5s normal;
  animation-fill-mode: forwards;
}
@keyframes progress7 {
	0% {width: 35%}
	100% {width: 42%}
}
.bar_q7_rem{
  height: 21px;
  width: 42%;
  background: #2A8697;
  animation: none !important;
}

.bar_q8{
  height: 21px;
  background: #2A8697;
  animation: progress8 0.5s normal;
  animation-fill-mode: forwards;
}
@keyframes progress8 {
	0% {width: 42%}
	100% {width: 50%}
}
.bar_q8_rem{
  height: 21px;
  width: 50%;
  background: #2A8697;
  animation: none !important;
}

.bar_q9{
  height: 21px;
  background: #2A8697;
  animation: progress9 0.5s normal;
  animation-fill-mode: forwards;
}
@keyframes progress9 {
	0% {width: 50%}
	100% {width: 57%}
}
.bar_q9_rem{
  height: 21px;
  width: 57%;
  background: #2A8697;
  animation: none !important;
}

.bar_q10{
  height: 21px;
  background: #2A8697;
  animation: progress10 0.5s normal;
  animation-fill-mode: forwards;
}
@keyframes progress10 {
	0% {width: 57%}
	100% {width: 64%}
}
.bar_q10_rem{
  height: 21px;
  width: 62%;
  background: #2A8697;
  animation: none !important;
}

.bar_q11{
  height: 21px;
  background: #2A8697;
  animation: progress11 0.5s normal;
  animation-fill-mode: forwards;
}
@keyframes progress11 {
	0% {width: 64%}
	100% {width: 71%}
}
.bar_q11_rem{
  height: 21px;
  width: 71%;
  background: #2A8697;
  animation: none !important;
}

.bar_q12{
  height: 21px;
  background: #2A8697;
  animation: progress12 0.5s normal;
  animation-fill-mode: forwards;
}
@keyframes progress12 {
	0% {width: 71%}
	100% {width: 78%}
}
.bar_q12_rem{
  height: 21px;
  width: 78%;
  background: #2A8697;
  animation: none !important;
}

.bar_q13{
  height: 21px;
  background: #2A8697;
  animation: progress13 0.5s normal;
  animation-fill-mode: forwards;
}
@keyframes progress13 {
	0% {width: 78%}
	100% {width: 85%}
}
.bar_q13_rem{
  height: 21px;
  width: 85%;
  background: #2A8697;
  animation: none !important;
}

.bar_q14{
  height: 21px;
  background: #2A8697;
  animation: progress14 0.5s normal;
  animation-fill-mode: forwards;
}
@keyframes progress14 {
	0% {width: 85%}
	100% {width: 92%}
}
.bar_q14_rem{
  height: 21px;
  width: 92%;
  background: #2A8697;
  animation: none !important;
}

.bar_last{
  height: 21px;
  background: #2A8697;
  animation: progress 0.5s normal;
  animation-fill-mode: forwards;
}
@keyframes progress {
	0% {width: 92%}
	100% {width: 100%}
}

.bar_last_rem{
  height: 21px;
  width: 100%;
  background: #2A8697;
  animation: none !important;
}
/* 進捗ゲージ　終わり */


.result_title{
  text-align: center;
  font-size: 48px;
}
.result_body{
  width: 80%;
  max-width: 1200px;
  margin: 50px auto;
  border: 4px solid #21879bd4;
  padding: 40px 45px;
  display: flex;
  justify-content: space-between;
}
.result_contents h3{
  font-size: 28px;
  font-weight: 400;
}
.result_contents{
  width: 49%;
}
.result_contents .btn_position{
  width: 100%;
  margin: 0 auto;
}
.result_point{
  margin: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #F6FEFF;
  border-radius: 10px;
  padding: 40px;
  box-shadow: -3px 3px 3px 3px #ECF2FF;
}
.result_point::after{
  position: absolute;
  background-color: #ECF2FF;
}
.point_text{
  width: 130px;
  font-size: 60px;
  color: #2A8697;
  font-weight: 600;
}
.point_text span{
  font-size: 28px;
}
.graph_body{
  width: calc(100% - 130px);
  border: solid 1px #000;
  text-align: center;
}
.graph{
  width: 100%;
  margin-top: 20px;
  height: 100px;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  border-bottom: solid 1px #000;
  position: relative;
}
.memori_1, .memori_2, .memori_3, .memori_4, .memori_5, .memori_6{
  position: absolute;
  left: 0;
  width: 10px;
  border-bottom: solid 1px #000;
}
.memori_1{
  bottom: 100px;
}
.memori_2{
  bottom: 82.5px;
}
.memori_3{
  bottom: 66px;
}
.memori_4{
  bottom: 49.5px;
}
.memori_5{
  bottom: 33px;
}
.memori_6{
  bottom: 16.5px;
}
.graph_1{
  width: 10%;
  background-color: #EF9339;
}
.graph_2{
  width: 10%;
  background-color: #71E291;
}
.graph_3{
  width: 10%;
  background-color: #E26EE4;
}
.graph_4{
  width: 10%;
  background-color: #EFE846;
}
.graph_text{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.graph_text p{
  width: 25%;
  text-align: center;
}
.result_img{
  width: 80%;
  margin: 0 auto;
}
.result_img_3{
  width: 70%;
  margin: 0 20% 0 10%;
}
.result_img_3 img{
  width: 100%;
  margin: 0 auto;
}
.result_img img{
  width: 100%;
}
.result_text{
  font-size: 24px;
}
.text_shadow{
  text-align: center;
  font-size: 24px;
  margin-top: 30px;
  text-shadow: -1px 3px 3px #c0c0c0;
}
.result_contents a{
  border: none;
  text-decoration: none;
  background-color: #EF9339;
  color: #fff;
  font-size: 20px;
  width: 400px;
  margin: 20px auto;
  padding: 10px 0;
  border-radius: 10px;
  position: relative;
  display: block;
  text-align: center;
}
.hidden{
  display: none;
}
.contact_body{
  width: 80%;
  max-width: 1200px;
  margin: 50px auto;
  border: 4px solid #21879bd4;
  padding: 100px 45px;
}
.contact_box{
  margin-bottom: 50px;
}
.contact_box p{
  width: 100%;
  font-size: 28px;
  color: #21879b;
  font-weight: 600;
  margin-bottom: 5px;
}
.contact_box p span{
  color: #fff;
  background-color: #ff0000;
  font-size: 24px;
  padding: 2px 5px;
  margin-left: 10px;
}
.contact_box input{
  width: 100%;
  height: 70px;
  font-size: 28px;
  padding: 10px 20px;
  border-radius: 10px;
  border: solid 2px #666;
}
.contact_box textarea{
  width: 100%;
  height: 200px;
  font-size: 28px;
  padding: 10px 20px;
  border-radius: 10px;
  border: solid 2px #666;
}
.contact_btn{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 100px;
}
.contact_btn button{
  background-color: #21879b;
  color: #fff;
  font-size: 28px;
  padding: 10px 30px;
  border-radius: 10px;
  text-align: center;
  width: 400px;
  border: none;
  cursor: pointer;
}
@media (max-width: 768px) {
  .progress-body{
    width: 90%;
    margin: 30px auto 50px;
  }
  .q_body h2{
    margin-bottom: 50px;
    font-size: 24px;
  }
  .q_number p{
    background-color: #21879b;
    color: #fff;
    border-radius: 100%;
    width: 60px;
    height: 60px;
    font-size:20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .q_choices{
    display: flex;
    width: 80%;
    min-width: 330px;
    flex-wrap: wrap;
    margin-bottom: 50px;
  }
  .q_body{
    width: 95%;
    padding: 10px;
  }
  .flex_2{
    margin: 0;
  }
  .flex_4{
    margin-left: 17.5% !important;
    margin-top: 20px;
  }
  .flex_5{
    margin-right: 17.5% !important; 
    margin-top: 20px;
  }
  .q_choices label{
    width: 95px;
    aspect-ratio: 1 / 1;
    border: solid 1px #21879b;
    background-color: #F2FDFF;
    border-radius: 20px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    color: rgb(0, 31, 90, 65% );
  }
  .q_back{
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 0px;
  }
  .q_back a{
    background-color: #EF9339;
    color: #fff;
    font-size: 18px;
    padding: 10px;
    width: 300px;
    text-align: center;
    border-radius: 10px;
    margin: 0 ;
    margin-bottom: 30px;
    position: relative;
  }
  .q_end_btn{
    height: 300px;
  }
  .q_end_btn button{
    background-color: #21879b;
    color: #fff;
    font-size: 24px;
    padding: 10px 30px;
    border-radius: 10px;
    text-align: center;
    width: 320px;
    border: none;
  }
  .result_body{
    width: 95%;
    margin: 20px auto 100px;
    border: 4px solid #21879bd4;
    padding: 40px 20px;
    display: block;
  }
  .result_contents{
    width: 100%;
  }
  .result_point{
    margin: 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    background-color: #F6FEFF;
    border-radius: 10px;
    padding: 20px;
    box-shadow: -3px 3px 3px 3px #ECF2FF;
  }
  .graph_body{
    width: 100%;
    border: solid 1px #000;
    text-align: center;
  }
  .sp_point{
    display: flex;
    align-items: center;
  }
  .point_text{
    margin-left: 20px;
    text-align: center;
  }
  .result_text{
    font-size: 18px;
  }
  .text_shadow{
    text-align: center;
    font-size: 18px;
    margin-top: 30px;
    text-shadow: -1px 3px 3px #c0c0c0;
  }
  .result_contents a{
    border: none;
    text-decoration: none;
    background-color: #EF9339;
    color: #fff;
    font-size: 16px;
    width: 300px;
    margin: 20px auto;
    padding: 10px 0;
    border-radius: 10px;
    position: relative;
    display: block;
    text-align: center;
  }
  .contact_body{
    width: 95%;
    max-width: 1200px;
    margin: 20px auto;
    border: 4px solid #21879bd4;
    padding: 50px 20px;
  }
  .contact_box{
    display: block;
    margin-bottom: 20px;
  }
  .contact_box p{
    width: 100%;
    font-size: 22px;
  }
  .contact_box input{
    width: 100%;
    height: 50px;
    font-size: 20px;
    padding: 10px 10px;
    border-radius: 10px;
  }
  .contact_btn{
    margin-top: 30px;
  }
  .contact_btn button{
    background-color: #21879b;
    color: #fff;
    font-size: 20px;
    padding: 10px 20px;
    border-radius: 10px;
    text-align: center;
    width: 300px;
    border: none;
  }
  .result_title{
    text-align: center;
    font-size: 32px;
  }
}
.kaigo_box_body{
  width: 60%;
  margin: 0 auto 100px;
}
.kaigo_box_body h2{
  font-size: 32px;
  text-align: center;
}
.kaigo_box{
  display: flex;
  justify-content: space-around;
  margin-top: 30px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  padding: 25px;
  background: #fff;
  border-radius: 10px;
}
.kaigo_box_text{
  width: 50%;
}
.kaigo_box_text h3{
  font-size: 24px;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.kaigo_box_text p{
  font-size: 18px;
}
.kaigo_box_img{
  width: 45%;
}
.kaigo_box_img img{
  width: 100%;
  height: 300px;
  object-fit: cover;
}
@media (max-width: 768px) {
  .kaigo_box_body{
    width: 95%;
    margin: 0 auto 50px;
  }
  .kaigo_box_body h2{
    font-size: 28px;
  }
  .kaigo_box{
    display: block;
    justify-content: space-around;
    margin-top: 50px;
  }
  .kaigo_box_text{
    width: 100%;
  }
  .kaigo_box_text h3{
    font-size: 20px;
  }
  .kaigo_box_text p{
    font-size: 16px;
  }
  .kaigo_box_img{
    width: 100%;
    margin-top: 20px;
  }
  .kaigo_box_img img{
    width: 100%;
    height: 200px;
  }
  .kaigo_box_text h3 .st_{
    width: 32px ;
    height: 27px;
    font-size: 16px;
  }
  .kaigo_box_text h3 .st{
    width: 27px ;
    height: 27px;
    font-size: 16px;
  }
  .br_pc{
    display: none;
  }
}
.kaigo_box_text h3 .st{
  background-color: #21879b;
  color: #fff;
  border-radius: 100%;
  width: 32px ;
  height: 32px;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 5px;
}
.kaigo_box_text h3 .st_{
  background-color: #21879b;
  color: #fff;
  border-radius: 100%;
  width: 32px ;
  height: 32px;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 5px;
}