/**************/
/*  TOP       */
/**************/
#top .cntWrap .logoblk {
  width: 71%;
  margin: 0 auto;
  /* padding: 15.2% 0 8.9%; */
  padding: 0 0 0;
}

#top .cntWrap .logoblk .logoMark {
  width: 72%;
  display: block;
  margin: 0 auto 6.6%;
}


#top .cntWrap .logoblk h1 .subTtl {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}

#top .cntWrap .logoblk h1 .subTtl .parts2 {
  padding: 0 4%;
  opacity: 1;
  overflow: hidden;
  position: relative;
  display: block;
}

#top .cntWrap .logoblk h1 .subTtl .parts2:before {
  background-color: #fff;
  content: "";
  display: block;
  position: absolute;
  top: -100px;
  left: 0;
  width: 10px;
  height: 100%;
  opacity: 0;
  transition: cubic-bezier(0.32, 0, 0.67, 0);
  animation: kiran 7s linear infinite;
}

@keyframes kiran {
  0% {
    transform: scale(2) rotate(45deg);
    opacity: 0;
  }
  3% {
    transform: scale(20) rotate(45deg);
    opacity: 0.6;
  }
  6% {
    transform: scale(30) rotate(45deg);
    opacity: 0.4;
  }
  9% {
    transform: scale(45) rotate(45deg);
    opacity: 0.2;
  }
  10% {
    transform: scale(50) rotate(45deg);
    opacity: 0;
  }
  100% {
    transform: scale(50) rotate(45deg);
    opacity: 0;
  }
}

#top .cntWrap .logoblk h1 .subTtl {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  width: 63%;
  margin: 0 auto 1.8em;
}

#top .cntWrap .logoblk h1 .mainTtl {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  margin-bottom: 2em;
}

#top .cntWrap .logoblk h1 .mainTtl .left,
#top .cntWrap .logoblk h1 .mainTtl .right {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: nowrap;
}

#top .cntWrap .logoblk h1 .mainTtl .left span, #top .cntWrap .logoblk h1 .mainTtl .right span {
  padding: 0 0.4em;
}

#top .cntWrap .logoblk h1 .mainTtl .left {
  padding-right: 0.8em;
}

#top .cntWrap .logoblk h1 .mainTtl .left .char1 {
  padding-left: 0;
}

#top .cntWrap .logoblk h1 .mainTtl .left .char3 {
  position: relative;
  top: -50%;
  transform: translateY(50%);
}

#top .cntWrap .logoblk h1 .mainTtl .right .char5 {
  padding-right: 0;
}

#top .cntWrap .logoblk h1 .mainTtl .right .char6 {
  padding: 0;
}

#top .cntWrap .logoblk h1 .eng {
  font-size: 2.125em;
  color: #009bdc;
  text-align: center;
  display: block;
  letter-spacing: 0.2em;
}

#top .cntWrap .produceBlk {
  width: 38%;
  margin: 11.4% auto 0;
}

#top .cntWrap .produceBlk p {
  font-size: 2.03em;
  text-align: center;
  color: #a5222c;
  letter-spacing: 0.05em;
  margin-bottom: 1.6em;
}
#top .cntWrap .btnWrap {
  font-size: 0.6em;
}


/**************/
/*  QUESTION  */
/**************/
#question .cntWrap .wpcf7 .formBlk h1 {
  /* font-size: 4.6875em; */
  color: #be9b0f;
  text-align: center;
  margin-bottom: 8.9%;
  /* margin-top: 6.5%; */
  letter-spacing: 0.08em;
  font-size: 3.0em;
}
/*
@media (min-width: 768px) {
  #question .cntWrap .formBlk h1 {
    font-size: calc(7.68em + ((1vw - 7.68px) * 1.9953));
    min-height: 0vw;
  }
}
*/
@media (max-width: 1620px) {
  #question .cntWrap .wpcf7 .formBlk h1 {
    /* font-size: 4.6875em; */
    font-size: 3em;
  }
}

#question .cntWrap .wpcf7 .formBlk h1 .num {
  font-size: 1.3em;
  letter-spacing: 0.1em;
}

#question .cntWrap .wpcf7 .formBlk h1 .eng {
  font-size: 0.528em;
  display: block;
  letter-spacing: 0.2em;
}

#question .cntWrap .wpcf7 .formBlk {
  width: 80%;
  margin: 0 auto 8em;
}

#question .cntWrap .wpcf7 .formBlk {
  width: 80%;
  margin: 0 auto 10.1%;
}

#question .cntWrap .wpcf7 .formBlk dt {
  display: flex;
  flex-wrap: nowrap;
}

#question .cntWrap .wpcf7 .formBlk dt {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  /* font-size: 3.5625em; */
  color: #be9b0f;
  letter-spacing: 0.05em;
  margin-bottom: 3.9%;
  font-size: 2.9em;
}
/*
@media (min-width: 768px) {
  #question .cntWrap .formBlk dt {
    font-size: calc(5.56em + ((1vw - 7.68px) * 1.7488));
    min-height: 0vw;
  }
}
*/
@media (min-width: 1620px) {
  #question .cntWrap .wpcf7 .formBlk dt {
    /* font-size: 3.5625em; */
    font-size: 3em;
  }
}

#question .cntWrap .wpcf7 .formBlk dt h2 {
  position: relative;
  padding-left: 3em;
  /* font-size: 2.0em; */
}

#question .cntWrap .wpcf7 .formBlk dt h2:before {
  content: "";
  position: absolute;
  width: 2.3em;
  height: 2.3em;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

#question .cntWrap .wpcf7 .formBlk dt .q1:before {
  background: url(../img/star_n1.png)no-repeat;
  background-size: cover;
}

#question .cntWrap .wpcf7 .formBlk dt .q2:before {
  background: url(../img/star_n2.png)no-repeat;
  background-size: cover;
}

#question .cntWrap .wpcf7 .formBlk dt .q3:before {
  background: url(../img/star_n3.png)no-repeat;
  background-size: cover;
}

#question .cntWrap .wpcf7 .formBlk dt h2 .eng {
  display: block;
  /* font-size: 0.596em; */
  /* margin-top: 0.6em; */
  margin-top: 0.2em;
  font-size: 0.8em;
}

#question .cntWrap .wpcf7 .formBlk dd {
  /* font-size: 2.86em; */
  color: #be9b0f;
  margin-bottom: 13.5%;
  display: flex;
  align-items: center;
  font-size: 1.4em;
}
#question .cntWrap .wpcf7 .formBlk dd.sex {
   width: 100%;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   font-size: 1.9em;
}
/*
@media (min-width: 768px) {
  #question .cntWrap .formBlk dd {
    font-size: calc(4em + ((1vw - 7.68px) * 1.8192));
    min-height: 0vw;
  }
}
*/
@media (min-width: 1620px) {
  #question .cntWrap .wpcf7 .formBlk dd {
    font-size: 2.86em;
  }
  #question .cntWrap .wpcf7 .formBlk dd.sex {
    font-size: 1.9em;
  }
}

#question .cntWrap .wpcf7 .formBlk dd .birth {
  display: flex;
  flex-wrap: nowrap;
}

#question .cntWrap .wpcf7 .formBlk dd .birth li:not(:last-child) {
  margin-right: 0.7em;
}

#question .cntWrap .wpcf7 .formBlk dd .birth li {
  position: relative;
}

#question .cntWrap .wpcf7 .formBlk dd .birth li:after {
  position: absolute;
  content: "▼";
  color: #00b9dc;
  top: 50%;
  transform: translateY(-50%);
  right: 1em;
  pointer-events: none;
}

#question .cntWrap .wpcf7 .formBlk dd .birth li select {
  color: #00b9dc;
  padding: 0.5em 3em 0.5em 1.5em;
  border: 4.5px solid;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

#question .cntWrap .wpcf7 .formBlk dd label .item {
  display: inline-block;
  margin-right: 2em;
  letter-spacing: 0.05em;
  font-size: 0.8em;
}

#question .cntWrap .wpcf7 .formBlk dd label .item .eng {
  display: block;
  font-size: 0.753em;
  margin-top: 0.5em;
}

input[type=radio] {
  display: none;
}

#question .cntWrap .wpcf7 .formBlk dd label {
  position: relative;
  padding-left: 2em;
  cursor: pointer;
}

#question .cntWrap .wpcf7 .formBlk dd label::before,
#question .cntWrap .wpcf7 dd input[type=radio] + .wpcf7-list-item-label::after {
  position: absolute;
  content: "";
  display: block;
  top: 50%;
  transform: translateY(-50%);
}

#question .cntWrap .wpcf7 .formBlk dd label::before {
  width: 1.5em;
  height: 1.5em;
  border: 4.5px solid #00b9dc;
  border-radius: 50%;
  left: 0;
}

#question .cntWrap .wpcf7 dd input[type=radio] + .wpcf7-list-item-label::after {
  width: 0.6em;
  height: 0.6em;
  background: #00b9dc;
  border-radius: 50%;
  right: 0;
  left: 0.45em;
  opacity: 0;
}

#question .cntWrap .wpcf7 dd input[type=radio]:checked + span.wpcf7-list-item-label::after {
  opacity: 1;
}

#question .cntWrap .wpcf7 .formBlk dd .selectWrap {
  position: relative;
}

#question .cntWrap .wpcf7 .formBlk dd .selectWrap:after {
  position: absolute;
  content: "▼";
  color: #00b9dc;
  top: 50%;
  transform: translateY(-50%);
  right: 1em;
  pointer-events: none;
}

#question .cntWrap .wpcf7 .formBlk dd .selectWrap select {
  color: #00b9dc;
  font-family: 'ubuntu_titling_bold', 'a1_gothicStd', sans-serif;
  padding: 0.5em 3em 0.5em 1.5em;
  border: 4.5px solid;
  width: 14.5em;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

#question .wpcf7 .btnWrap {
  width: 68%;
  justify-content: center;
  flex-direction: column;
  font-size: 1.5em;
  padding: 2rem;
  cursor: pointer;
}

#question .wpcf7 .btnWrap:after {
  height: auto;
}

#question .wpcf7-response-output {
  display: none;
}

@media (max-width: 400px) {
  #question .cntWrap .wpcf7 .formBlk dd,
  #question .wpcf7 .btnWrap p {
    font-size: 1em;
  }
}


/********************/
/*  FORTUNE NUMBER  */
/********************/
#numOutput .cntWrap .outputBlk {
  margin: 5% auto;
  width: 90%;
}

#numOutput .cntWrap .outputBlk h1 {
  /* font-size: 3.875em; */
  text-align: center;
  color: #be9b0f;
  padding: 3.8% 5.5%;
  border: 0.43vw solid;
  font-size: 2.5em;
}
/*
@media (min-width: 768px) {
  #numOutput .cntWrap .outputBlk h1 {
    font-size: calc(5.875em + ((1vw - 7.68px) * 2.054));
    min-height: 0vw;
  }
}
*/
@media (min-width: 1620px) {
  #numOutput .cntWrap .outputBlk h1 {
    /* font-size: 3.875em; */
    font-size: 3em;
  }
}

#numOutput .cntWrap .outputBlk h1 .eng {
  display: block;
  margin-top: 0.5em;
  font-size: 0.63em;
  letter-spacing: 0.2em;
}

#numOutput .cntWrap .outputBlk .numDisplay {
  margin: 5.6% auto 4.2%;
  width: 68%;
  position: relative;
  /* background: #311301; 背景色トル */
  /* border: 8px solid #c6a62f; 罫線ありの場合コメントアウト消す */
  /* width: 100%;  罫線ありの場合コメントアウト消す */
}

#numOutput .cntWrap .outputBlk .numDisplay:after {
  display: block;
  content: "";
  padding-top: 90%;
}

#numOutput .cntWrap .outputBlk .numDisplay .starWrap {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 80%;
  margin: auto;
  /* animation: gacha 3s ease-in; */
  animation: gacha 1.5s ease-in;
  transform-origin: center center;
}

@keyframes gacha {
  0% {
    opacity: 0;
    /* -webkit-transform: scale(0) translateX(0) rotate(0deg); */
    transform: scale(0) translateX(0) rotate(0deg);
  }

  25% {
    opacity: 0;
    /* -webkit-transform: scale(0) translateX(0) rotate(0deg); */
    transform: scale(0) translateX(0) rotate(0deg);
  }

  99.9%, to  {
    opacity: 1;
    /* -webkit-transform: scale(1) translateX(0) rotate(360deg); */
    transform: scale(1) translateX(0) rotate(360deg);
  }
}

#numOutput .cntWrap .outputBlk .numDisplay .num {
  position: absolute;
  top: 45%;
  line-height: 1;
  /* font-size: 13.6em; */
  color: #311301;
  background: url(../img/star.png)no-repeat;
  font-size: 7em;
}
/*
@media (min-width: 768px) {
  #numOutput .cntWrap .outputBlk .numDisplay .num {
    font-size: calc(24.6em + ((1vw - 7.68px) * 3.6502));
    min-height: 0vw;
  }
}
*/
@media (min-width: 1620px) {
  #numOutput .cntWrap .outputBlk .numDisplay .num {
    font-size: 13.6em;
  }
}

#numOutput .cntWrap .outputBlk h2 {
  /* font-size: 3.06em; */
  line-height: 1.6;
  color: #be9b0f;
  text-align: center;
  font-size: 2.0em;
}
/*
@media (min-width: 768px) {
  #numOutput .cntWrap .outputBlk h2 {
    font-size: calc(4.5em + ((1vw - 7.68px) * -16.1385));
    min-height: 0vw;
  }
}
*/
@media (min-width: 1620px) {
  #numOutput .cntWrap .outputBlk h2 {
    /* font-size: 3.06em; */
    font-size: 2.8em;
  }
}

#numOutput .cntWrap .outputBlk h2 .eng {
  font-size: 0.642em;
  display: block;
  letter-spacing: 0.1em;
  margin-top: 0.7em;
  font-size: 0.8em;
}
#numOutput .cntWrap .btnWrap {
   padding: 2em 16.5%;
   max-width: 400px;
}
.btnWrap {
    border-radius: 2em;
    padding: 2rem 4rem;
}

@media (max-width: 600px) {
  /* 3つの質問 CSS調整 */
  #question .cntWrap .wpcf7 .formBlk h1 {
     font-size: 2.3em;
  }
  #question .cntWrap .wpcf7 .formBlk dt {
     font-size: 1.7em;
  }
  #question .cntWrap .wpcf7-list-item {
     margin: 0 0 0.5em 1em;
  }
  #question .wpcf7 .btnWrap {
     font-size: 1em;
  }
  
  /* 占い結果 CSS調整 */
  #numOutput .cntWrap .outputBlk h1 {
     font-size: 1.5em;
  }
  #numOutput .cntWrap .outputBlk h2 {
     font-size: 1.1em;
  }
  #numOutput .cntWrap .outputBlk h2 .eng {
     font-size: 1em;
  }
}
@media (max-width: 400px) {
  #numOutput .cntWrap .outputBlk .numDisplay .num {
     font-size: 13vw;
  }

}
.wpcf7-spinner {
  display: none !important;
}
#top .cntWrap .logoblk h1 .subTtl{
  margin: 0 auto;
  width: 300px;
}

/* ===== add mizutani 250523 ===== */
.mainTtl-new{
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1rem;
}
.mainTtl-new>span:nth-child(6){
  margin-right: 1.5rem;
}
.chars{
  height: 100%;
  display: flex;
  align-items: end;
}
.chars img{
  object-fit: contain;
}
.chars-right img{
  height: 100%;
}
/* 全体のカラー変更 */
#top .cntWrap .logoblk h1 .subTtl{
  width: 80%;
  justify-content: center;
}
.subTtl img,.subTtl-en img {
    height: 100%;
    object-fit: contain;
}
#top .cntWrap .logoblk .logoMark {
    width: 65%;
}
.subTtl-en{
    height: auto;
    display: block;
    margin: 1rem auto 4.8rem;
    width: 80%;
}
.btnWrap{
      background: #009bdc;
      width: fit-content;
      padding: 2rem;
      border-radius: 2rem;
}
.mainCnt .cntWrap {
    outline: 3px solid #f04137;
}
.mainCnt .cntWrap:before {
    border: 0.28vw solid #f04137;
}
.mainCnt .cntWrap .frameDeco{
  border: 0.28vw solid #f04137;
}
#question .cntWrap .wpcf7 .formBlk dd .birth li:after,
#question .cntWrap .wpcf7 .formBlk dd .selectWrap:after{
  color: #000;
}
h2.q1,h2.q2,h2.q3,span.wpcf7-list-item-label{
  color: #009bdc;
}
span.wpcf7-list-item-label {
    color: #000;
}
#question .cntWrap .wpcf7 dd input[type=radio] + .wpcf7-list-item-label::after{
  background: #009bdc;
}
#question .cntWrap .wpcf7 .formBlk dd label::before{
  border: 4.5px solid #000;
}
#question .cntWrap .wpcf7 .formBlk dt{
  color: #009bdc;
}
#numOutput .cntWrap .outputBlk h1{
  color: #009bdc;
}
#numOutput .cntWrap .outputBlk .numDisplay .num {
    color: #fff;
}
#numOutput .cntWrap .outputBlk h1{
  color: #009bdc;
}
#numOutput .cntWrap .outputBlk h2{
  color: #000;
}
#numOutput .cntWrap .outputBlk .numDisplay .num {
    color: #fff;
    background: transparent;
}
#top .cntWrap .logoblk h1 .eng{
  font-size: 2.8rem;
}
/* 文字が2重に見えることの調整 */
:root {
  --font-weight-normal: 300;
  --font-size-h2: 2rem; 
  --font-size-h1: 2.5rem; 
  --font-size-p: 1.2rem;
} 
#question .cntWrap .wpcf7 .formBlk dt h2{
  font-weight: var(--font-weight-normal);

}
#question .cntWrap .wpcf7 .formBlk dd .birth li select,
#question .cntWrap .wpcf7 .formBlk dd .selectWrap select,
#question .cntWrap .wpcf7 .formBlk dd label::before{
  border-width: 2px;
  color: #000;
}
span.wpcf7-form-control.wpcf7-radio {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    row-gap: 2rem;
}
#question .cntWrap .wpcf7-list-item{
  margin: 0;
}


/* レスポンシブ　フォントサイズ調整 */
#question .cntWrap .wpcf7 .formBlk h1 {
    font-size: var(--font-size-h1);
    color: #000;
}
#question .cntWrap .wpcf7 .formBlk dt h2,button, [type="button"], [type="reset"], [type="submit"] {
    font-size: var(--font-size-h2);
}

/* 外枠のレスポンシブ */
.mainCnt .cntWrap {
    position: relative;
    z-index: 1;
    outline-offset: -12px;
}
.mainCnt .cntWrap:before{
  border-width: 3px;
}
.mainCnt {
    padding: 3% 0;
    max-width: 700px;
    width: 90%;
}

/* =====スマホ by mizutani ===== */
@media(max-width:600px){
  :root {
  --font-size-h2: 1.8rem; 
  --font-size-h1: 2.2rem; 
  } 
  #question .cntWrap .wpcf7 .formBlk dt {
    margin-bottom: 1rem;
  }
  *, ::before, ::after {
    font-size: var(--font-size-p);
}
#question .cntWrap .wpcf7 .formBlk {
    width: 90%;
}
#question .wpcf7 .btnWrap {
    width: 90%;
  }
  #question .cntWrap .wpcf7 .formBlk dt h2,button, [type="button"], [type="reset"], [type="submit"] {
    font-size: var(--font-size-p);
}
.mainCnt {
    height: 90%;
}
}