/*PC*/

/*グローバル変数みたいなの*/
a{
    text-decoration: none;
}
.fle{
    display: flex;
    justify-content: center;
}
.fleC{
    display: flex;
    justify-content: center;
    flex-direction: column;
}
textarea {
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-size:16px;
}
.hide{
    display: none !important;
}
#test-choice-area{
    background-color: #d2e7ff;
    border-radius: 10px;
    padding: 10px;
}
.seikaisuu{
    text-align: center;
    font-size: 2rem;
    font-weight: bold;

}
.chooseQ{
    text-align: center;
    font-weight: bold;
    font-size: 1.2rem;
}
.btn--orange,
a.btn--orange {
  color: #fff;
  background-color: #6BBBFF;
}
.btn--orange:hover,
a.btn--orange:hover {
  color: #fff;
  background: #6BBBFF;
}
a.btn--orange:focus-within{
    border:#000 solid 1px;
    background-color: #77dfff;
}

.subject_buttons{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.subject_buttons > .btn--orange{
    padding: 1rem !important;
    margin: 0.5rem 0 !important;
    width: 5rem !important;
    font-size: 1.5rem;
}
.answer_choose{
    font-size: 1.2rem;
    text-align: center;
}
.test-choice{
    font-size: 1.1rem;
    margin-left: 10vw;
    margin-bottom: 1.5rem;
    text-decoration:underline;
}
.test-title{
    font-size: larger;
    text-align: center;
}
.inverse{
    filter: invert(100%);
    background-color: #000;
}
.truer{
    background-color: #c2f5d5 !important;
    border-color: #23c483 !important;
}
.falser{
    background-color: #f5d2d2 !important;
    border-color: #ff3b3b !important;
}
.switchfalser{
    background-color: #f5efe7 !important;
    border-color: #f7b087 !important;
}
.hidegenre{
    display: none;
}
@supports (-webkit-appearance: none) or (-moz-appearance: none) {
  .checkbox-wrapper-13 input[type=checkbox] {
    --active: #275EFE;
    --active-inner: #fff;
    --focus: 2px rgba(39, 94, 254, .3);
    --border: #BBC1E1;
    --border-hover: #275EFE;
    --background: #fff;
    --disabled: #F6F8FF;
    --disabled-inner: #E1E6F9;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 21px;
    outline: none;
    display: inline-block;
    vertical-align: top;
    position: relative;
    margin: 0;
    cursor: pointer;
    border: 1px solid var(--bc, var(--border));
    background: var(--b, var(--background));
    transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
  }
  .checkbox-wrapper-13 input[type=checkbox]:after {
    content: "";
    display: block;
    left: 0;
    top: 0;
    position: absolute;
    transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
  }
  .checkbox-wrapper-13 input[type=checkbox]:checked {
    --b: var(--active);
    --bc: var(--active);
    --d-o: .3s;
    --d-t: .6s;
    --d-t-e: cubic-bezier(.2, .85, .32, 1.2);
  }
  .checkbox-wrapper-13 input[type=checkbox]:disabled {
    --b: var(--disabled);
    cursor: not-allowed;
    opacity: 0.9;
  }
  .checkbox-wrapper-13 input[type=checkbox]:disabled:checked {
    --b: var(--disabled-inner);
    --bc: var(--border);
  }
  .checkbox-wrapper-13 input[type=checkbox]:disabled + label {
    cursor: not-allowed;
  }
  .checkbox-wrapper-13 input[type=checkbox]:hover:not(:checked):not(:disabled) {
    --bc: var(--border-hover);
  }
  .checkbox-wrapper-13 input[type=checkbox]:focus {
    box-shadow: 0 0 0 var(--focus);
  }
  .checkbox-wrapper-13 input[type=checkbox]:not(.switch) {
    width: 21px;
  }
  .checkbox-wrapper-13 input[type=checkbox]:not(.switch):after {
    opacity: var(--o, 0);
  }
  .checkbox-wrapper-13 input[type=checkbox]:not(.switch):checked {
    --o: 1;
  }
  .checkbox-wrapper-13 input[type=checkbox] + label {
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    margin-left: 4px;
  }

  .checkbox-wrapper-13 input[type=checkbox]:not(.switch) {
    border-radius: 7px;
  }
  .checkbox-wrapper-13 input[type=checkbox]:not(.switch):after {
    width: 5px;
    height: 9px;
    border: 2px solid var(--active-inner);
    border-top: 0;
    border-left: 0;
    left: 7px;
    top: 4px;
    transform: rotate(var(--r, 20deg));
  }
  .checkbox-wrapper-13 input[type=checkbox]:not(.switch):checked {
    --r: 43deg;
  }
}

.checkbox-wrapper-13 * {
  box-sizing: inherit;
}
.checkbox-wrapper-13 *:before,
.checkbox-wrapper-13 *:after {
  box-sizing: inherit;
}

/*汎用ボタン*/
/* From uiverse.io by @adamgiebl */
.panButton {
    width:80%;
    position: relative;
    padding: 15px 10px;
    margin: 10px auto;
    float: left;
    border-radius: 3px;
    font-size: 20px;
    color: #000;
    text-decoration: none;
    background-color: #c2e9fb;
    border: none;
    border-bottom: 5px solid #a1c4fd;
    text-shadow: 0px -2px #a1c4fd;
    /* -webkit-transition: all 0.1s; */
    /* transition: all 0.1s; */
}   
.panButton3 {
    width:100%;
    position: relative;
    padding: 15px 10px;
    margin: 10px auto;
    float: left;
    border-radius: 3px;
    color: #000000;
    text-decoration: none;
    background-color: rgb(195, 238, 255);
    border: 3px solid #47beec;
    font-size: 1em;

}   

.panButton4 {
    width:30%;
    position: relative;
    padding: 15px 10px;
    margin: 10px auto;
    float: left;
    border-radius: 3px;
    color: #000000;
    text-decoration: none;
    background-color: rgb(211, 240, 252);
    border: 3px solid #93daf7;
    font-size: 1.2em;

}   
.questionselect{
    width:60% !important;
    background-color: #D7FFFE;
    margin: 30px auto;

}
/* From uiverse.io */
.panButton2 {
    padding: 1.3em 3em;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    font-weight: 500;
    color: #000;
    background-color: #fff;
    border: none;
    border-radius: 45px;
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease 0s;
    cursor: pointer;
    outline: none;
  }
  
  .panButton2:hover {
    background-color: #23c483;
    box-shadow: 0px 15px 20px rgba(46, 229, 157, 0.4);
    color: #fff;
    transform: translateY(-7px);
  }
  
  .panButton2:active {
    transform: translateY(-1px);
  }


/*タイトル*/
.title{
    margin: 0 auto;
    display: flex;
    justify-content: center;
    width:100%;
    font-family: 'Play', sans-serif;
    font-size: 60px;

}
.imager{
    margin: 0 auto;
    width:100%;
}
/*ログイン*/
.firebaseui-idp-button{
    width:100vw;
    height:200px;    
    margin: 50px calc(50% - 50vw);
    border-radius: 20px;
}
.firebaseui-idp-text{
    font-size: 35px;    
}
/*マイボード*/

.welcome{
    background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
    padding: 1% 2%;
    margin: 0 auto;
    margin-top: 2%;
    box-sizing: border-box;
    width:80%;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 20px;
}
.welcome2{
    background-image: linear-gradient(to bottom, #e6e9f0 0%, #eef1f5 100%);
    padding: 1% 2%;
    margin: 0 auto;
    margin-top: 2%;
    box-sizing: border-box;
    width:80%;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 20px;
}
.welcome3{
    background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    padding: 1% 2%;
    margin: 0 auto;
    margin-top: 2%;
    box-sizing: border-box;
    width:80%;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 20px;
}
.answerPanel{
    background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
    padding: 1% 2%;
    margin: 0 auto;
    margin-top: 2%;
    box-sizing: border-box;
    width:70%;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 20px;
}
.answerEachPanel{
    box-sizing: border-box;
    background-color: #def2f8;
    padding: 1vw 3vw;
    margin-bottom: 2rem;
}
.aquaborder{
    border-color: aqua !important;
}

.prmptpanel{
    padding: 1vw 3vw;
    background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
    padding: 1% 2%;
    margin: 0 auto;
    margin-top: 2%;
    box-sizing: border-box;
    width:70%;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 20px;
}
.promptEachPanel{
    box-sizing: border-box;
    background-color: #f2e2ff;
    padding: 1vw 3vw;

}
.prmptborder{
    border-color: rgb(220, 42, 255) !important;
}
.cp_iptxt {
	position: relative;
	width: 100%;    
	margin: 10px 0;
    font-size: inherit;
}
.cp_iptxt input[type='text'] {
	font: 18px/24px sans-serif;
	box-sizing: border-box;
	width: 100%;
	padding: 0.3em 0.5em;
	transition: 0.3s;
	letter-spacing: 1px;
	color: #000;
	border: 1px double #1b2538;
	border-radius: 4px;
}
.ef input[type='text']:focus {
	border: 1px solid rgb(202, 58, 58);
	outline: none;
	box-shadow: 0 0 5px 1px rgba(218,60,65, .5);
}


.records{
    font-family: 'Audiowide', cursive;
    font-size: 30px;
    text-align: center;
}

.japti{
    font-family: 'Hachi Maru Pop', cursive;
    text-align: center;
}
.realdetail{
    margin-left: 20px;
}

/* From uiverse.io by @nikk7007 */
.sign {
    padding: 0.8em 1.8em;
    border: 2px solid #17C3B2;
    position: relative;
    overflow: hidden;
    background-color: transparent;
    text-align: center;
    text-transform: uppercase;
    font-size: 16px;
    transition: .3s;
    z-index: 1;    
    font-family: 'Goldman', cursive;    
    color: #17C3B2;
    margin: 0 auto;
   }   
   .sign::before {
    content: '';
    width: 0;
    height: 300%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    background: #17C3B2;
    transition: .5s ease;
    display: block;
    z-index: -1;
   }   
   .sign:hover::before {
    width: 105%;
   }   
   .sign:hover {
    color: #111;
   }

/*スコアボード*/
.scoreWrapper{
    width:80%;
    margin: 1% auto;
    background-image: linear-gradient(60deg, #96deda 0%, #50c9c3 100%);
    padding: 1% 2%; 
    box-sizing: border-box;
    border-radius: 10px;    
}
.scoreboard{        
    display:flex;
    justify-content:space-around;
}
.NumberBoard,.PreciseBoard{
    margin: 1%;
    padding: 2%;
    border-radius: 10px;
    border-width: 2px;
    border-color: #fff;
    background-image: linear-gradient(-225deg, #3D4E81 0%, #5753C9 48%, #6E7FF3 100%);
    color: #FFF;
}

/*問題選択*/
.searchLink{
    color:white;
    line-height:250%;
    font-size:20px;
}
.under {
position: relative;
display: inline-block;
text-decoration: none;
}
.under::after {
position: absolute;
bottom: -4px;
left: 0;
content: '';
width: 100%;
height: 2px;
background: #333;
transform: scale(0, 1);
transform-origin: left top;
transition: transform .3s;
}
.under:hover::after {
transform: scale(1, 1);
}
.gosupport{
    top:0.8vw !important;
}

.container{    
    display: flex;
    flex-direction: column ;    	
    background-image: linear-gradient(120deg, #f5f7fa 0%, #dae4f5 100%);
	box-sizing:border-box;
    padding:1% 3%;
	border-radius:15px;
    width: 80%;
    margin: 2% auto;
}
.subtitle{
    color:#FFF;
	font-size:36px;
    text-align: center;
}

.subsub{
    text-align: center;
}
.subsub p{
    color:#FFF;
	font-size:24px;    
}
#inputbox1st,#inputbox2nd{
    margin: 1% 0;
    padding:1% 1%;
    font-size: 110%;    
}
#inputboxParent{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#sbj{
    margin: 1% 0%;
    padding:1% 1%;
    font-size: 110%;    
}
#plzname{
    width:98%;
}
#Go{
    margin: 2%;
    padding:1% 2%;
    font-size: 110%;
}
/* From uiverse.io */
button {
position: relative;
display: inline-block;
cursor: pointer;
outline: none;
border: 0;
vertical-align: middle;
text-decoration: none;
background: transparent;
padding: 0;
font-size: inherit;
font-family: inherit;
}
button.learn-more {
width: 12rem;
height: auto;
}
button.learn-more .circle {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
position: relative;
display: block;
margin: 0;
width: 3rem;
height: 3rem;
background: #282936;
border-radius: 1.625rem;
}
button.learn-more .circle .icon {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
position: absolute;
top: 0;
bottom: 0;
margin: auto;
background: #fff;
}
button.learn-more .circle .icon.arrow {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
left: 0.625rem;
width: 1.125rem;
height: 0.125rem;
background: none;
}
button.learn-more .circle .icon.arrow::before {
position: absolute;
content: "";
top: -0.29rem;
right: 0.0625rem;
width: 0.625rem;
height: 0.625rem;
border-top: 0.125rem solid #fff;
border-right: 0.125rem solid #fff;
transform: rotate(45deg);
}
button.learn-more .button-text {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 0.75rem 0;
margin: 0 0 0 1.85rem;
color: #282936;
font-weight: 700;
line-height: 1.6;
text-align: center;
text-transform: uppercase;
}
.learn-more:hover .circle {
width: 100%;
}
.learn-more:hover .circle .icon.arrow {
background: #fff;
transform: translate(1rem, 0);
}
.learn-more:hover .button-text {
color: #fff;
}
/*まずはお決まりのボックスサイズ算出をborer-boxに */

.btn,
a.btn,
button.btn {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
}
.btn-flat,
a.btn-flat,
button.btn-flat {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
  border-color: #FFF;
}
a.btn-flat {
    overflow: hidden;
    padding: 1.5rem 6rem;
    color: #fff;
    border-radius: 0;
    background: #000;
    width: 20%;
    border-radius: 10px;
    margin: 1rem auto;
}

a.btn-flat span {
position: relative;
}

a.btn-flat:before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: '';
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
-webkit-transform: translateX(-96%);
transform: translateX(-96%);
background:#9354ff;
}
a.btn-flat2:before {
    background:#0077ff !important;
    }
    

a.btn-flat:hover:before {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}

/* From uiverse.io by @ercnersoy */
.input {
    border: none;
    padding: 1rem;
    border-radius: 1rem;
    background: #e8e8e8;
    box-shadow: 20px 20px 60px #c5c5c5,
           -20px -20px 60px #ffffff;
    transition: 0.3s;
    margin:2% 0;
    border: 0.1px solid black;
   }
   
   .input:focus {
    outline-color: #e8e8e8;
    background: #e8e8e8;
    box-shadow: inset 20px 20px 60px #c5c5c5,
           inset -20px -20px 60px #ffffff;
    transition: 0.3s;
   }

/*upフォーム*/
.uploader{
    width: 80%;
    margin: 0 auto;
    padding:1% 3%;
    box-sizing: border-box;
    border-radius: 10px;
    background-image: linear-gradient(to top, #d5d4d0 0%, #d5d4d0 1%, #eeeeec 31%, #efeeec 75%, #e9e9e7 100%);
}

.com{
    text-align: center;
    width: 80%;
    margin: 0 auto;
}
/* From uiverse.io by @Voxybuns */
.push {
    /* Variables */
   --button_radius: 0.75em;
   --button_color: #e8e8e8;
   --button_outline_color: #000000;
   font-size: 17px;
   font-weight: bold;
   margin:15px 10px;
   border: none;
   border-radius: var(--button_radius);
   background: var(--button_outline_color);
  }
  
  .button_top {
   display: block;
   box-sizing: border-box;
   border: 2px solid var(--button_outline_color);
   border-radius: var(--button_radius);
   padding: 0.75em 1.5em;
   background: var(--button_color);
   color: var(--button_outline_color);
   transform: translateY(-0.2em);
   transition: transform 0.1s ease;
  }
  
  .push:hover .button_top {
    /* Pull the button upwards when hovered */
   transform: translateY(-0.33em);
  }
  
  .push:active .button_top {
    /* Push the button downwards when pressed */
   transform: translateY(0);
  }

#addon{
    display:flex;
    flex-direction:column;
}

/* From uiverse.io by @alexruix */
.input2 {
    width:40%;
    line-height: 28px;
    border: 2px solid transparent;
    border-bottom-color: #777;
    padding: .2rem 0;
    outline: none;
    background-color: transparent;
    color: #0d0c22;
    transition: .3s cubic-bezier(0.645, 0.045, 0.355, 1);
   }
   
   .input2:focus, .input2:hover {
    outline: none;
    padding: .2rem 1rem;
    border-radius: 1rem;
    border-color: #7a9cc6;
   }
   
   .input2::placeholder {
    color: #777;
   }
   
   .input2:focus::placeholder {
    opacity: 0;
    transition: opacity .3s;
   }
/*コメ欄*/
#HCB_comment_box{
    background-image: linear-gradient(-20deg, #2b5876 0%, #4e4376 100%) !important;
    color: white !important;
    padding: 2% 5%;
    width: 80%;
    margin: 0 auto;
    box-sizing: border-box;
    border-radius: 10px;
}

/*question.html*/
.headers{
    width:80%;   
    margin:0 auto;
 }
.pictureWrap{
    margin: 0;
    background-image: linear-gradient(-225deg, #5D9FFF 0%, #B8DCFF 48%, #6BBBFF 100%);
    display: flex;
    justify-content: center;
    padding:5%;
    border-radius:10px;

    padding:2% 5% 0 5%;   
    width:80%;
    margin:0 auto;
}
.pictureSemiWrap{
    display: flex;
    flex-direction: column;
}
.pictureArrow{
    display: flex;
    justify-content:center;
}
.marginer{
    padding:2% 10%;
    margin:1% 10%;
}
.picture{
    max-height: 50vh;
    max-width: 90vw;
    border-radius:20px;
}
.question{
    padding: 1% 5%;    
    font-size: 100%;
    background-image: linear-gradient(-135deg, #FFFEFF 0%, #D7FFFE 100%);
    width:90%;
    margin:2% auto;
    box-sizing:border-box;
    border-radius:10px;
}
.answer{
    background-image: linear-gradient(to top, #1e3c72 0%, #1e3c72 1%, #2a5298 100%);
    color:antiquewhite;
     margin: 0 auto;
     width: 70%;
     height: 20%;
     overflow-x: scroll;
    
     display: flex;
     justify-content: space-around;
     align-items:center;
     flex-wrap: wrap;
     
     position: fixed;
     bottom: 0;
     left: 15%;
 }
 .answer p input{
     width: 100%;
     padding:2vh 0;
     font-size: 100%;
     text-align: center; 
 }
 .answer p select{
     width: 100%;    
     padding:2vh 0;
     font-size: 100%;
     text-align: center;
 }
 .answer>input{
     width: 100%;    
     padding:2vh 0;
     font-size: 100%;
     text-align: center;
    background: linear-gradient(to bottom, #D5DEE7 0%, #E8EBF2 50%, #E2E7ED 100%), linear-gradient(to bottom, rgba(0,0,0,0.02) 50%, rgba(255,255,255,0.02) 61%, rgba(0,0,0,0.02) 73%), linear-gradient(33deg, rgba(255,255,255,0.20) 0%, rgba(0,0,0,0.20) 100%);
  background-blend-mode: normal,color-burn;
     border-width: 1px;
 }
 .answer>input:hover{
    background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
 }
 .remarker{
    width:100%;
   padding:2% 4%;
   background-color: #CDDCDC;
 background-image: radial-gradient(at 50% 100%, rgba(255,255,255,0.50) 0%, rgba(0,0,0,0.50) 100%), linear-gradient(to bottom, rgba(255,255,255,0.25) 0%, rgba(0,0,0,0.25) 100%);
 background-blend-mode: screen, overlay;
   color:black;
 }

.footer{
    height: 30vh;
    background-color:#fff;
}

.yesmartlogin{
    transform:scale(1.5,1.5);   
    display: flex;
    justify-content: center;
    width: 100vw !important;
}
.firebaseui-container{
    margin: 0;
}
/*スマホ縦*/
@media screen and ( max-width:479px ) {

    .welcome{
        width: 100%;
    }
    .welcome2{
        width: 100%;
    }
    .welcome3{
        width: 100%;
    }
    .answerPanel{
        width: 100%;
    }
    .answer{
        height: 15%;
        width: 100%;
        left: 0%;
        top: 0;
    }    
    .picture{
        max-height: 90vh;
        max-width: 90vw;
    }
    .scoreboard{
        display: block;
    }
    .scoreWrapper{
        width: 100%;
    }
    .container{
        width: 100%;
    }
    #sbj{
        margin:1% 0%;
    }
    #plzname{
        width:95%;
    }
    .uploader{
        width: 100%;
    }
    .question{
        width: 100%;
    }
    #HCB_comment_box{
        width: 100%;
    }
    .headers{
        padding:10% 0 0 0;
        width: 100%;
    }
    .footer{
        height: 0;
    }
}
/* スマホよこ
@media screen and ( max-height:479px ){
    .answer{
        height: 15%;        
    }        
}*/