@charset "utf-8";
*, *::before, *::after {
 box-sizing: border-box
}
ul[class], ol[class] {
 padding: 0
}
body, h1, h2, h3, h4, p, ul[class], ol[class], figure, blockquote, dl, dd {
 margin: 0
}
html {
 scroll-behavior: smooth
}
body {
 min-height: 100vh;
 text-rendering: optimizeSpeed;
 line-height: 1.5
}
ul[class], ol[class] {
 list-style: none
}
a:not([class]) {
 text-decoration-skip-ink: auto
}
img {
 max-width: 100%;
 display: block;
}
@media(prefers-reduced-motion:reduce) {
 * {
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .01ms !important;
  scroll-behavior: auto !important
 }
}
html {
 font-size: 62.5%;
}
body {
 background-image: none;
 background-color: #a0d8ea;
 font-family: 'M PLUS Rounded 1c', sans-serif;
 font-size: 1.4rem;
 font-weight: 500;
 transition: all 0.5s ease 0s;
}
a {
 color: #000;
 text-decoration: none;
}
#page-animate::before, #page-animate::after {
 content: "";
 position: fixed;
 top: 0;
 width: 100%;
 height: 100%;
 z-index: 9999;
 pointer-events: none;
 background-color: #fff;
 background-image: url("../img/ani2.gif");
 background-repeat: no-repeat;
 background-size: 334px 54px;
 background-position: 50% 50%;
}
@media screen and (max-width: 767px) {
 #page-animate::before, #page-animate::after {
  background-size: 200px 32px;
 }
}
#page-animate::before {
 left: 100%;
 -webkit-transition: left 1.8s cubic-bezier(0.4, 0, 0.2, 1);
 transition: left 1.8s cubic-bezier(0.4, 0, 0.2, 1);
}
#page-animate::after {
 right: 100%;
 -webkit-transition: right 1.8s cubic-bezier(0.4, 0, 0.2, 1);
 transition: right 1.8s cubic-bezier(0.4, 0, 0.2, 1);
}
#page-animate.is-slide-in::before {
 left: 0;
}
#page-animate.is-slide::after {
 right: 0;
}
.bg {
 background-image: url("../img/dot.png");
 background-repeat: repeat;
}
.frame {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 border: 20px solid #fff;
 pointer-events: none;
 z-index: 100;
}
.frame li {
 width: 0;
 height: 0;
 border-style: solid;
 position: absolute;
}
.frame li:nth-child(1) {
 border-width: 14px 14px 0 0;
 border-color: #fff transparent transparent transparent;
 top: 0;
 left: 0;
}
.frame li:nth-child(2) {
 border-width: 0 14px 14px 0;
 border-color: transparent #fff transparent transparent;
 top: 0;
 right: 0;
}
.frame li:nth-child(3) {
 border-width: 0 0 14px 14px;
 border-color: transparent transparent #fff transparent;
 bottom: 0;
 right: 0;
}
.frame li:nth-child(4) {
 border-width: 14px 0 0 14px;
 border-color: transparent transparent transparent #fff;
 bottom: 0;
 left: 0;
}
@media screen and (max-width: 767px) {
 .frame {
  border-width: 10px;
 }
 .frame li:nth-child(1) {
  border-width: 7px 7px 0 0;
 }
 .frame li:nth-child(2) {
  border-width: 0 7px 7px 0;
 }
 .frame li:nth-child(3) {
  border-width: 0 0 7px 7px;
 }
 .frame li:nth-child(4) {
  border-width: 7px 0 0 7px;
 }
}
/* 
    question
-----------------*/
.whiteBox {
 position: relative;
 width: 720px;
 margin: 0 auto;
 background-color: #fff;
 border-radius: 10px;
 box-shadow: 15px 15px 0px 0 rgba(63, 155, 197, .4);
}
@media screen and (max-width: 920px) {
 .whiteBox {
  width: 94%;
 }
}
.qaBox .subQa {
 position: relative;
 padding: 38px 38px 108px;
}
@media screen and (max-width: 767px) {
 .qaBox .subQa {
  position: relative;
  padding: 16px 16px 108px;
 }
}
.ill1::after, .ill2::after, .ill3::after, .ill4::after {
 content: "";
 position: absolute;
 background-repeat: no-repeat;
 background-size: contain;
 right: 15px;
 bottom: 0;
 width: 337px;
 height: 100px;
 -webkit-transition: left 1.8s cubic-bezier(0.4, 0, 0.2, 1);
 transition: left 1.8s cubic-bezier(0.4, 0, 0.2, 1);
	display: none;
}
@media screen and (max-width: 767px) {
 .ill1::after, .ill2::after, .ill3::after, .ill4::after {
  right: 10px;
  width: 202px;
  height: 60px;
 }
}
.ill1::after {
 background-image: url("../img/ill1.png");
}
.ill2::after {
 background-image: url("../img/ill2.png");
}
.ill3::after {
 background-image: url("../img/ill3.png");
}
.ill4::after {
 background-image: url("../img/ill4.png");
}
.qaBox .subQa .photo {
 margin-bottom: 21px;
 text-align: center;
}
.qaBox dl {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-align: center;
 -ms-flex-align: center;
 align-items: center;
}
.qaBox dt {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-align: center;
 -ms-flex-align: center;
 align-items: center;
 -webkit-box-pack: center;
 -ms-flex-pack: center;
 justify-content: center;
 width: 78px;
 height: 78px;
 background-image: url("../img/num.png");
 background-repeat: no-repeat;
 background-size: contain;
 font-size: 3rem;
 font-weight: 700;
 color: #ffe000;
}
.qaBox dd {
 flex: 1;
 padding-left: 25px;
 font-size: 2.6rem;
 font-weight: 500;
}
@media screen and (max-width: 767px) {
 .qaBox dt {
  width: 48px;
  height: 48px;
  font-size: 1.8rem;
 }
 .qaBox dd {
  padding-left: 10px;
  font-size: 1.9rem;
 }
}
.qaBox .subQa .answerUl {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-align: center;
 -ms-flex-align: center;
 align-items: center;
 -webkit-box-pack: justify;
 -ms-flex-pack: justify;
 justify-content: space-between;
 -ms-flex-wrap: wrap;
 flex-wrap: wrap;
 margin-top: 50px;
}
@media screen and (max-width: 767px) {
 .qaBox .subQa .answerUl {
  margin-top: 25px;
 }
}
.qaBox .subQa .answerUl li {
 width: 47.5%;
}
@media screen and (min-width: 768px) {
 .qaBox .subQa .answerUl li:nth-child(n+3) {
  margin-top: 5%;
 }
}
.qaBox .subQa .answerUl li a {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-pack: center;
 -ms-flex-pack: center;
 justify-content: center;
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
 -ms-flex-direction: column;
 flex-direction: column;
 padding: 17px;
 font-size: 2.3rem;
 font-weight: 500;
 line-height: 1.2;
 text-align: center;
 text-decoration: none;
 border-radius: 55px;
 border: 3px solid #ffe000;
}
.qaBox .subQa .answerUl li a span {
 font-size: 1.4rem;
}
.qaBox .subQa .answerUl li a:hover {
 color: #fff;
 background: #ffe000;
}
.reBox {
 position: absolute;
 bottom: 38px;
 left: 38px;
}
@media screen and (max-width: 1024px) {
 .qaBox .subQa .answerUl li a span {
  font-size: 1.2rem;
 }
}
@media screen and (max-width: 767px) {
 .reBox {
  bottom: 16px;
  left: 16px;
 }
}
.reBox .back {
 font-size: 1.6rem;
 font-weight: 500;
}
.reBox .back a {
 padding-left: 30px;
 display: inline-block;
 background-image: url("../img/back.png");
 background-repeat: no-repeat;
 background-position: left center;
 background-size: contain;
}
.reBox .back a:hover {
 opacity: 0.7;
}
@media all and (max-width: 767px) {
 .whiteBox {
  width: 94%;
 }
 .qaBox .subQa .answerUl {
  -webkit-display: block;
  display: block;
  text-align: center;
 }
 .qaBox .subQa .answerUl li {
  margin: 0 0 15px;
  width: auto;
  display: block;
 }
 .qaBox .subQa .answerUl li:last-child {
  margin: 0;
 }
 .qaBox .subQa .answerUl li a {
  padding: 12px 10px;
  height: auto;
  font-size: 1.75rem;
  letter-spacing: 1px;
  border-radius: 35px;
  border: 2px solid #008741;
 }
 .reBox .back {
  margin-left: -4px;
  font-size: 1.6rem;
 }
 .reBox .back a {
  padding-left: 25px;
  background-size: 20px auto;
 }
 #subQa06 .photo img {
  width: 100%;
  height: auto !important;
 }
}
.bg-ani, .bg-ani2, .bg-dot {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100vh;
}
.bg-ani {
 background: url("../img/main-bg.png");
 animation: bgLoop 55s linear infinite;
}
.bg-ani2 {
 background: url("../img/main-bg2.png");
 animation: bgLoopin 45s linear infinite;
}
.bg-dot {
 background-image: url("../img/dot.png");
 background-repeat: repeat;
}
.wrp {
 position: relative;
}
@keyframes bgLoop {
 0% {
  background-position: 0 0;
 }
 100% {
  background-position: -1000px 1000px;
 }
}
.wrp2 {
 position: relative;
 padding: 50px;
}
@keyframes bgLoopin {
 0% {
  background-position: 0 0;
 }
 100% {
  background-position: -1000px 1000px;
 }
}
@media screen and (max-width: 767px) {
 .wrp2 {
  padding: 25px 15px;
 }
}
@media screen and (min-width: 768px) {
 .wrp .logo {
  position: fixed;
  top: 50px;
  right: 50px;
 }
}
@media screen and (max-width: 767px) {
 .wrp .logo {
  position: relative;
 }
 .wrp .logo img {
  margin: 0 auto;
 }
}
.wrp .logo img {
 width: 150px;
 height: auto;
}
.header img {
 width: auto;
 height: 40px;
}
@media screen and (min-width: 768px) {
 .header {
  position: fixed;
  top: 40px;
  left: 50px;
 }
}
@media screen and (max-width: 767px) {
 .header img {
  margin: 0 auto;
 }
}
.wrp-home, .wrp-question, .wrp-result {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-align: center;
 -ms-flex-align: center;
 align-items: center;
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
 -ms-flex-direction: column;
 flex-direction: column;
 -webkit-box-pack: center;
 -ms-flex-pack: center;
 justify-content: center;
 width: 100%;
}
.wrp-result {
 padding-top: 100px;
}
.wrp-home {
 height: 100vh;
 height: calc(100vh - 150px);
}
@media screen and (min-width: 768px) {
 .wrp-question {
  height: 100vh;
  height: calc(100vh - 100px);
 }
}
@media screen and (max-width: 767px) {
 .wrp-question, .wrp-result {
  padding-top: 25px;
 }
}
.wrp-home {
 text-align: center;
}
.wrp-home strong {
 display: block;
 font-size: 2.3rem;
 font-weight: 500;
 text-align: center;
}
@media screen and (max-width: 767px) {
 .wrp-home strong {
  font-size: 1.7rem;
 }
}
.wrp-home h1 {
 margin: 40px 0 30px;
}
@media screen and (max-width: 767px) {
.wrp-home h1 {
 margin: 25px 0 15px;
}
}
.wrp-home p {
 margin-top: 10px;
 font-size: 1.8rem;
 text-align: center;
 line-height: 1.6;
}
.wrp-home em {
 display: block;
 margin-top: 10px;
 font-style: normal;
 font-size: 1.3rem;
 text-align: center;
 line-height: 1.6;
}
.wrp-home img {
 margin: 0 auto;
}
@media screen and (min-width: 768px) {
 .wrp-home p {}
}
@media screen and (max-width: 767px) {
 .wrp-home img {
  width: 80%;
 }
 .wrp-home h1 + img {
  width: 60%;
 }
 .wrp-home p {
  margin-top: 15px;
  line-height: 1.6;
  font-size: 1.3rem;
 }
 .wrp-home em {
  font-size: 1.2rem;
 }
}
/* 
    button
-----------------*/
.btn-cross {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-align: center;
 -ms-flex-align: center;
 align-items: center;
 -webkit-box-pack: center;
 -ms-flex-pack: center;
 justify-content: center;
 position: relative;
 width: 400px;
 margin-top: 25px;
 border-top: solid 2px #000;
 border-bottom: solid 2px #000;
 text-decoration: none;
 font-weight: 500;
 font-size: 2.8rem;
}
.btn-cross.btn-cross-sm {
 width: 200px;
 font-size: 1.8rem;
}
.result-link {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-pack: center;
 -ms-flex-pack: center;
 justify-content: center;
}
.result-link .btn-cross.btn-cross-sm {
 font-size: 1.6rem;
}
@media screen and (max-width: 767px) {
 .btn-cross {
  width: 90%;
 }
 .result-link .btn-cross.btn-cross-sm {
  font-size: 1.4rem;
 }
}
.btn-cross span {
 display: block;
 padding: 0.35em 1em;
 background-color: #ffe000;
 width: calc(100% - 14px);
 text-align: center;
}
.btn-cross:hover span {
 width: 100%;
 transition: .3s;
}
.btn-cross:before, .btn-cross:after {
 content: "";
 position: absolute;
 top: -7px;
 width: 2px;
 height: -webkit-calc(100% + 14px);
 height: calc(100% + 14px);
 background-color: #000;
 transition: .3s;
}
.btn-cross:before {
 left: 7px;
}
.btn-cross:after {
 right: 7px;
}
.btn-cross:hover:before {
 top: 0px;
 left: 0;
 height: 100%;
}
.btn-cross:hover:after {
 top: 0px;
 right: 0;
 height: 100%;
}
.wrp-result .result-ttl {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-align: center;
 -ms-flex-align: center;
 align-items: center;
 -webkit-box-pack: center;
 -ms-flex-pack: center;
 justify-content: center;
}
.wrp-result .result-ttl span {
 padding: 0 10px;
	display: none;
}
.wrp-result .result-ttl img {
 width: 36px;
 height: 50px;
}
@media screen and (max-width: 767px) {
 .wrp-result .result-ttl span {
  padding: 0 5px;
 }
}
@media screen and (max-width: 480px) {
 .wrp-result .result-ttl img {
  width: 26px;
  height: 36px;
 }
}
.wrp-result .result-ttl p {
 position: relative;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-pack: center;
 -ms-flex-pack: center;
 justify-content: center;
 padding: 0 10px;
 font-weight: 500;
 font-size: 3rem;
 line-height: 1.2;
 letter-spacing: .05em;
 text-align: center;
}
.wrp-result .result-ttl p em {}
.wrp-result .result-ttl p em {
 display: inline;
 margin-left: .1em;
 margin-right: .1em;
 padding-left: .25em;
 padding-right: .25em;
 font-style: normal;
 background: linear-gradient(transparent 75%, #ffe000 75%);
}
@media screen and (max-width: 767px) {
 .wrp-result .result-ttl p {
  font-size: 2rem;
 }
}
.wrp-result .result-list {
 width: 770px;
 margin: 25px auto 0;
}
.wrp-result .result-list li {
 padding: 38px;
 background-color: #fff;
 border-radius: 10px;
 box-shadow: 15px 15px 0px 0 rgba(63, 155, 197, .4);
}
.wrp-result .result-list li:nth-child(n+2) {
 margin-top: 25px;
}
.wrp-result .result-list li .type, .wrp-result .result-list li .selection, .wrp-result .result-list li .ttl {
 text-align: center;
}
.wrp-result .result-list li .type span, .wrp-result .result-list li .selection {
 font-size: 1.6rem;
}
.wrp-result .result-list li .type span {
 padding: 8px;
}
.wrp-result .result-list li .type.type1 span {
 background-color: #C3E6F9;
}
.wrp-result .result-list li .type.type2 span {
 background-color: #C6FAC2;
}
.wrp-result .result-list li .selection {
 margin-top: 15px;
}
.wrp-result .result-list li .ttl {
 margin-top: 15px;
 font-size: 2.4rem;
 font-weight: 500;
}
.wrp-result .result-list li .txt {
 margin-top: 25px;
 font-size: 1.5rem;
}
@media screen and (max-width: 768px) {
 .wrp-result .result-list {
  width: 94%;
 }
}
@media screen and (max-width: 767px) {
 .wrp-result .result-list li {
  padding: 19px;
  box-shadow: 10px 10px 0 0 rgba(240, 210, 0, .5);
 }
 .wrp-result .result-list li .type span, .wrp-result .result-list li .selection {
  font-size: 1.5rem;
 }
 .wrp-result .result-list li .ttl {
  font-size: 2rem;
 }
 .wrp-result .result-list li .txt {
  margin-top: 15px;
  font-size: 1.3rem;
 }
}
.wrp-result .result-inner {
 padding: 50px;
 background-color: #fff;
}
.wrp-result .result-inner .type-ttl {
 font-size: 2.4rem;
 font-weight: 500;
 text-align: center;
}
.wrp-result .result-inner .type-sub {
 font-size: 1.8rem;
 font-weight: 500;
 text-align: center;
}
.wrp-result .result-inner .type-txt {
 margin-top: 25px;
}
.footer {
 width: 100%;
}
.footer small {
 display: block;
 text-align: center;
 font-size: 1.1rem;
}
 .page-home .footer {
  position: absolute;
  left: 0;
  bottom: 35px;
  /*margin-top: 25px;*/
 }
@media screen and (min-width: 768px) {
 .page-question .footer {
  position: absolute;
  left: 0;
  bottom: 35px;
 }
 .page-question .footer {
  margin-top: 25px;
 }
 .page-result .footer {
  margin-top: 25px;
 }
}
@media screen and (max-width: 767px) {
 .footer {
  margin-top: 25px;
 }
}
@media (min-width: 1025px) {
 .lg-hide {
  display: none !important
 }
}
@media (min-width: 768px) and (max-width: 1024px) {
 .md-hide {
  display: none !important
 }
}
@media (max-width: 767px) {
 .sm-hide {
  display: none !important
 }
}
@media (min-width: 1025px) {
 .lg-visible {
  display: inherit !important
 }
}
@media (min-width: 768px) and (max-width: 1024px) {
 .md-visible {
  display: inherit !important
 }
}
@media (max-width: 767px) {
 .sm-visible {
  display: inherit !important
 }
}