@charset "utf8";

:root {
  --base-content: '';
  --display-size: 28px;
}

.quiz_area {
  position: relative;
  max-width:973px;
max-width:973px;
min-width:330px;
color:black;
z-index:99;
  /*  animation: bg2 4.5s ease 0s 1 alternate none running; */
  }

.quiz_set {
background-color:rgba(0,0,0,0);
color:black;
z-index:99;
}

.quiz_area .quiz_area_icon.true:before {
  content: '〇';
  color: blue;
  display:block;
  position:absolute;
  font-weight:bold;
  margin: 0; /*margin:0を入れる*/
  padding: 0; /*左右のpaddingを0にする*/
  -webkit-text-stroke: 1px #fff;
  -webkit-min-device-pixel-ratio:0;
  animation: answer 1.2s ease-in-out 0s 1 alternate forwards running;
}
.quiz_area .quiz_area_icon.true:after {
  content: 'O 〇 o O';
  color: blue;
  display:block;
  position:absolute;
  font-weight:bold;
  margin: 0; /*margin:0を入れる*/
  padding: 0; /*左右のpaddingを0にする*/
  -webkit-text-stroke: 1px #fff;
  -webkit-min-device-pixel-ratio:0;
  animation: bubble 0.1s ease-in-out 0s 1 alternate forwards running;
}

.quiz_area .quiz_area_icon.false:after {
  content: '×';
  position:fixed;
  color: red;
  /* bring your own prefixes */
  font-weight:bold;
  margin: 0; /*margin:0を入れる*/
  padding: 0; /*左右のpaddingを0にする*/
  -webkit-min-device-pixel-ratio:0;
  animation: answer2 1.2s ease-in-out 0s 1 alternate forwards running;
}

@keyframes bubble {
  0% {
opacity:0;
font-size:0px;
position: fixed;
top: 15px;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
-webkit-transform: translateY(-50%) translateX(-50%);
  }
100% {
  opacity:0;
  font-size:40px;
  position: fixed;
  top: 15px;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
    }
  }
@keyframes answer {
  0% {
opacity:0;
font-size:0px;
position: fixed;
top: 15px;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
-webkit-transform: translateY(-50%) translateX(-50%);
  }
  25% {
  opacity:1;
  font-size:150px;
  position: fixed;
top: 15px;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
  }
  60% {
  opacity:1;
  font-size:150px;
  position: fixed;
top: 15px;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
  }

  100% {
  opacity:0;
  font-size:150px;
  position: fixed;
top: -5px;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
  }
}

@keyframes answer2 {

  0% {
opacity:0;
font-size:0px;
position: fixed;
top: 15px;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
-webkit-transform: translateY(-50%) translateX(-50%);
  }
  25% {
  opacity:1;
  font-size:100px;
  position: fixed;
top: 15px;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
  }
  60% {
  opacity:1;
  font-size:100px;
  position: fixed;
top: 15px;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
  }

  100% {
  opacity:0;
  font-size:100px;
  position: fixed;
top: 35px;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
  }
}

.quiz_area .quiz_area_icon.false:before {
  content: '正解＝';
  font-size: 24px;
}

.quiz_area .quiz_no {
  font-weight: bold;
}

.quiz_question{
font-size:20px;
min-height:35px;
line-height:35px;
font-family:sans-serif;
background:#fff;
border:solid 10px #FF3BB8;
font-weight:bold;
color:#111;
box-shadow: 0px 0px 0px 1px #333 inset;
}


.quiz_area .quiz_result {
  box-sizing: border-box;
  padding: 10px;
  background:linear-gradient(to bottom,#ebFFFE,#edFeFF);
  border-radius: 0 0 5px 5px;
  display: none;
  text-align: center;
  color:#111;
}

.quiz_area .quiz_ans_area ul {
  padding: 0;
}

.quiz_area .quiz_ans_area ul::after {
  content: '';
  display: block;
  clear: both;
  color:white;
}

.quiz_area .quiz_ans_area ul li {
  box-sizing: border-box;
  list-style: none;
  float: left;
  width: 100%;
  padding: 10px 10px;
  border: solid 2px #aaa;
  border-radius:30px;
  margin-bottom:10px;
  color:#333;
  font-family:sans-serif;
  background: #40B400;
  cursor: pointer;
}
.quiz_test {
  box-sizing: border-box;
  list-style: none;
  float: center;
  width: 95%;
  padding: 5px 5px;
  border: solid 2px #777;
  border-radius:5px;
  margin-bottom:10px;
  color:#fff;
  font-weight:bold;
  font-family:sans-serif;
  background:#40B400;
  cursor: pointer;
}
.quiz_area .quiz_ans_area ul li.selected {
  background-color: #bcbcbc;
}

.quiz_area .quiz_area_bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  left: 0;
  z-index: 999;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  color: #fff;
  text-align: center;
  font-size:30px;
  border-bottom-left-radius:10px;
  border-bottom-right-radius:10px;
}

.quiz_area .quiz_area_icon {
  content:'';
  position: absolute;
  box-sizing: border-box;
  margin: 0;
  width:100%;
  z-index: 9999;
  color: blue;
  display: none;
  font-size: 24px;
  font-weight: bold;
  -webkit-text-stroke: 1px #fff;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
  /* text-stroke: 2px #fff; */
}

.quiz_area_icon,
.quiz_area .quiz_area_icon.true,
.quiz_area .quiz_area_icon.false {
  display: block;
}

.back1{
  display:block;
  font-size:16px;
  padding-top:10px;
  background:linear-gradient(#feffdb,#efffea);
  color:#111;
  border-radius:0px 0px 15px 15px;
}
.back2{
  font-size:16px;
  background:linear-gradient(#f09819,#ff5858);
  color:white;
  border-radius:10px;
}
.back3{
font-size:16px;
background:linear-gradient(to bottom,#ebFFFE 15%,#FeFeFF 89%,#55cc77 94%,#33aa33 98%);
padding-top:5px;
border-radius:0px 0px 5px 5px;
}

.word1{
  color:#ffccff;
  font-size:22px;
  text-shadow: 1px 1px 1px #333,-1px 1px 1px #333,1px -1px 1px #333,-1px -1px 1px #333;
}
.word2{
  color:#ffffff;
  font-size:22px;
  font-weight:400;
  text-shadow: 1px 1px 1px #333,-1px 1px 1px #333,1px -1px 1px #333,-1px -1px 1px #333;
}

.btn2{
  margin:10 0 0 0 ;
  padding:10;
  color:white;
  font-weight:bold;
  font-family:sans-serif;
  cursor:pointer;
  font-size:16px;
  border-radius:5px;
  border-color:#006633;
  z-index:99;
  background:#40B400;
}
.btn2:hover{
  background:RGB(86,200,20);
  color:white;
}

.btn3{
  margin:10 0 0 0 ;
  padding:10;
  color:white;
  cursor:pointer;
  font-size:16px;
  border-color:white;
  border-width:4px;
  border-style:ridge;
  background:linear-gradient(#006600,#003300);
}

.btn4{
  margin:10 0 0 0 ;
  padding:5;
  font-weight:900;
  color:#006600;
  cursor:pointer;
  font-family:sans-serif;
  font-size:14px;
  border-radius:5px;
  border-width:2px;
  border-color:#006600;
  z-index:99;
  background:#CCFFBA;
}

#pagetop{
position: fixed;
right: 15%;
bottom: 10%;
opacity: 0;
-ms-filter: "alpha( opacity=0 )";
filter:alpha(opacity:0);
zoom:1;
z-index:98;
}
#pagetop a{
display: block;
padding: 10px 10px;
color:white;
border-radius:15px;
border-color:white;
background:linear-gradient(#006600,#003300);
margin:10 0 0 0 ;
cursor: pointer;
}
.login {
  text-align:center;
}

@media screen and (max-width: 960px) {
  .maintable{
width: 100%;
border-collapse:separate;
border-spacing: 0;
box-sizing: border-box;
  }
}
@media screen and (min-width: 960px) {
  .maintable{
width: 973px;
border-collapse:separate;
border-spacing: 0;
box-sizing: border-box;
  }
}

.maintable th:first-child{
  border-radius: 1px 0 0 0;
  box-sizing: border-box;
}

.maintable th:last-child{
  border-radius: 0px 1px 0 0;
  border-right: 1px solid #3c6690;
  box-sizing: border-box;
}

.maintable th{
  text-align: center;
  color:white;
  border-radius:15px 15px 0 0;
  background:linear-gradient(45deg, #009933 0%, #006633 100%);
}

.maintable td{
  text-align: left;
  vertical-align:top;
  border-left: 1px solid #a8b7c5;
  border-bottom: 1px solid #a8b7c5;
  border-top:none;
  box-shadow: 0px -3px 5px 1px #eee inset;
  width: auto;
  padding: 10px 0;
  box-sizing: border-box;
}

.maintable td:last-child{
  border-right: 1px solid #a8b7c5;
  box-sizing: border-box;
}

.maintable tr:last-child td:first-child {
  border-radius: 0 0 0 5px;
  box-sizing: border-box;
}

.maintable tr:last-child td:last-child {
  border-radius: 0 0 5px 0;
  box-sizing: border-box;
}
.table td{
  text-align: left;
  font-size:18px;
  border-left: 1px solid #3c6690;
  border-right: 1px solid #3c6690;
  border-top: 1px solid #3c6690;
  border-bottom: 1px solid #3c6690;
  box-shadow: 0px 1px 1px rgba(255,255,255,0.3) inset;
  box-sizing: border-box;
}

.note {
position: relative;
left:0;
max-width:973px;
background-color: #ffffe7;
box-sizing: border-box;
width:auto;
height:auto;
color:#000000;
background-image:
linear-gradient(90deg, transparent 29px, #fcc 29px, #fcc 31px, transparent 31px),
linear-gradient(90deg, transparent 49px, #fcc 49px, #fcc 51px, transparent 51px),
linear-gradient(rgba(153,204,255,.3) .1em, transparent .1em);
background-size: 100% 1.5em;
}

.note:before {
content: '';
position: absolute;
top: 0;
left: 0;
background-color: #ffffe7;
background-image:
linear-gradient(90deg, transparent 9px, #fcc 9px, #fcc 11px, transparent 11px),
linear-gradient(90deg, transparent 19px, #fcc 19px, #fcc 21px, transparent 21px);
}

.btn-sticky {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  background: #ffffe7;
  border-left: solid 6px #006633;/*����*/
  color: #000000;/*�����F*/
  font-weight: bold;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
}
.btn-sticky:active {
  box-shadow: inset 0 0 2px rgba(128, 128, 128, 0.1);
  transform: translateY(2px);
}
.btn-sticky:hover {
  background: #ffffb7;
}

.love{
  position:fixed;
	background-color: #006633;
	width:973px;
	height: 45px;
  z-index: 99;
  bottom: -22px;
  padding: 10px 0;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
}
.love a {
  cursor: pointer;
  width: 973px;
  height: 25px;
  padding: 10px 0;
  z-index: 98;
}
@charset "utf-8";
/*
  YouTube 初回表示軽量化スクリプト
  Copyright Rectus Inc, 2020/05/11 Ver 0.04
  https://www.rectus.co.jp/
 */

.yt {
  position:relative;
}
.yt_play {
  position: absolute;
}
.yt_play:hover {
  cursor:pointer;
}
.yt_play::before { /* YouTubeアイコン */
  position: absolute;
  background: url(/common/img/yt_icon_mono_light.png);
  content: "";
  background-size: 100%;
  width: 70px;
  height: 50px;
  top: 50%;
  left: 50%;
  transform : translate(-50%,-50%);
  opacity: .90;
  transition:.5s;
}

.yt_play:hover::before { /* YouTubeアイコン */
  cursor: pointer;
  background-image:url(/common/img/yt_icon_rgb.png);
}
@media only screen and (max-width: 970px){
.love{
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
  bottom: none;
  width:100%;
  background-color: #006633;
}
}
.title3{
font-size:18px;
}

.popup {
  position:absolute;
  z-index:0;
  margin:0px 0px 0px 0px;
  font-size:45px;
  animation: popup 20s ease-in-out 0s 1 normal forwards running;
  animation-iteration-count: infinite;
}

@keyframes popup {

  0% {
opacity:0;
font-size:45px;
margin:0px 0px 0px 0px;
  }
  15% {
opacity:0;
font-size:45px;
margin:0px 0px 0px 200px;
  }
  20% {
  opacity:1;
  margin:-30px 0px 0px 200px;
  font-size:45px;
  }
  23% {
  opacity:1;
  margin:0px 0px 0px 200px;
  font-size:45px;
  }
  30% {
opacity:0;
font-size:45px;
margin:0px 0px 0px 0px;
  }

  45% {
opacity:1;
font-size:45px;
margin:-35px 0px 0px 0px;
  }

  50% {
opacity:1;
font-size:45px;
margin:0px 0px 0px 0px;
  }
  55% {
opacity:1;
font-size:45px;
margin:0px 0px 0px 50px;
  }
  75% {
opacity:1;
font-size:45px;
margin:-45px 0px 0px 50px;
  }

  80% {
  opacity:1;
  margin:0px 0px 0px 50px;
  font-size:45px;
  }
  81% {
  opacity:1;
  margin:0px 0px 0px 100px;
  font-size:45px;
  }
  90% {
  opacity:1;
  margin:-30px 0px 0px 100px;
  font-size:45px;
  }
  91% {
  opacity:1;
  margin:0px 0px 0px 100px;
  font-size:45px;
  }
  100% {
  opacity:0;
  margin:0px 0px 0px 0px;
  font-size:45px;
  }
}
@media screen and (max-width: 960px) {
  .maintable{
width: 100%;
border-collapse:separate;
border-spacing: 0;
box-sizing: border-box;
  }
}
@media screen and (min-width: 960px) {
  .maintable{
width: 973px;
border-collapse:separate;
border-spacing: 0;
box-sizing: border-box;
  }
}

.maintable th:first-child{
  border-radius: 1px 0 0 0;
  box-sizing: border-box;
}

.maintable th:last-child{
  border-radius: 0px 1px 0 0;
  border-right: 1px solid #3c6690;
  box-sizing: border-box;
}

.maintable th{
  text-align: center;
  color:white;
  border-radius:15px 15px 0 0;
  background:linear-gradient(45deg, #009933 0%, #006633 100%);
}

.maintable td{
  text-align: left;
  vertical-align:top;
  border-left: 1px solid #a8b7c5;
  border-bottom: 1px solid #a8b7c5;
  border-top:none;
  box-shadow: 0px -3px 5px 1px #eee inset;
  width: auto;
  padding: 10px 0;
  box-sizing: border-box;
}

.maintable td:last-child{
  border-right: 1px solid #a8b7c5;
  box-sizing: border-box;
}

.maintable tr:last-child td:first-child {
  border-radius: 0 0 0 5px;
  box-sizing: border-box;
}

.maintable tr:last-child td:last-child {
  border-radius: 0 0 5px 0;
  box-sizing: border-box;
}
.table{
  width: auto;
  border-collapse:separate;
  font-size:20px;
  border-spacing: 0;
  border-left: 1px solid #3c6690;
  border-right: 1px solid #3c6690;
  border-top: 1px solid #3c6690;
  border-bottom: 1px solid #3c6690;
  box-shadow: 0px 1px 1px rgba(255,255,255,0.3) inset;
  box-sizing: border-box;
}
.table th{
  text-align: center;
  color:white;
  background: linear-gradient(#006633,#004d00);
  width: auto;
  padding: 0;
  font-size:18px;  border-left: 1px solid #3c6690;
  border-right: 1px solid #3c6690;
  border-top: 1px solid #3c6690;
  border-bottom: 1px solid #3c6690;
  box-shadow: 0px 1px 1px rgba(255,255,255,0.3) inset;
  box-sizing: border-box;
}

.table td{
  text-align: left;
  font-size:18px;
  border-left: 1px solid #3c6690;
  border-right: 1px solid #3c6690;
  border-top: 1px solid #3c6690;
  border-bottom: 1px solid #3c6690;
  box-shadow: 0px 1px 1px rgba(255,255,255,0.3) inset;
  box-sizing: border-box;
}

h1{
  font-size:16px;
  color:white;
  margin:0;
  display:inline-block;
}
h2{
  font-size:24px;
  margin:0;
}
.love{
  position:fixed;
	background-color: #006633;
  font-size:12px;
	width:973px;
	height: 35px;
  z-index: 99;
  padding: 5px 0;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
}
.love a {
  cursor: pointer;
  width: 973px;
  height: 35px;
  padding: 5px 0;
  z-index: 98;
}

@media only screen and (max-width: 970px){
.love{
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
  width:100%;
  background-color: #006633;
}
}