body{
  width:96%;
  max-width:900px;
  margin:2vw auto 10vh auto;
  font-size:3.6vw;
  color:#444;
  font-family: 'Noto Sans JP', sans-serif;
}
@media screen and (min-width:768px){
  body{
    font-size:16px;
  }
}
@media print{
  body{
    width:800px;
    margin:0;
    font-size:12px;
  }
}


p{
  line-height:1.6em;
}
p b{
  margin:0 .2em;
  color:rgb(9, 142, 207);
}
p span{
	font-size: 120%;
	color:rgb(207, 9, 68);
}


/*
  heading
  h1: ページタイトル（ロゴ）
  h2: 見出し & 設問タイトル
  h3:
  h4: 設問番号
  h5: ヒントタイトル
  h6: ヒント見出し
*/

h1{
  margin-top:4vh;
}
h1 svg{
  width:80%;
  display:block;
  margin:0 auto;
}
h1.small svg{
  width:30%;
  margin:0 0 0 auto;
}
h1 svg .red{
  fill:#D7000F;
}
h1 svg .frame{
  fill:none;
  stroke:black;
  stroke-width:0.258;
  stroke-miterlimit:10;
}
h1 svg .delay,
.index_description{
  animation: Delay 3s;
}
@keyframes Delay{
  0%{
    opacity:0;
  }
}
h1 p{
  text-align:center;
  background:linear-gradient(to right, white,rgb(215, 0, 15), rgb(215, 0, 15), rgb(215, 0, 15), white);
  color:white;
}


@media print, screen and (min-width:768px){
  h1 svg{
    width:400px;
  }
  h1.small svg{
    width:200px;
  }
}


h2{
	background-color:hsl(47, 100%, 69%);
	font-family: 'M PLUS Rounded 1c', sans-serif;
	font-size:1.1em;
	line-height:2em;
	position:relative;
	width:100%;
	height:2em;
	border-radius:2em;
	box-sizing: border-box;
	padding-left:2em;
}
h2 i{
  display:inline-block;
  position:absolute;
  left:-1em;
  top:-0.2em;
  margin-right:.5em;
  width:2em;
  height:2em;
  line-height:2em !important;
  text-align:center;
  border-radius:50%;
  background-color:rgb(250, 196, 0);
  color:white;
  border:.2em solid white;
}
.form_box h2,
.check_box h2{
	width: calc(100% - 7em);
	background-color:hsl(322, 0%, 61%);
	color:white;
	margin-left:1em;
}
.form_box h2 i,
.check_box h2 i{
  background-color:hsl(232, 0%, 67%);
  border:.2em solid hsl(232, 0%, 97%);
}
#form1 h2,
#check1 h2{
  background-color:hsl(322, 72%, 61%);
  color:white;
}
#form1 h2 i,
#check1 h2 i{
  background-color:hsl(322, 72%, 61%);
  border:.2em solid hsl(322, 72%, 96%);
}
#form2 h2,
#check2 h2{
  background-color:hsl(232, 100%, 67%);
  color:white;
}
#form2 h2 i,
#check2 h2 i{
  background-color:hsl(232, 100%, 67%);
  border:.2em solid hsl(232, 100%, 97%);
}
#form3 h2,
#check3 h2{
  background-color:hsl(153, 74%, 43%);
  color:white;
}
#form3 h2 i,
#check3 h2 i{
  background-color:hsl(153, 74%, 43%);
  border:.2em solid hsl(153, 74%, 93%);
}
#form4 h2,
#check4 h2{
  background-color:hsl(15, 80%, 55%);
  color:white;
}
#form4 h2 i,
#check4 h2 i{
  background-color:hsl(15, 80%, 55%);
  border:.2em solid hsl(15, 100%, 97%);
}


h4{
  border-bottom:1px solid #AAA;
  margin:2em 0 .5em 0;
  padding-bottom:.2em;
  font-size:2em;
}
h4 b{
  display:inline-block;
  margin-left:.2em;
  font-family: 'Vollkorn SC', serif;
  width:1.3em;
  height:1.3em;
  line-height:1.3em;
  text-align:center;
  color:white;
  border-radius:50%;
  vertical-align:bottom;
}
.form_box h4 b,
.check_box h4 b{
  background-color:hsl(322, 0%, 61%);
}
#form1 h4 b,
#check1 h4 b{
  background-color:hsl(322, 72%, 61%);
}
#form2 h4 b,
#check2 h4 b{
  background-color:hsl(232, 100%, 67%);
}
#form3 h4 b,
#check3 h4 b{
  background-color:hsl(153, 74%, 43%);
}
#form4 h4 b,
#check4 h4 b{
  background-color:hsl(15, 80%, 55%);
}

h5{
  font-size:1.2em;
  display:block;
  width:20em;
  max-width:100%;
  box-sizing:border-box;
  text-align:center;
  margin:0;
  color:white;
  line-height:2em;
  border-radius:.5em;
  margin:0 auto;
}
h5 i{
  margin:0 1em;
}
.form_box h5{
  background-color:hsl(322, 0%, 61%);
}
#form1 h5{
  background-color:hsl(322, 72%, 61%);
}
#form2 h5{
  background-color:hsl(232, 100%, 67%);
}
#form3 h5{
  background-color:hsl(153, 74%, 43%);
}
#form4 h5{
  background-color:hsl(15, 80%, 55%);
}

h6{
  font-size:1em;
  font-weight:700;
  margin:0 0 .3em 0;
}
h6::before{
  content:"●";
  margin-right:.2em;
}


/* outside of form */

.index_description{
  padding-bottom:2em;
}
.index_description h2{
	width: calc(100% - 1em);
	margin-left:1em;
}
.index_description p{
  text-align:justify;
  text-justify:distribute;
  width:90%;
  margin:.5em auto;
}
.index_description .caution{
	color: #ff0000;
	font-size: 1.25em;
	text-align: center;
	margin: -1em auto 0;
}
.index_description .correction{
	box-sizing: border-box;
	width:90%;
	margin:1.5em auto .5em;
	border-radius: 10px;
	border: 1px solid black;
	padding: 10px;
}
.index_description .correction .title{
	text-align: center;
	margin: 1em 0;
}
.index_description .correction img {
	width:100%;
	margin-bottom: 1.5em;
}
.index_description .correction p {
	margin: 1em 0;
}
.index_description .correction table{
	width: 100%;
	border-collapse: collapse;
}
.index_description .correction th,
.index_description .correction td{
	padding: 6px;
	border: 1px solid #AAA;
}
.index_description .correction th {
	text-align: center;
}
.index_description .correction td {
	font-size: .8em;
}
.index_description .correction td:first-child {
	background-color: hsl(0, 100%, 94%);
}
.index_description .correction td:first-child b {
	color: hsl(0, 100%, 44%);
	font-size: 1.2em;
}
.index_description .correction td:last-child {
	background-color: hsl(211, 100%, 96%);
}
.index_description .correction td:last-child b {
	color: hsl(211, 100%, 44%);
	font-size: 1.2em;
}


#period{
	text-align:center;
	line-height:2em;
	display: grid;
	width:fit-content;
	background-color:hsl(342, 91%, 97%);
	border:1px solid hsl(342, 91%, 42%);
	border-radius:3px;
	box-shadow:0 0 10px #DDD;
	box-sizing: border-box;
	margin:1em auto;
	padding: 0.25em 0.5em;
}
#period b{
  font-size:1.2em;
  margin-left:.5em;
}
.heldCmt{
	font-size: 1em;
	color: hsl(17, 91%, 52%);
	display: block;
	width: 90%;
	border-top: 1px dotted hsl(17, 91%, 52%);
	border-bottom: 1px dotted hsl(17, 91%, 52%);
	margin: 2em auto;
	padding: .5em 0;
}
.index_description .heldCmt p{
	text-align: center;
}

/* thanks */

.thanks_description{
  padding-bottom:2em;
}
.thanks_description p{
  width:90%;
  margin:.5em auto;
}
.thanks_description b{
  text-decoration:underline;
}

#passCol {
	text-align: center;
	margin-bottom: 2em;
}
#passCol p{
	color: hsl(0, 79%, 48%);
}
#passCol .rsltPass,
#passCol .rsltNoPass{
	color: #ffffff;
	font-size: 2em;
	font-weight: bold;
	display: block;
	width: 4em;
	background-color: hsl(0, 79%, 48%);
	box-sizing: border-box;
	margin: 0 auto 1em;
}
#passCol .rsltNoPass{
	color: #0000ff;
	background: none;
	border: 2px solid;
}

.certificate_link {
	display: block;
	width: 5em;
	text-align: center;
	padding: .3em 1em;
	border-radius: 4px;
	background-color: hsl(235, 59%, 56%);
	color: white;
	margin: 1em auto;
	text-decoration: none;
	transition: all .3s;
}
.certificate_link:hover {
	background-color: hsl(235, 59%, 66%);
}


@media print, screen and (min-width:768px){
  .index_description p{
    text-align:justify;
    text-justify:distribute;
    width:85%;
    margin:.5em 10% .5em 5%;
  }
  .thanks_description p{
    width:70%;
  }
  #period{
	font-size:1.2em;
	display: block;
  }
  .heldCmt{
	width: 80%;
	font-size: 1.2em;
  }
}


/* form */
form{
  width:100%;
}
.q_text{
  padding:.5em;
  margin:.5em 0;
  background-color: #fff;
  border-radius:3px;
  text-align:justify;
  text-justify:distribute;
  line-height: 1.5em;
}
.q_text p{
	margin: 0;
}
.q_text a{
	color: #fff;
	text-align: center;
	text-decoration: none;
	display: block;
	width: 7em;
	background: hsl(202, 80%, 55%);
	border-radius: 4px;
	box-sizing: border-box;
	margin: 0.5em 0 0 calc(100% - 7em);
	padding: 0.25em 0.5em;
	transition: all .3s;
}
.q_text a:hover{
	background: hsl(202, 68%, 85%);
}
.q_text img{
	display: block;
	width: 90%;
	max-width: 400px;
	margin: 1em auto 0;
}
.q_text .cmtblk{
	text-align: right;
	font-weight: bold;
	margin: 1em 0 0;
}
.qstLst{
	list-style: none;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 0
}
.qstLst li{
	margin: 1em auto 0;
}
.qstLst li img{
	margin: auto;
}
.qstLst li p{
	text-align: center;
}
.hint{
  padding:1em;
  margin-top:4em;
  background-color: #fff;
  border-radius:3px;
  text-align:justify;
  text-justify:distribute;
}
.hint_text{
  padding:1em 0;
}
.hint p{
  margin:1em 0 0;
  text-indent:1em;
}

.hntBtn .btn{
	display: block;
}
.hntBtn a.btn{
	display: block;
	background-color: #00a5ff;
}
.hntBtn a.btn:hover{
	background-color: #49deef;
}

.answer{
  display:inline-block;
  border:1px solid #666;
  background-color:white;
  border-radius:5px;
  padding:.5em;
}
.answer b{
  font-weight:bold;
  margin-right:.4em;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-size:1.2em;
}
.answer img {
    max-width: 200px;
    max-height: 120px;
}
.answerTxt{
	width:100%;
	background:#fff;
	border-radius:4px;
	border:1px solid;
	box-sizing:border-box;
	margin:0.5em 0 0;
	padding:1em;
}
@media print, screen and (min-width:768px){
	.qstLst{
		display: flex;
	}
	.qstLst li{
		width: 30%;
	}
	.qstLst li img{
		max-width: 100%;
	}
}

/* バリデーションエラー */
.error{
  color:rgb(255, 0, 0);
  text-align:center;
}
.no_answer_message{
  display:none;
  margin-top:5px;
}

.dupEmail {
	background-color: rgb(254, 228, 228);
}
.dupEmail + .error {
	text-align: left;
}

/* index.php */

#index{
  margin:2em 0 0;
}
#index .queryBox{
  width:98%;
  max-width:640px;
  margin:0 auto;
  line-height:2em;
  padding:1em;
  box-sizing:border-box;
  background-color:hsl(47, 100%, 96%);
  border:1px solid hsl(47, 100%, 49%);
  border-radius:3px;
  box-shadow:0 0 1em #DDD;
}
#index .queryBox > p{
	text-align: center;
	width: 100%;
	margin: 0;
}
#index .queryBox > div{
	display: flex;
	justify-content: space-between;
	width: 100%;
	box-sizing: border-box;
}
#index .queryBox > div label{
	text-align: center;
	width: 100%;
	margin: 0 0.5em;
}
#index .queryBox > div label.nohold{
	cursor: text;
	background-color: #dddddd;
}
#index .queryBox .ncsryLst{
	display: none;
}
#index dt{
  font-size:1.2em;
  margin-bottom:.5em;
  padding:0 .5em;
  box-sizing:border-box;
  border-radius:3px;
  display:inline-block;
  background-color:hsl(47, 100%, 49%);
  box-shadow:0 0 1em #DDD;
}
#index dt:not(:first-child){
  margin-top:.5em;
}
#index dd{
  width:100%;
  margin-left:0;
}
#index dl p{
  font-size:.8em;
  color:#666;
  margin:0;
}



/* form.php & check.php */

#form{
  width:100%;
  margin-bottom:16vh;
}
.form_box{
	display:none;
}
.form_past,
#form1{
	display: block;
}
.form_box,
.check_box{
  width:100%;
  padding:1em;
  margin:1em 0;
  box-sizing:border-box;
  position:relative;
  overflow:hidden;
  background-color:hsl(322, 0%, 96%);
}
.form_box::after,
.check_box::after{
  content:"";
  position:absolute;
  top:-5em;
  right:-5em;
  width:10em;
  height:10em;
  border-radius:50%;
  background-color:hsl(322, 0%, 61%);
}
#form1,
#check1{
  background-color:hsl(322, 72%, 96%);
}
#form1::after,
#check1::after{
  background-color:hsl(322, 72%, 61%);
}

#form2,
#check2{
  background-color:hsl(232, 100%, 97%);
}
#form2::after,
#check2::after{
  background-color:hsl(232, 100%, 67%);
}

#form3,
#check3{
  background-color: hsl(153, 74%, 93%);
}
#form3::after,
#check3::after{
  background-color:hsl(153, 74%, 43%);
}

#form4,
#check4{
  background-color: hsl(15, 100%, 97%);
}
#form4::after,
#check4::after{
  background-color:hsl(15, 80%, 55%);
}

.form_description ul{
	list-style: none;
	margin: 0;
	padding: 0;
}
.form_description ul li{
	border-left:.5em solid;
	line-height:2em;
	font-size:1.1em;
	font-weight:bold;
	background-color: hsla(322, 0%, 96%, 1);
	border-color: hsl(322, 0%, 61%);
	margin: 1em 0;
	padding:0 .3em;
}
.form_description ul li:nth-child(1){
  background-color:hsl(322, 72%, 96%);
  border-color:hsl(322, 72%, 61%);
}
.form_description ul li:nth-child(2){
  background-color:hsl(232, 100%, 97%);
  border-color:hsl(232, 100%, 67%);
}
.form_description ul li:nth-child(3){
  background-color: hsl(153, 74%, 93%);
  border-color:hsl(153, 74%, 43%);
}
.form_description ul li:nth-child(4){
	background-color: hsl(15, 100%, 97%);
	border-color:hsl(15, 80%, 55%);
}
.form_description p{
  line-height:1.4em;
  font-size:1.1em;
  font-weight:bold;
  margin:.2em 0;
  padding:0;
}
.check_description p{
  line-height:2em;
  font-weight:bold;
}

.basic_data{
  margin:2em 0;
  font-weight:bold;
}
.basic_data h2{
	width: calc(100% - 1em);
	margin-left: 1em;
}
.basic_data p{
  padding:0 .3em;
  line-height:2em;
  border-bottom:1px solid #555;
}
.form_past .question ul li b{
	margin-right: 0.4em;
}
.form_past .question ul li img{
	max-width: 100%;
}

/* text etc. */
#index input[type="text"],
#index input[type="email"]{
  font-size:1.2em;
  outline:none;
  padding:.2em .5em;
  border:1px solid #AAA;
  border-radius:.2em;
  box-sizing:border-box;
  width:20em;
  max-width:100%;
}
#index input[type="text"]:focus,
#index input[type="email"]:focus{
  background-color:hsl(164, 53%, 96%);
  border-color:hsl(164, 53%, 56%);
  outline-offset:0;
}
#index input[type="text"]::placeholder{
  padding-left:2em;
  vertical-align:middle;
}
#index input[type="text"]:focus::placeholder{
  color:transparent;
}


/* label(radio) */

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

#index label{
  display:inline-block;
  border:1px solid #888;
  background-color:white;
  border-radius:5px;
  padding:0 .2em;
  margin-right:.2em;
  margin-bottom:.2em;
  cursor:pointer;
}
#index label:hover{
  background-color:hsl(50, 100%, 86%);
}
#index label.on{
  background-color:hsl(50, 100%, 77%);
}

#form .form_box label{
  display:inline-block;
  border:1px solid #888;
  background-color:white;
  border-radius:5px;
  padding:.5em;
  margin:.5em;
  cursor:pointer;
}
#form label b{
  font-weight:bold;
  margin-right:.4em;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-size:1.2em;
}
#form label img {
	max-width: 200px;
	max-height: 120px;
}
#form .form_box label:hover{
  background-color:hsl(322, 0%, 96%);
}
#form .form_box label.on{
  background-color:hsl(322, 0%, 86%);
}
#form #form1 label:hover{
  background-color:hsl(322, 72%, 96%);
}
#form #form1 label.on{
  background-color:hsl(322, 72%, 86%);
}
#form #form2 label:hover{
  background-color:hsl(232, 100%, 97%);
}
#form #form2 label.on{
  background-color:hsl(232, 100%, 87%);
}
#form #form3 label:hover{
  background-color:hsl(153, 74%, 93%);
}
#form #form3 label.on{
  background-color:hsl(153, 74%, 83%);
}
#form #form4 label:hover{
  background-color:hsl(15, 100%, 97%);
}
#form #form4 label.on{
  background-color:hsl(15, 80%, 55%);
}
#form .form_box .question .txtAns{
	width:100%;
	box-sizing:border-box;
	margin: 0.5em 0 0;
}
#form .form_box .question .txtAns textarea{
	width:100%;
	box-sizing:border-box;
	border:none;
}
#form .form_box .question .txtCom{
	margin: 0;
}


/* form_bar */
.form_bar_box{
  position:fixed;
  box-sizing:border-box;
  left:0;
  width:100%;
  height:2vh;
  z-index:3;
  font-size:0;
  display:flex;
  background-color:rgba(255,255,255,.9);
}
#form_bar_box0_up,
#form_bar_box1{
  top:0;
}
#form_bar_box0_bottom,
#form_bar_box2{
  bottom:0;
}
.form_bar0{
  width:100%;
  height:2vh;
  background-color: #5d6777;
}
.form_bar{
  width:33.33%;
  height:2vh;
  opacity:.1;
  background-color:hsl(322, 0%, 61%);
}
#form_bar1_1,
#form_bar2_1{
  background-color:hsl(322, 72%, 61%);
  opacity:1;
}
#form_bar1_2,
#form_bar2_2{
  background-color:hsl(232, 100%, 67%);
}
#form_bar1_3,
#form_bar2_3{
  background-color:hsl(153, 74%, 43%);
}
#form_bar1_4,
#form_bar2_4{
  background-color:hsl(15, 80%, 55%);
}
#form_bar1_past,
#form_bar2_past{
  background-color:hsl(322, 72%, 61%);
}


/* box_no_answer_message */

.btn_error{
  margin:0 auto;
  text-align:center;
  line-height:2em;
  display:none;
}


/*
  button
  submit: index.php & check.php
  back: check.php
  form_fade: form.php
  form_submit: form.php
  form_back: form.php
  download: result.php
*/

.btn{
	font-family: sans-serif;
	text-align: center;
	text-decoration: none;
}
.btn i,
button i{
  margin:0 .3em;
}
.btn_box{
  display:flex;
  width:100%;
  flex-wrap: wrap;
  justify-content: space-evenly;
  box-sizing:border-box;
  margin:1em auto 0;
}
.btn_box p {
	margin: 1em auto;
	text-align: center;
	color: red;
}
.form_btns{
	display:flex;
	box-sizing:border-box;
	width:100%;
	margin:3em 0 0;
}
.inxBox{
	margin: 2em 0 -2em;
}
.btn,
button{
  display:inline-block;
  width:46%;
  margin:0 auto;
  box-sizing:border-box;
  font-size: 1rem;
  font-weight: bold;
  padding: .4em;
  color: #fff;
  border-style: none;
  box-shadow: 2px 2px 3px 1px #666;
  text-shadow: 1px 1px 2px #000;
  cursor:pointer;
  outline:none;
  transition:all .3s;
  background-color:hsl(322, 0%, 61%);
}
.btn:hover,
button:hover{
	background-color:hsl(322, 0%, 75%);
}
.btn div:nth-child(2),
button div:nth-child(2){
  margin-top:.3em;
  margin-bottom:.5em;
  font-size:.7rem;
}
.btn_box .btn,
.btn_box button{
	width: 75%;
	margin: 1em auto 0;
}
.btn_box .btn div,
.btn_box button div{
	display: inline-block;
}

.forSP{
	font-size: 1.2rem;
	color: #9c9c9c;
	text-shadow:none;
	width:7em;
	background-color:rgba(255,255,255,.95);
	border-radius:.1em;
	margin:.5em auto 0 auto;
	padding:.2em 0;
}


.submit{
  background-color: #5d6777;
}
.submit:hover{
  background-color: #747d8b;
}
.submit .forSP{
  color: #5d6777;
}
.back{
  background-color: #5d6777;
}
.back:hover{
  background-color:#747d8b;
}
.back .forSP{
  color: #5d6777;
}
.done{
  background-color:hsl(47, 100%, 49%);
}
.done:hover{
  background-color:hsl(47, 100%, 59%);
}
.done .forSP{
  color:hsl(47, 100%, 49%);
}

.backToForm1{
  background-color:hsl(322, 72%, 61%);
}
.backToForm1:hover{
  background-color:hsl(322, 72%, 75%);
}
.backToForm1 .forSP{
  color:hsl(322, 72%, 61%);
}
.goToForm2,
.backToForm2{
  background-color:hsl(232, 100%, 67%);
}
.goToForm2:hover,
.backToForm2:hover{
  background-color:hsl(232, 100%, 77%);
}
.goToForm2 .forSP,
.backToForm2 .forSP{
  color:hsl(232, 100%, 57%);
}
.goToForm3,
.backToForm3{
  background-color:hsl(153, 74%, 43%);
}
.goToForm3:hover,
.backToForm3:hover{
  background-color:hsl(152, 45%, 55%);
}
.goToForm3 .forSP,
.backToForm3 .forSP{
  color:hsl(153, 74%, 43%);
}
.goToForm4,
.backToForm4{
  background-color:hsl(15, 80%, 55%);
}
.goToForm4:hover,
.backToForm4:hover{
  background-color:hsl(15, 45%, 55%);
}
.goToForm4 .forSP,
.backToForm4 .forSP{
  color:hsl(15, 80%, 55%);
}

@media print, screen and (min-width:768px){
  #btn_error{
    font-size:2vh;
    width:40.48%;
    right:7.76%;
  }
  .btn,
  button{
    font-size:20px;
  }
  .btn div:nth-child(2),
  button div:nth-child(2){
    font-size:20px;
  }

  .btn_box .btn,
  .btn_box button{
  	width: 46%;
  }
  .btn_box .btn div,
  .btn_box button div{
  	display: block;
  }

  /* .forPC{
    display:inline !important;
  } */
  /* .forSP{
    display:none;
  } */
}


/* 過去問題 */
.detailCol{
	line-height: 1.5;
	display: block;
	width: 92%;
	margin: 1em auto 0;
}
.detailCol dt{
	font-weight: bold;
	width: 100%;
	margin: 0;
}
.detailCol dd{
	width: 100%;
	margin: 0 0 1em 0.5em;
}
.overviewCol{
	list-style: none;
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 1em 0 0;
	padding: 0 1em;
}
.overviewCol li{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 100%;
	border: 1px solid hsl(25, 100%, 60%);
	border-radius: 8px;
	box-sizing: border-box;
	margin: 1em auto 0;
	padding: 0 1em 1em;
}
.overviewCol li h3 {
	color: #fff;
	text-align: center;
	width: calc(100% + 1em - 4px);
	background: hsl(25, 100%, 60%);
	border-radius: 6px 6px 0 0;
	margin: 0;
	margin-left: calc(-1em + 2px);
	padding: 0.25em 0.5em;
}
.overviewCol li dl{
	margin: -0.5em 0 auto;
}
.overviewCol li dl dt{
	font-weight: bold;
	font-size: 105%;
	margin: 1.5em 0 0;
}
.overviewCol li dl dd{
	line-height: 1.5;
	margin: 0.25em 0 0 1em;
}
.overviewCol li dl dd ul{
	list-style: none;
	width: 100%;
	margin: 0;
	padding: 0;
}
.overviewCol li dl dd ul li{
	text-indent: -1em;
	width: calc(100% - 1em);
	border: none;
	margin: 0.25em 0 0 1em;
	padding: 0;
}
.overviewCol li .btn{
	width: 100%;
}
.overviewCol li .btn_box .btn{
	width: 100%;
}
.purposeCol li{
	display: block;
}
#cntntPast > h2 {
	margin-bottom: 0;
}
#cntntPast .form_description {
/*	position: absolute;
	width: 96%;
	max-width: 800px;*/
	background: rgba(255, 255, 255, 1);
	margin: auto;
	padding: 0 0 1em;
	z-index: 1;
}
#cntntPast.dscFix .form_description {
	position: fixed;
	top: 0;
}
#cntntPast.noCtg .form_description {
	position: relative;
	width: 100%;
}
#cntntPast .pastCoution{
/*	margin-top: 65vw;*/
}
#cntntPast .pastCoution span{
	display: inline-block;
	background: rgba(251, 255, 0, 1);
	border: 1px solid #888;
	border-radius: 5px;
	margin: 0;
	padding: .5em;
}
#cntntPast.noCtg .pastCoution{
	margin-top: 1em;
}
#cntntPast .form_description ul li {
	padding: 0.25em 0.3em;
}
#cntntPast .form_description ul li:last-of-type {
	margin-bottom: 0;
}
#cntntPast .form_description ul li p {
	display: block;
	margin: 0;
}
#cntntPast .form_description ul li .ancLnk {
	display: inline-flex;
	width: 100%;
	margin: 0;
	padding: 0;
}
#cntntPast .form_description ul li .ancLnk li {
	display: block;
	width: 45%;
	border: none;
	background: none;
	margin: 0 0.5em;
	padding: 0;
}
#cntntPast .form_description ul li .ancLnk li a {
	text-decoration: none;
	text-align: center;
	font-size: 15px;
	line-height: 1;
	color: #fff;
	display: block;
	background: hsl(133, 35%, 49%);
	border-radius: 4px;
	box-sizing: border-box;
	padding: 0.25em 0.5em;
	transition:all .3s;
}
#cntntPast .form_description ul li .ancLnk li a:hover {
	opacity: 0.5;
}
#cntntPast .form_box .question h4{
	margin-top: 1em;
}
#cntntPast .form_box .question > ul{
	list-style: none;
	display: flex;
	margin: 0;
	padding: 0;
}
#cntntPast .form_box .question > ul:not(.qstLst) li {
	display: inline-block;
	border: 1px solid #888;
	background-color: white;
	border-radius: 5px;
	padding: .5em;
	margin: .5em;
}
#cntntPast .form_box .question > ul li.ans {
	background: rgba(251, 255, 0, 1);
}
#cntntPast .form_box .question .answerList {
	display: inline-block;
	border: 1px solid #888;
	background-color: white;
	border-radius: 5px;
	padding: .5em;
	margin: .5em;
}
#cntntPast .form_box .question .ans {
	background: rgba(251, 255, 0, 1);
}
#cntntPast .form_box .question .answerList b {
	margin-right: 1em;
}
#cntntPast .form_box .question .answerList img {
	max-width: 200px;
	max-height: 120px;
}
#cntntPast .form_box .question .cmtablk {
	width: 100%;
	background: #ffffff;
	box-sizing: border-box;
	border: 1px solid;
	border-radius: 4px;
	margin: 1em 0 0;
	padding: 0.5em;
	line-height: 1.5em;
}
#cntntPast .form_box .question .cmtablk img {
	width: 100%;
	max-width: 300px;
}
#cntntPast .form_box .hint h5 {
	margin: 1em auto 0;
}
@media print, screen and (min-width:768px){
	.detailCol{
		display: flex;
		flex-wrap: wrap;
		width: 92%;
	}
	.detailCol dt{
		width: 6em;
		margin: 0 0 1em;
	}
	.detailCol dd{
		width: calc(100% - 6em - 0.5em);
		margin: 0 0 1em 0.5em;
	}
	.overviewCol{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	.overviewCol li{
		width: calc(100% / 2 - 1em);
		margin: 1em 0.5em 0;
	}
	.overviewCol li.purposWid{
		width: 100%;
	}
	.overviewCol li.purposWid .btn{
		display: block;
		width: 18em;
		margin: 0 auto;
	}
	#cntntPast .pastCoution{
/*		margin-top: 210px;*/
	}
	#cntntPast.noCtg .pastCoution{
		margin-top: 1em;
	}
	.overviewCol li .btn_box .btn{
		width: 100%;
	}
	#cntntPast .form_description ul li p {
		display: inline;
	}
	#cntntPast .form_description ul li .ancLnk {
		width: auto;
	}
	#cntntPast .form_description ul li .ancLnk li {
		width: 5em;
	}
}


/* btnTop */
.btnTop{
	position: fixed;
	bottom: 40px;
	right: 4vw;
	cursor: pointer;
	display: block;
	width: 40px;
	height: 40px;
	background: #fedd61;
	border-radius: 40px;
	box-sizing: border-box;
	padding: 8px;
	transition:all .3s;
}
.btnTop:hover{
	background-color: hsl(17, 99%, 69%);
}
.btnTop::before {
	content: "";
	position: absolute;
	bottom: 3px;
	left: -50%;
	right: -50%;
	display: block;
	width: 60%;
	height: 60%;
	border: 4px solid #fff;
	border-right: none;
	border-bottom: none;
	box-sizing: border-box;
	margin: auto;
	transform: rotate(45deg);
}
.btnTop p{
	display: none;
}


/* admin.php */
#admin h2{
	width: calc(100% - 1em);
	box-sizing: border-box;
	margin: 2em 0 1em 1em;
}
#admin p{
	margin-left: 1em;
}
#admin h1 p{
	margin-left: 0;
}
#admin h3 {
	margin: 1em 0 0.5em 1em;
	display: inline-block;
	background-color: hsl(47, 100%, 69%);
	padding: .3em 1em;
	border-radius: 1em;
	font-size: 1em;
}
#admin .answers_title {
	display: flex;
	justify-content: space-between;
	margin: 1em 1em 0.5em;
}
#admin .answers_title h3 {
	margin: 0;
}
#admin .answers_title .answer_link {
	display: inline-block;
	text-decoration: none;
	margin-left: 1em;
	border-radius: 1em;
	width: 7em;
	text-align: center;
	line-height: 1.5em;
	font-size: .8em;
	color: white;
	background: #618aff;
}
#admin .answers_title p {
	text-align: center;
	color: #fff;
	line-height: 1;
	min-width: 10em;
	background: #618aff;
	border-radius: 4px;
	box-sizing: border-box;
	margin: 0;
	padding: 0.25em 1em;
}
.answers_box{
	max-height:305px;
	overflow-y:scroll;
}
.answers_table{
	width: calc(100% - 2em);
	border-collapse:collapse;
	margin: 0 1em 0;
}
.answers_table caption {
	font-size: .8em;
	color: #555;
	text-align: right;
	margin: .5em 0;
}
.answers_table th,
.answers_table td{
	border:1px solid black;
	padding:4px;
}
.answers_table td:nth-of-type(3),
.answers_table td:nth-of-type(4) {
	word-break: break-all;
}
#admin .no_answers{
	text-align: center;
	color: orange;
	font-weight: bold;
	margin-bottom: 3em;
}

.download{
	font-weight: bold;
	color: #fff;
	outline:none;
	text-shadow: 1px 1px 2px #000;
	cursor:pointer;
	display:block;
	width: 12em;
	background-color: #5d6777;
	border-style: none;
	box-shadow: 2px 2px 3px 1px #666;
	transition:all .3s;
	margin: 1em auto 3em;
	padding: .4em 1em;
}
.download:hover{
  background-color: #747d8b;
}
.allowed_duplicate_table{
	width: calc(100% - 2em);
	border-collapse:collapse;
	margin: 0 1em 0;
}
.allowed_duplicate_table th,
.allowed_duplicate_table td{
	border:1px solid black;
	padding:4px;
}
.allowed_duplicate_table td:nth-child(2) {
	text-align: center;
}
.allowed_duplicate_table td:nth-of-type(3),
.allowed_duplicate_table td:nth-of-type(4) {
	word-break: break-all;
}
.allowed_duplicate_form {
    margin: 1em;
}
.allowed_duplicate_form input {
	font-size: 16px;
	padding: .3em;
	width: 20em;
}
button.allowed_duplicate_button {
	display: inline;
	width: auto;
	font-size: 1em;
}
button.allowed_duplicate_button.delete {
	background-color: hsl(18, 75%, 57%);
}
button.allowed_duplicate_button.regist {
	background-color: hsl(217, 66%, 58%);
	margin-top: .5em;
}
@media print, screen and (min-width:768px){
	#admin p{
		margin-left: 3.5em;
	}
	#admin h1 p{
		margin-left: 0;
	}
	#admin h3 {
		margin: 1em 0 0.5em 3em;
	}
	#admin .answers_title {
		margin: 1em 0 0.5em 3.5em;
	}
	.answers_table{
		width: calc(100% - 3.5em);
		margin: 0 0 0 3.5em;
	}
	.allowed_duplicate_table{
		width: calc(100% - 3.5em);
		margin: 0 0 0 3.5em;
	}
	.allowed_duplicate_form {
		margin: 1em 0 0.5em 3.5em;
	}
}

/* ヒント集 */
#hintCol{
	background-color:hsl(202, 68%, 85%);
}
#hintCol::after{
	top: calc((4em / 2) * -1);
	right: calc((4em / 2) * -1);
	width: 4em;
	height: 4em;
	background-color:hsl(202, 80%, 55%);
}
#hintCol h2{
	color:white;
	width: calc(100% - 1em);
	background-color:hsl(202, 80%, 55%);
	box-sizing: border-box;
}
#hintCol h2:not(:first-of-type){
	margin-top: 3em;
}
#hintCol h2 i{
	background-color:hsl(202, 80%, 55%);
	border:.2em solid hsl(202, 68%, 85%);
}
#hintCol h2 span{
	color: #ff8300;
	display: block;
	margin: 0 0 0 -3em;
}
#hintCol .hint .hint07_subLst dt span,
#hintCol .hint section h3 span,
#hintCol .hint dl dt span{
	color: #ff8300;
}
#hintCol .hint{
	margin-top: 1.5em;
}
#hintCol .hintRfr{
	margin-top: 2.25em;
}
#hintCol .hint ul,
#hintCol .hint ol{
	list-style: none;
	margin: 1em 0 0 1em;
	padding: 0;
}
#hintCol .hint ul li,
#hintCol .hint ol li{
	text-indent: -1em;
	margin: 0.5em 0 0 1em;
}
#hintCol .hint dl dt{
	font-weight: bold;
	margin: 2em 0 0;
}
#hintCol .hint dl dd{
	margin: 0.25em 0 0;
}
#hintCol .hint > *:not(:first-child),
#hintCol .hint section > *:not(:first-child),
#hintCol .hint section > dl dd > *:not(:first-child){
	margin-top: 1em;
}
#hintCol .hint .figureBox {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	width: 100%;
	margin: 0;
}
#hintCol .hint .figureBox li {
	width: 48%;
	margin: 1em 0 0;
}
#hintCol .hint .flxH{
	flex-direction: column;
	align-items: center;
	height: 33rem;
}
#hintCol .hint figure {
	text-align: center;
	margin: 0;
}
#hintCol .hint figure img {
	display: block;
	max-width: 100%;
	margin: 0 auto;
}
#hintCol .hint figure figcaption {
	font-weight: bold;
	font-size: 50%;
}
#hintCol .hint figure figcaption span {
	display: block;
	font-size: 75%;
	margin: 0.5em 0 0;
}
#hintCol .hint figure.figImgSml img{
	width: 75%;
}
#hintCol .hint figure.figImgSmlH img {
	width: 50%;
}
#hintCol .hint figure#figImg_Num23 img{
	width: 50%;
}
#hintCol .hint .hintBlock {
	display: block;
}
#hintCol .hint .hintBlock img {
	width: 50%;
}
#hintCol .hint .hintBlock > *:nth-child(2) {
	margin-top: 1em;
}
#hintCol .hint .figImgBox{
	display: flex;
	flex-wrap: wrap;
}
#hintCol .hint .figImgBoxSgl p,
#hintCol .hint .figImgBox p{
	text-align: center;
	font-weight: bold;
	width: 100%;
}
#hintCol .hint .figImgBox figure{
	width: 50%;
}
#hintCol .hint .hint08_chart39{
	align-items: flex-end;
}
#hintCol .hint .hint08_chart39 figure.figImgSml img{
	margin: 0 0 0 auto;
	border: 1px solid;
}
#hintCol .hint #hnt03Img{
	margin-top: 1em;
}
#hintCol .hint #hnt03Img li{
	margin: 0;
}
#hintCol .hint #hnt03Img li:nth-of-type(1){
	margin-bottom: 2em;
}
#hintCol .hint #hnt08Img li:nth-of-type(2){
	align-items: flex-end;
}
#hintCol .hint #hnt08Img li:nth-of-type(2) figcaption{
	width: 75%;
	margin: auto;
}
#hintCol .lstIndx {
	list-style: none;
	margin: 5em auto 0;
	padding: 0;
	width: 90%;
}
#hintCol .lstIndx li {
	margin: 0.5em 0 0;
}
#hintCol .lstIndx li a {
	text-decoration: none;
	color: #fff;
	display: block;
	width: 100%;
	background: #30a5e8;
	box-sizing: border-box;
	padding: 0.5em;
	transition: all 0.3s;
}
#hintCol .lstIndx li a:hover {
	opacity: 0.5;
}
#hintCol .lstIndx li a p {
	font-size: 115%;
	margin: 0;
}
#hintCol .lstIndx li a p span {
	font-size: 75%;
	margin: 0 1em 0 0;
}
#hintCol .lstIndx li a p:nth-of-type(2) {
	text-align: right;
	color: #ffff00;
}
#hintCol .hint .cmtLnk {
	color: #ff0000;
	font-weight: bold;
	margin: 2em 0 0;
}
#hintCol .hint .cmtLnk a {
	color: #0000ff;
}
#hintCol .hint table {
	width: 100%;
	border-spacing: initial;
	border-collapse: collapse;
}
#hintCol .hint table th,
#hintCol .hint table td {
	border: 1px solid #000000;
	padding: 0.25em 0.5em;
}
#hintCol .hint table th {
	font-weight: bold;
}
#hintCol .hint .caption {
	text-align: center;
	font-weight: bold;
	margin: 0.25em auto 0;
}
#hintCol .hint .cautionCol {
	font-size: 90%;
}
#hintCol .hint .cautionCol h3 {
	margin-bottom: 0;
}
#hintCol .hint .cautionCol p {
	text-indent: 0;
}
#hintCol .hint .cautionCol p:first-of-type,
#hintCol .hint .cautionCol dt:first-of-type {
	margin-top: 0;
}
#hintCol .hint .subCol h4 {
	font-size: 1em;
	border: none;
}

@media print, screen and (min-width:768px){
	#hintCol::after{
		top: calc((10em / 2) * -1);
		right: calc((10em / 2) * -1);
		width: 10em;
		height: 10em;
	}
	#hintCol h2{
		width: calc(100% - 7em);
	}
	#hintCol h2 span{
		color: #fff900;
		display: inline;
		margin: 0;
	}
	#hintCol .hint figure figcaption {
		font-size: 1em;
	}
	#hintCol .hint .hintBlock {
		display: flex;
		align-items: flex-start;
	}
	#hintCol .hint .hintBlock > *:nth-child(2) {
		margin-top: 0;
	}
	#hintCol .hint .hintBlock figure {
		width: 75em;
	}
	#hintCol .hint .hintBlock figure.figImgLrg{
		width: 100em;
	}
	#hintCol .hint .hintBlock .figImgBoxSgl{
		width: 75em;
	}
	#hintCol .hint .hintBlock .figImgBoxSgl figure{
		width: 100%;
	}
	#hintCol .hint .hintBlock img {
		width: 100%;
	}
	#hintCol .hint .hint07_block img,
	#hintCol .hint .hint07_subLst .hintBlock img {
		width: 200px;
		margin-left: 1em;
	}
	#hintCol .hint .hint07_block div,
	#hintCol .hint .hint07_subLst .hintBlock > *:not(img) {
		width: calc(100% - 200px);
	}
	#hintCol .hint #hnt08Img li:nth-of-type(2) figcaption{
		width: 100%;
		font-size: 90%;
	}
	#hintCol .hintRfr{
		margin-top: 1.5em;
	}
	#hintCol .hint dl.lstBox {
		display: flex;
		flex-wrap: wrap;
	}
	#hintCol .hint dl.lstBox dt {
		width: 5em;
		margin: 1em 0 0;
	}
	#hintCol .hint dl.lstBox dd {
		width: calc(100% - 5em);
		margin: 1em 0 0;
	}
	#hintCol .hint dl.lstBox dt:first-of-type,
	#hintCol .hint dl.lstBox dd:first-of-type {
		margin-top: 0;
	}
	#hintCol .hint dl.hint08_Lst dt{
		width: 16em;
	}
	#hintCol .hint dl.hint08_Lst dd{
		width: calc(100% - 16em);
	}
	#hintCol .lstIndx li a {
		display: flex;
		justify-content: space-between;
		padding: 0.5em 1em;
	}
	#hintCol .lstIndx li a p:nth-of-type(2) {
		text-align: left;
	}
}

/* 答え合わせ */
#chkAnsCol dl dt,
#chkAnsCol dl dd {
	margin: 0;
	padding: 0;
}
#chkAnsCol .exmpLst{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
#chkAnsCol .exmpLst dt{
	color: #ff8500;
	font-size: 1.25em;
	font-weight: bold;
	width: auto;
}
#chkAnsCol .exmpLst dd{
	width: auto;
	margin: 0 2em 0 0.5em;
}
#chkAnsCol .exmpLst dd p{
	margin: 0 1em 0 0;
}
#chkAnsCol .exmpLst span{
	font-size: 0.8em;
	line-height: 1em;
	display: inline-block;
	background: #ffffff;
	box-sizing: border-box;
	border: 1px solid #888;
	border-radius: 5px;
	margin: 0;
	padding: 0.5em;
}
#chkAnsCol .question ul{
	list-style: none;
	display: flex;
	flex-direction: column;
	align-items: baseline;
	margin: 0;
	padding: 0;
}
#chkAnsCol .question ul li{
	line-height: 1em;
	display: inline-block;
	background: #ffffff;
	box-sizing: border-box;
	border: 1px solid #888;
	border-radius: 5px;
	margin: 0.5em;
	padding: 0.5em;
}
#chkAnsCol .question ul li b{
	margin-right: 0.4em;
}
#chkAnsCol .question ul li img{
	max-width: 200px;
	max-height: 120px;
}
#chkAnsCol .question .qstLst li{
	border: none;
}
#chkAnsCol .crct{
	color: #ffffff !important;
	background-color: #ffba00 !important;
	border: 4px solid #0000ff !important;
}
#chkAnsCol .ans{
	color: #ffffff !important;
	background-color: #ffba00 !important;
}
#chkAnsCol .expl{
	color: #000000 !important;
	background-color: #ffffff !important;
	border: 4px solid #0000ff !important;
}
#chkAnsCol .question .cmtBox{
	display: block;
	width: 100%;
	background: #ffffff;
	box-sizing: border-box;
	border: 1px solid;
	border-radius: 4px;
	margin: 1em 0 0;
	padding: 0.5em;
}
#chkAnsCol .question .cmtBox h5{
	color: #000000;
	line-height: 1em;
	font-weight: bold;
	text-align: left;
	display: block;
	width: auto;
	margin: 0 0 0.5em 0;
	background: none;
}
#chkAnsCol .question .cmtBox *:not(h5){
	margin: 0.5em 0 0;
}
@media print, screen and (min-width:1000px){
	#chkAnsCol .exmpLst{
		flex-wrap: nowrap;
	}
	#chkAnsCol .exmpLst span{
		font-size: 0.95em;
	}
	#chkAnsCol .question .qstLst{
		flex-direction: row;
	}
}



.gift {
	box-sizing: border-box;
    margin: 0 auto;
	text-align: center;
}
.gift .gift-flex {
	display: block;
	padding: 1em;
}
.gift .flex-left {
	line-height: 1.6em;
}
.gift .flex-left p {
	margin: 0 0 0.5em 0;
	width: 100%;
}
.gift .gift-heading {
	font-size: 1.2em;
	text-align: center;
}
.gift .numBox{
	color: #ffffff;
	font-size: 1em;
	line-height: 1em;
	text-align: center;
	width: 7em;
	background: #cf0944;
	box-sizing: border-box;
	padding: 0.25em;
	margin: 0.5em auto;
}
.gift .how-to-get {
	border: 1px solid hsl(25, 100%, 60%);
	border-radius: 4px;
	margin: 1em 0;
}
.gift .gift-sub-heading{
	color: #ffffff;
	font-weight: bold;
	box-sizing: border-box;
	text-align: center;
	background: hsl(25, 100%, 60%);
	margin: 0;
	padding: 0.25em 0.5em;
}
.gift .how-to-get-inner {
	padding: 1em;
}
.gift .how-to-get p {
	margin: 0;
	font-size: .9em;
}
.gift .flex-right {
	text-align: center;
}
.gift img{
	width: 60%;
	margin: .5em auto;
}

@media print, screen and (min-width:1000px){
	.gift {
		width: 90%;
	}
	.gift .gift-flex {
		display: flex;
	}
	.gift .flex-left {
		width: 63%;
		margin-right: 2%;
	}
	.gift .flex-right {
		width: 35%;
	}
	.gift img{
		width: 90%;
	}
}