@property --_w {
  syntax: '<length>';
  inherits: true;
  initial-value: 100vw; 
}

@property --_h {
  syntax: '<length>';
  inherits: true;
  initial-value: 100vh; 
}
:root {
  --w: tan(atan2(var(--_w), 1px));
  --h: tan(atan2(var(--_h), 1px));


  --cl_wht: #FFF;
  --cl_ccc: #CCC;
  --cl_ddd: #DDD;
  --cl_eee: #EEE;
  --cl_000: #FEF5EF;
  --cl_001: #feecd2;
  --cl_002: #f4d8bc;
  --cl_003: #e0ac80;
  --cl_63: #636363;
  --cl_77: #777b38;

  --cl_AnimeBG: #FFF;
  /*
    --cl_004: #5A5043;
  */

  --cl_004: #f4d8bc;
  --w_mobile: 375px;
  --wrapper_pd: 1em;

  --query_btn_tex: #636363;
  --query_btn_bg: rgba(0,0,0,0);
  --query_btn_bgwh: #FFF;
  --query_btn_border: 1px solid #636363;


  --btn_bg: rgba(0,0,0,0);
  --btn_bg_wh: #FFF;
  --btn_tex: #777b38;
  --btn_bg_checked: #777b38;
  --btn_tex_checked: #FFFFFF;
  --btn_border: 1px solid #777b38;
  --btn_shadow: 10px 10px 10px 10px rgba(0,0,0,0);

  --fs-base: 16px;
}


html {
  font-size: 62.5%;
}
html,body{
  box-sizing: border-box;
  height: 100%;
  overflow: hidden;
}
p{
  margin: 0 0 1em 0;
}
#page{
  height: 100%;
}




.v_wide{}
.v_wide #main_wrapper{
  padding: var(--wrapper_pd);
  height: 100vh;
  position: relative;
}
.v_wide main{
  width: var(--w_mobile);
  overflow-y: auto;
  overflow-x: hidden;
  height: calc(100vh - var(--wrapper_pd) * 2);
  margin: 0 auto;
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);
  border-radius: 10px 0 0 0;
}
.v_wide .query-box-wrapper{
  height: calc(100vh - var(--wrapper_pd) * 2);
  width: var(--w_mobile);
}
.v_wide .video_wrapper{
  margin: var(--wrapper_pd) 0;
  height: calc(100vh - var(--wrapper_pd) * 2);
  width: var(--w_mobile);
  border-radius: 10px 0 0 0;
}
.v_wide .section-inner {
  padding: 1em;
}
.v_wide .nb,
.v_wide .nb_box,
.v_wide .nb_boxEX {
  width: var(--w_mobile);
  margin-bottom: 1em;
}
.v_wide #myModal{
  height: calc(100vh - var(--wrapper_pd) * 2);
  width: var(--w_mobile);
  margin-top: 1em;
}
.v_wide .nb,
.v_wide .nb_boxEX {
  bottom: 1em;
}




.v_wide .section-inner {
  padding: 1em 1em 12em 1em;
}
.v_wide .toppage .section-inner {
  padding: 1em;
}
.v_wide .cushion .section-inner {
  padding: 1em;
}








.query-box{
  width: 100%;
  height: 100%;
}
.query-box > div{
  height: 100%;
}
.query-box section{
  height: 100%;
}

.page-content, .entry-content, .entry-summary{
  margin: 0;
}
.query-box-wrapper{
  display: none;
  height: 100vh;
  width: 100%;
  position: absolute;
  opacity: 0;
  overflow-y: auto;
  /*
  background-color: var(--cl_001);
  */
  flex-direction: column;
  align-items: center;
}



.animation002 .section-inner,
.animation003 .section-inner{
  background-color: var(--cl_AnimeBG);
  padding: 0;
}
.animation001 .message{
  opacity: 0;
}


.animation002{
  width: 100%;
}
.animation002 h2{
  display: none;
}
.animation002 .section-inner{
  height: 100%;
  width: 100%;
  position: absolute;
  align-items: center;
  display: flex;
  font-size: 1.2rem;
  text-shadow: 0 0 5px rgba(255,255,255,1);
}
.animation002 .section-inner span {
  line-height: 2.4em;
  background: rgba(255, 255, 255, 0.5);
  width: 100%;
  padding: 1em 2em;
}
.animation002 .section-inner div{
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--cl_AnimeBG);
  flex-direction: column;
}
.animation002 .section-inner img{
  width: 60%;
  margin: 1em auto;
  display: block;
}
.animation002 .message001{
  background-image: url("/wp-content/uploads/bg001.jpg");
  background-size: cover;
  background-position: center;
}
.animation002 .message002{
  background-image: url("/wp-content/uploads/bg002.jpg");
  background-size: cover;
  background-position: center;
}
.animation002 .message004{
  text-align: center;
}
.animation002 .message005{
  text-align: center;
}
.animation002 .message003{
  background-image: url("/wp-content/uploads/bg003.jpg");
  background-size: cover;
  background-position: center;
}
.animation002 .message006{
  background-image: url("/wp-content/uploads/3_4.jpg");
  background-size: cover;
  background-position: center;
}
.animation002 .message007{
  background-image: url("/wp-content/uploads/bg007.jpg");
  background-size: cover;
  background-position: center;
}
.animation002 .message008{
  text-align: center;
}




.animation002 .message001{
  z-index: 7;

}
.animation002 .message002{
  z-index: 6;

}
.animation002 .message003{
  z-index: 5;

}
.animation002 .message004{
  z-index: 4;

}
.animation002 .message005{
  z-index: 3;

}
.animation002 .message006{
  z-index: 2;

}
.animation002 .message007{
  z-index: 1;
}



.animation003{
  display: none;
  opacity: 0;
}
.animation003 h2{
  display: none;
}
.animation003 .section-inner{
  height: 100%;
  width: 100%;
  position: absolute;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
.animation003 .section-inner div{
  opacity: 1;
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-color: var(--cl_AnimeBG);
  line-height: 2em;
  font-size: 1.4rem;
  padding: 0 1em;
}
.animation003 .message001{
  z-index: 7;
}
.animation003 .message002{
  z-index: 6;
  background-image: url("/wp-content/uploads/cushion.png");
  background-size: 80%;
  background-position: center;
  background-repeat: no-repeat;
}



h2{
  display: none;
}

.animation001 section{
  width: 100%;
  height: 100%;
}
.animation001 .section-inner{
  display: flex;
  position: relative;
  overflow: hidden;
}
.animation001 div{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.animation001 div:nth-of-type(1){
  z-index: 99999;
  display: flex!important;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  letter-spacing: 0.2rem;
}
.animation001 div:nth-of-type(2){
  z-index: 1;
}











video {
  height: 100%;
  width: auto;
  position: absolute;
  top: 0;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.video_wrapper{
  display: block;
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 0;
}
.toppage{
  font-size: 1.2rem;
}
.toppage div,
.toppage section{
  height: 100%;
}
.toppage .section-inner {
  padding: 1em;
}
.toppage .query-wrapper{
  position: relative;
}
.toppage .query-wrapper > div{
  position: absolute;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.toppage .query-wrapper > div:first-child {
  z-index: 1;
}
.toppage .query-wrapper > div:first-child > p {
  padding: 0 1em;
}
.toppage .query-wrapper > div:first-child > p:first-child {
  text-align: center;
}
.toppage .query-wrapper > div:first-child > p:nth-of-type(1),
.toppage .query-wrapper > div:first-child > p:nth-of-type(2),
.toppage .query-wrapper > div:first-child > p:nth-of-type(6),
.toppage .query-wrapper > div:first-child > p:nth-of-type(7) {
  text-align: center;
}

.toppage .start input {
  cursor: pointer;
  display: inline-block;
  background-color: var(--btn_bg_wh);
  border: var(--query_btn_border);
  border-radius: 100px;
  padding: 1em 4em;
}
.toppage .query-wrapper > div:first-child > p:nth-of-type(7) {
  margin: 0;
}
.toppage img.photo {
  width: 50%;
  height: auto;
  border-radius: 300px;
}
.toppage img.logo {
  width: 40%;
  height: auto;
  margin-top: 2em;
}
.section-inner{
  position: relative;
  z-index: 1;
  padding: 1em 1em 12em 1em;
}
.query-wrapper{
  padding: 1em;
}
.query-wrapper h3{
  font-weight: normal;
  text-align: center;
  font-size: 1.4rem;
}
.query-wrapper span{
  display: block;
}
.query-wrapper span > img {
  display: block;
  width: 50%;
  margin: 2em auto;
}



.q001{}
.q001 .query-wrapper h3{
  margin-bottom: 0;
}
.q001 .query-wrapper span{
  font-size: 1rem;
}
.q001 .query-wrapper span:nth-of-type(1){
  text-align: center;
}
.q001 .query-wrapper input{
  margin-top: 2em;
  width: 100%;
  padding: 0.5em;
  border-radius: 5px;
  border: 1px solid #999;
}
.q002 .query-wrapper .labelbox label:nth-of-type(1){
  margin-left: 1em;
  margin-right: 1em;
}
.q005 .query-wrapper span{
  text-align: center;
}
.q007 .query-wrapper span{
  text-align: center;
}
.q008 .query-wrapper span{
  text-align: center;
}


.cushion .query-box {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.cushion .query-wrapper p > img{
  display: block;
  width: 50%;
  margin: 2em auto;
}
.cushion .query-wrapper p > span{
  display: inline-block;
}
.cushion p {
  text-align: center;
  font-size: 1.6rem;
}
.cushion p:last-child {
  font-size: 1.4rem;
}
.q014 label span{
  display: block;
}
.q014 label {
  display: flex;
  flex-direction: column;
  height: 16rem;
  font-size: 0.9rem;
  justify-content: center;
}
.q014 label:last-child{
  height: 6em;
}
.q014 label img {
  width: 60%;
  margin: 0 auto 1em auto;
}
.q008 label {
  width: 100%;
}
.q012 label {
  width: 100%;
}
.q019 label {
  width: 100%;
}
.q021 label {
  width: 100%;
  font-size: 1.1rem;
}
#theSubmit{
  transition : all 0.5s ease 0s;
}
#theSubmit.postOn{
  background: var(--btn_bg_checked);
  color: #FFF;
}




.nb{
  display: block;
  padding: 5em 1em 2em 1em;
  text-align: center;
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 9;
  background-image: linear-gradient(0deg, #ecebf0 70%, transparent);
  max-width: 100%;
}
#checkButton {
  transition : all 0.5s ease 0s;
  position: relative;
  display: block;
  border: var(--btn_border);
  border-radius: 100px;
  padding: 1em;
  font-style: normal;
  display: flex ;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
}
.btn_nextEX::after,
.btn_next::after,
#checkButton::after{
  font-family: 'Material Symbols Outlined';
  content: "\e5e1";
  font-size: 24px;
  position: absolute;
  right: 0.5rem;
  font-variation-settings:
  'FILL' 1,
  'wght' 100,
  'GRAD' -25,
  'opsz' 24;
}



#checkButton.pointer {
  background: var(--btn_bg_checked);
  color: var(--btn_tex_checked);
  border: var(--btn_border);
}

.nb_box,
.nb_boxEX {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1em;
  padding: 1em 1em 2em 1em;
  position: fixed;
  width: 100%;
  bottom: 0;
  background-image: linear-gradient(0deg, #ecebf0 70%, transparent);
  z-index: 9;
  max-width: 100%;
}

.nb_box .btn_back,
.nb_boxEX .btn_back {
  display: flex;
  background-color: var(--btn_bg_checked);
  color: var(--btn_tex_checked);
  border-radius: 100px;
  position: relative;
  text-align: center;
  align-content: center;
  padding: 1.2em;
  justify-content: center;
  align-items: center;
  height: 5rem;
  width: 5rem;
}

.nb_box .btn_back::before,
.nb_boxEX .btn_back::before {
  font-family: 'Material Symbols Outlined';
  content: "\e5e0";
  font-size: 2.4rem;
  position: absolute;
  font-variation-settings: 'FILL' 1, 'wght' 100, 'GRAD' -25, 'opsz' 24;
  display: inline-block;
  left: 0.7em;
}
.nb_box .btn_next,
.nb_boxEX .btn_nextEX {
  transition : all 0.5s ease 0s;
  display: flex;
  margin-left: 0.5em;
  border-radius: 100px;
  padding: 1em;
  align-items: center;
  justify-content: center;
  position: relative;
  width: calc(100% - 5em);
  border: var(--btn_border);
  color: var(--btn_tex_checked);
  background: var(--btn_bg_checked);
  font-size: 1.6rem;
  height: 5rem;
}
.nb_box .btn_next.disabled,
.nb_boxEX .btn_nextEX.disabled {
  border: var(--btn_border);
  color: var(--btn_tex);
  background: var(--btn_bg);
}
.nb_box .btn_next i,
.nb_boxEX .btn_nextEX i {
  display: inline-block;
  align-items: center;
  transform: scaleY(2);
  position: absolute;
  right: 1em;
  top: 0;
  margin-top: 1em;
  margin-left: 0.8em;
  font-style: normal;
}

input[type="radio"]{
  display: none;
}
input[type="checkbox"]{
  display: none;
}
.labelbox{
  display: flex;
  align-items: center;
  width: 100%;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
}
label {
  transition: all 0.2s ease 0s;
  background: var(--btn_bg_wh);
  border-radius: 5px;
  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2);
  width: calc(50% - 1em);
  margin: 0.5em;
  font-size: 1.2rem;
  height: 4em;
  display: flex;
  justify-content: center;
  align-items: center;
}
label:has(input:checked) {
  background-color: var(--cl_63);
  color: var(--cl_wht);
}




#theSubmit{
  width: 100%;
  border: 1px solid #ccc;
  background: #FFF;
  border-radius: 100px;
  padding: 1em;
  margin-top: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
}
#theSubmit::before{
  font-family: 'Material Symbols Outlined';
  content: "\e037";
  font-size: 34px;
  font-variation-settings: 'FILL' 1, 'wght' 100, 'GRAD' -25, 'opsz' 24;
  line-height: 0;
}

.nowBar_box{
  padding: 0.2em 0;
}
.nowBar_inner{
  display: flex;
  background-color: #FFF;
  width: 99.75%;
}
.nowBar_box p{
  text-align: right;
  font-size: 10px;
  margin: 0;
  padding: 0;
  line-height: 1em;
}
.nowBar_inner span{
  display: block;
  height: 0.3em;
  background-color: orange;
}



.q021 .nb_box .btn_next {
  display: none!important;
}





.animation001,
.animation002,
.animation003,
.toppage,
.cushion{
}
.q001,
.q002,
.q003,
.q004,
.q005,
.q006,
.q007,
.q008,
.q009,
.q010,
.q011,
.q012,
.q013,
.q014,
.q015,
.q016,
.q017,
.q018,
.q019,
.q020,
.q021{
  /*
  display: none;
  */
}


/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.nb_boxEX{
  display: none;
}
.animation001 .nb_box,
.animation002 .nb_box,
.animation003 .nb_box,
.animation003 .nb_boxEX,
.toppage .nb_box,
.q001 .nb_box,
.q002 .nb_box{
  display: none!important;
}
.q002 .nb_boxEX{
  display: flex;
}


