@CHARSET "UTF-8";
/***************** 全体 *****************/
* {
margin: 0px;
padding: ;
}

body{
	background-color:#deeef9;
}

.clear {
    clear:both;
}

p{
	margin:auto 5%;
	line-height:150%;
	font-size:16px;
}
@media screen and (max-width:480px) {
p{
	font-size:14px;
}}

section{
   	margin:8px 0;
	padding:2% 15%;
}
@media screen and (max-width:480px) {
section{
   	margin:8px 0;
	padding:2% 0;
}}

@font-face {
  font-family: "YuGothic M";
  src: local("Yu Gothic Medium"),
       local("Yu Gothic");
  font-weight: 500;
}
p {
  font-family: "游ゴシック体", YuGothic, "YuGothic M", sans-serif;
}

hr{
	background-color: #deeef9;
	border-top: 2px dashed #62c1ce;
	margin:10px auto;
}
/***************** ヘッダー *****************/
.header_copy{
	font-size:90%;
	padding:5px 2%;
	background-color:#c8e3f7;
}
@media screen and (min-width:481px) {
img.header_logo{
	width:20%;
	margin:5px 2%;
}}
@media screen and (max-width:480px) {
	img.header_logo{
	width:30%;
	margin:5px 0;
}}
img.main_banner{
	width:100%;
	haight:60%;
}
.breadCrumb{
	background-color:#fff;
	padding:5px 2%;
	margin: auto;
}

span.header_menu{
	position:absolute;
	right:10px;
}

/***************** 見出し *****************/
h1 {
margin:10px;
padding: 0.25em 0.5em;
color: #494949;
background: transparent;
border-left: solid 5px #7db4e6;
background:linear-gradient(90deg,#c8e3f7, #deeef9);
width:90%;
}
@media screen and (max-width:480px) {
h1 {
font-size:150%;
}}

h2{
	margin:10px;
}
@media screen and (max-width:480px) {
h2{
	margin:10px;
	font-size:120%;
}}

h2.h2_index{
position: relative;
color: #158b2b;
font-size: 20px;
padding: 10px 0;
text-align: center;
margin: 1.5em 0;
}

h2.h2_index:before {
content: "";
position: absolute;
top: -8px;
left: 50%;
width: 150px;
height: 58px;
border-radius: 50%;
border: 5px solid #a6ddb0;
border-left-color: transparent;
border-right-color: transparent;
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
h2.school_card {
margin:10px;
padding: 0.25em 0.5em;
color: #494949;
background: transparent;
border-left: solid 5px #7db4e6;
background:linear-gradient(90deg,#c8e3f7, #deeef9);
width:90%;
}
@media screen and (max-width:480px) {
h2.school_card {
font-size:150%;
}}
h3{
	position: relative;
	padding: 0.6em;
	background: #ffedba;
	border-radius:10px 10px 0px 0px;
}
h3:after {
position: absolute;
content: '';
top: 100%;
left: 30px;
border: 15px solid transparent;
border-top: 15px solid #ffedba;
width: 0;
height: 0;
}
@media screen and (max-width:480px) {
h3{
	margin:10px;
	font-size:110%;
}}
h4{
	margin-top:10px;
}
/***************** メニュー *****************/
.overlayMenuBtn  {
    position: fixed;
    top: 40px;
    right: 4%;
    height: 50px;
    cursor: pointer;
    z-index: 100001;
  }
  .overlayMenuBtn span {
    position: relative;
    display: block;
    width: 40px;
    border: 3px solid #C3A572;
    transition: .5s;
  }
  .overlayMenuBtn span:nth-child(1) { top: 0; }
  .overlayMenuBtn span:nth-child(2) { top: 10px; }
  .overlayMenuBtn span:nth-child(3) { top: 20px; }

  .overlayMenu {
    display: none;
    position: fixed;
    width: 100%;
    height: 100vh;
    overflow: auto;
    background-color: rgba(255, 255, 255, 0.9);
    z-index: 100000;
  }
  .overlayMenuInner {
    padding: 10px 4% 40px 4%;
  }

  .overlayMenuHeader {
    width: 100%;
    height: 60px;
    line-height: 60px;
    color: #C3A572;
    font-size: 32px;
  }
  .overlayMenuItem ul {
    margin: 20px 0 40px 0;
    padding: 0;
    list-style-type: none;
  }
  .overlayMenuItem ul li {
    border-top: 1px solid #ccc;
  }
  .overlayMenuItem ul li:last-child {
    border-bottom: 1px solid #ccc;
  }
  .overlayMenuItem ul li a {
    display: block;
    width: 96%;
    padding: 20px 0 20px 4%;
    color: #009170;
    text-decoration: none;
    transition: .5s;
  }
  .overlayMenuItem ul li a:hover { background-color: #009170; }
  .overlayMenuItem ul li a:hover { color: #fff; }

.index_menu{
	display:block;
	text-align:center;
}

/***************** SNS *****************/
#share ul{
	width:50%;
}
#share li{
	font-size:14px;
	text-align:center;
	width:72px;
	border-radius:3px;
	list-style:none;
	margin:2% 1%;
}

#share li.share-twitter{
	background:#55acee;
	box-shadow:0 2px #2795e9;
}
#share li.share-twitter:hover{
	background:#83c3f3;
}
#share li.share-facebook{
	background:#3b5998;
	box-shadow:0 2px #2d4373;
}
#share li.share-facebook:hover{
	background:#4c70ba;
}
#share li.share-google{
	background:#dd4b39;
	box-shadow:0 2px #c23321;
}
#share li.share-google:hover{
	background:#e47365;
}
#share li.share-hatena{
	background:#2c6ebd;
	box-shadow:0 2px #225694;
}
#share li.share-hatena:hover{
	background:#4888d4;
}
#share li.share-pocket{
	background:#f13d53;
	box-shadow:0 2px #e6152f;
}
#share li.share-pocket:hover{
	background:#f26f7f;
}
#share li.share-line{
	background:#00C300;
	box-shadow:0 2px #009d00;
}
#share li.share-line:hover{
	background:#2bd92b;
}
#share a{
	display:block;
	height:27px;
	padding-top:6px;
	color:#ffffff;
	text-decoration:none;
}
#share a:hover{
	text-decoration:none;
	color:#ffffff;
}

#share {
position: relative;
overflow: hidden;
}

#share ul {
float:left;
left:50%;
position:relative;
}

#share li {
float:left;
left:-50%;
position:relative;
}

@media screen and (max-width:480px) {

#share ul {
width:80%;
float:left;
left:0;
position:relative;
}

#share li {
float:left;
left:0;
position:relative;
margin:5px 10px;
font-size:14px;
text-align:center;
width:72px;
border-radius:3px;
list-style:none;
}}
/***************** フッター *****************/
.footer{
	background-color:#c8e3f7;
}

li.footer_menu{
	list-style:none;
	margin:10px 20px;
	font-size:90%;
	left:10%;
}

li.float{
	margin:0 20px;
	float:left;
}

@media screen and (max-width:480px) {
li.footer_menu{
	list-style:none;
	margin:0;
	font-size:80%;
	left:0;
}
li.float{
	margin:auto 1%;
	float:;
}}

p.copywrite{
	text-align:center;
	font-size:80%;
	margin:10px;
}


/***************** カードメニュー *****************/
 @media screen and (min-width:481px) {
 .card {
        width: 300px;
        height:250px;
        margin: 10px auto 10px 3%;
        border-radius: 10px;
        background-color: #fff;
        box-shadow: 0 3px 6px #ccc;
        float:left;
    }}
@media screen and (max-width:480px) {
 .card {
        width: 300px;
        margin:5px 10%;
        border-radius:10px;
        background-color: #fff;
        box-shadow: 0 3px 6px #ccc;
        float:left;
    }}
    .card_img {
        width: 100%;
        height: 100px;
        object-fit: cover;
        border-radius: 5px 5px 0 0;
    }
    .card_title {
        font-size:120%;
        margin:5px;
        color: #444;
    }
    .card_link {
        padding:5px 20px;
        color: #666;
        list-style: none;
    }
/***************** 学校のカード *****************/
 @media screen and (min-width:481px) {
 .s_card {
        width: 300px;
        margin: 10px auto 10px 3%;
        border-radius: 10px;
        background-color: #fff;
        box-shadow: 0 3px 6px #ccc;
        float:left;
    }}
@media screen and (max-width:480px) {
 .s_card {
        width: 300px;
        margin:5% 10%;
        border-radius:10px;
        background-color: #fff;
        box-shadow: 0 3px 6px #ccc;
        float:left;
    }}
    .s_card_img {
        width: 100%;
        height: 200px;
        object-fit: cover;
        border-radius: 5px 5px 0 0;
    }
    .s_card_title {
        font-size:110%;
        font-weight:bold;
        margin:5px;
        color: #444;
    }
    .s_card_link {
        padding:5px 20px;
        color: #666;
        list-style: none;
    }

.cp_box *, .cp_box *:before, .cp_box *:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.cp_box {
	position: relative;
}
.cp_box label {
	position: absolute;
	z-index: 1;
	bottom: 0;
	width: 100%;
	height: 100px; /* グラデーションの高さ */
	cursor: pointer;
	text-align: center;
	/* 以下グラデーションは背景を自身のサイトに合わせて設定してください */
	background: linear-gradient(to bottom, rgba(250, 252, 252, 0) 0%, rgba(250, 252, 252, 0.95) 90%);
}
.cp_box input:checked + label {
	background: inherit; /* 開いた時にグラデーションを消す */
}
.cp_box label:after {
	line-height: 2.5rem;
	position: absolute;
	z-index: 2;
	bottom: 20px;
	left: 50%;
	width: 16rem;
	font-family: FontAwesome;
	content: '\f13a'' 続きをよむ';
	transform: translate(-50%, 0);
	letter-spacing: 0.05em;
	color: #ffffff;
	border-radius: 20px;
	background-color:#ff7c5c;
}
.cp_box input {
	display: none;
}
.cp_box .cp_container {
	overflow: hidden;
	height: 150px; /* 開く前に見えている部分の高さ */
	transition: all 0.5s;
}
.cp_box input:checked + label {
	/* display: none ; 閉じるボタンを消す場合解放 */
}
.cp_box input:checked + label:after {
	font-family: FontAwesome;
	content: '\f139'' 閉じる';
}
.cp_box input:checked ~ .cp_container {
	height: auto;
	padding-bottom: 80px; /* 閉じるボタンのbottomからの位置 */
	transition: all 0.5s;
}
.s_card_btn{
    display: inline-block;
    padding: 0.5em 1em;
    text-decoration: none;
    background: #f7f7f7;
    border-left: solid 6px #ff7c5c;/*左線*/
    color: #ff7c5c;/*文字色*/
    font-weight: bold;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
    margin:10px;
    width:200px;
}
.s_card_btn:hover {
    box-shadow: inset 0 0 2px rgba(128, 128, 128, 0.1);
    transform: translateY(2px);
}
/***************** 設問ページ *****************/
.q_label{
	cursor : pointer;
}
.red{
	color:red;
}
article.ans_article{
	width:90%;
	margin:3% auto;
	background-color:#cfe7f7;
    position: relative;
    margin: 4em auto;
    padding: 0.5em 1em;
    border: solid 3px #62c1ce;
}

article.ans_article .box-title {
    position: absolute;
    display: inline-block;
    top: -35px;
    left: -3px;
    padding: 5px 12px;
    height: 25px;
    line-height: 25px;
    vertical-align: middle;
    font-size: 17px;
    background: #62c1ce;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}

article.ans_article p {
    margin: 0;
    padding: 0;
}
}

.cp_ipradio {
	width: 90%;
	margin: 2em auto;
	text-align: left;
}

.q_img{
	width:400px;
}
@media screen and (max-width:480px) {
.q_img{
	width:90%;
}}
@keyframes click-wave {
	0% {
		position: relative;
		width: 30px;
		height: 30px;
		opacity: 0.35;
	}
	100% {
		width: 200px;
		height: 200px;
		margin-top: -80px;
		margin-left: -80px;
		opacity: 0;
	}
}
.cp_ipradio .option-input {
	position: relative;
	position: relative;
	top: 13.33333px;
	right: 0;
	bottom: 0;
	left: 0;
	width: 30px;
	height: 30px;
	margin-right: 0.5rem;
	cursor: pointer;
	transition: all 0.15s ease-out 0s;
	color: #ffffff;
	border: none;
	outline: none;
	background: #d7cbcb;
	-webkit-appearance: none;
	        appearance: none;
}
.cp_ipradio .option-input:hover {
	background: #d6a9a9;
}
.cp_ipradio .option-input:checked {
	background: #da3c41;
}
.cp_ipradio .option-input:checked::before {
	font-size: 20px;
	line-height: 30px;
	position: absolute;
	display: inline-block;
	width: 30px;
	height: 30px;
	content: '✔';
	text-align: center;
}
.cp_ipradio .option-input:checked::after {
	position: relative;
	display: block;
	content: '';
	-webkit-animation: click-wave 0.65s;
	        animation: click-wave 0.65s;
	background: #da3c41;
}
.cp_ipradio .option-input.radio {
	border-radius: 50%;
}
.cp_ipradio .option-input.radio::after {
	border-radius: 50%;
}
.cp_ipradio label {
	line-height: 40px;
	display: block;
}
.cp_ipradio .option-input:disabled {
	cursor: not-allowed;
	background: #b8b7b7;
}
.cp_ipradio .option-input:disabled::before {
	font-size: 20px;
	line-height: 30px;
	position: absolute;
	display: inline-block;
	width: 30px;
	height: 30px;
	content: '✖︎';
	text-align: center;
}
.cp_ipradio .disabled {
	color: #9e9e9e;
}
input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}
.grading_btn{
	display:inline-block;
	border-radius:10%;
	font-size:18pt;
	text-align:center;
	cursor: pointer;
	padding:20px 71px;
	background: #2795e9;
	color:#ffffff;
	line-height:1em;
	transition:.5s;
	box-shadow: 3px 3px 3px #666666;
	border: 2px solid #2795e9;
	margin:auto auto 2% 35%;
}
@media screen and (max-width:480px) {
.grading_btn{
	margin:auto auto 2% 18%;
}}
.grading_btn:hover {
	box-shadow: none;
	color:#2795e9;
	background: #dbefff;
}
/***************** 試験選択ページのボタン *****************/
.exam_btn{
    display: inline-block;
    padding: 0.5em 1em;
    text-decoration: none;
    background: #f7f7f7;
    border-left: solid 6px #ff7c5c;/*左線*/
    color: #ff7c5c;/*文字色*/
    font-weight: bold;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
    margin:10px;
}
.exam_btn:hover {
    box-shadow: inset 0 0 2px rgba(128, 128, 128, 0.1);
    transform: translateY(2px);
}

ul.exam_select{
  background: #f1f8ff;
  box-shadow: 0px 0px 0px 10px #f1f8ff;/*線の外側*/
  border: dashed 2px #668ad8;/*破線*/
  border-radius: 9px;
  margin-left: 10px;/*はみ出ないように調整*/
  margin-right: 10px;/*はみ出ないように調整*/
  padding: 0.5em 0.5em 0.5em 2em;
}

ul li.exam_select{
  line-height: 1.5;
  padding: 0.5em 0;
}

/***************** 解答ページのボタン *****************/
.commentary{
 background-color: #fff;
 border: 2px solid #f3cbd0;
 border-radius: 5px;
 margin: 40px 5px 5px 20px;
 padding: 20px 20px 10px 20px;
 position: relative;
}
.commentary:before{
 background-color: #ef858c;
 border-radius: 5px;
 color: #fff;
 content: '解説';
 font-weight:bold;
 padding: 5px 20px;
 position: absolute;
 left: -10px;
 top: -20px;
}
.commentary:after{
 border-top: 12px solid #ef858c;
 border-right: 12px solid transparent;
 border-left: 12px solid transparent;
 content: '';
 position: absolute;
 top: 10px;
 left: 15px;
}

.part_line{
    position: relative;
    display: inline-block;
    font-weight:bold;
    padding: 0.25em 0.5em;
    text-decoration: none;
    border-bottom: solid 3px #ef857d;
    border-left: solid 3px #ef857d;
    color: #ef857d;
    transition: .4s;
    margin-top:20px;
    }

.part_line:hover {
    padding-left: 0.7em;
    padding-right: 0.3em;
}

.comment_toko{
	text-align:right;
}

.kokuban {
    font-family: HuiFontP109;
    color: #fff;
    background-color: #114400;
    margin: 10px 0 10px 0;
    padding: 15px;
    border: 9px solid #a60;
    border-radius: 3px;
    box-shadow: 2px 2px 4px #666, 2px 2px 2px #111 inset;
    text-shadow: 0px 0px 2px #000;
    line-height: 1.9;
}
.result{
    color: #ffb1b3;
    font-weight: bold;
    border: 3px solid #ffb1b3;
    padding:5px;
    margin:10px;
}

.result_com{
	margin:15px;
	font-weight:bold;
	font-size:250%;
	text-align:center;
}
.restart_btn{
    display: inline-block;
    padding: 0.5em 1em;
    text-decoration: none;
    color: #fff;
    border: solid 2px #ffb1b3;
    border-radius: 3px;
    font-weight:bold;
}
.restart_btn:hover {
    -ms-transform: translateY(4px);
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
    border: solid 2px #ffb1b3;
    background: #ffb1b3;
}
.restart_p{
	text-align:right;
}

.user_ans{
	margin:10px auto !important;
}
/******ツイートボタン******/
.flat_ss {
    color: #484848;
    display: inline-block;
    height: 50px;
    font-size: 25px;
    line-height: 50px;
    vertical-align: middle;
    background: #eaeef1;
    text-decoration: none;
    margin: 1em;
}

.flat_ss .iconback{
    display: inline-block;
    width: 50px;
    height: 50px;
    text-align: center;
    color: white;
    margin-right:10px;
}
.flat_ss .iconback .fa{
    font-size: 25px;
    line-height: 50px;
}
.flat_ss .iconback .fa{
	transition: .3s;
}

.flat_ss .btnttl{
    display: inline-block;
    text-align: center;
    vertical-align:middle;
    margin:auto 15px;
}

.flat_ss .tw {background:#1da1f3}
.flat_ss:hover .iconback .fa{
    -webkit-transform: rotateX(360deg);
    -ms-transform: rotateX(360deg);
    transform: rotateX(360deg);
}
.result_tweet{
	inline:block;
	text-align:center;
}

/**************得点ランキング遷移ボタン******************/
.rank_btn{
    display: inline-block;
    padding: 0.5em 1em;
    text-decoration: none;
    background: #f7f7f7;
    border-left: solid 30px #ff7c5c;/*左線*/
    color: #ff7c5c;/*文字色*/
    font-weight: bold;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
    margin:10px;
    line-height: 22px;
    font-size: 22px;
}
.rank_btn:hover {
    box-shadow: inset 0 0 2px rgba(128, 128, 128, 0.1);
    transform: translateY(2px);
}
/***************** 解説投稿ページ *****************/
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);

#feedback-page{
    text-align:center;
}

#form-main{
    width:100%;
    padding-top:0px;
}

#form-div {
    padding-left:15px;
    padding-right:15px;
    padding-top:15px;
    padding-bottom:20px;
    width: 90%;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
}

.feedback-input {
    color:#3c3c3c;
    font-family: Helvetica, Arial, sans-serif;
  	font-weight:500;
    font-size: 14px;
    border-radius: 0;
    line-height: 22px;
    background-color: #fbfbfb;
    padding: 13px 13px 13px 54px;
    margin-bottom: 10px;
    width:100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
  border: 3px solid rgba(0,0,0,0);
}

.feedback-input:focus{
    background: #fff;
    box-shadow: 0;
    border: 3px solid #3498db;
    color: #3498db;
    outline: none;
  padding: 13px 13px 13px 54px;
}

.feedback-confirm {
    color:#3c3c3c;
    font-family: Helvetica, Arial, sans-serif;
  	font-weight:500;
    font-size: 14px;
    border-radius: 0;
    line-height: 40px;
    padding: 13px 13px 13px 54px;
    width:80%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
  	border: 3px solid rgba(0,0,0,0);
}
.feedback-confirm-com{
    line-height: 40px;
}
.feedback-confirm label{
	margin:5px 10px auto 50px;
}

.focused{
    color:#62c1ce;
    border:#62c1ce solid 2px;
}

/* Icons ---------------------------------- */
#name{
    background-image: url(http://rexkirby.com/kirbyandson/images/name.svg);
    background-size: 30px 30px;
    background-position: 11px 8px;
    background-repeat: no-repeat;
}

#name:focus{
    background-image: url(http://rexkirby.com/kirbyandson/images/name.svg);
    background-size: 30px 30px;
    background-position: 8px 5px;
  	background-position: 11px 8px;
    background-repeat: no-repeat;
}

#mail{
    background-image: url(http://rexkirby.com/kirbyandson/images/email.svg);
    background-size: 30px 30px;
    background-position: 11px 8px;
    background-repeat: no-repeat;
}

#mail:focus{
    background-image: url(http://rexkirby.com/kirbyandson/images/email.svg);
    background-size: 30px 30px;
  background-position: 11px 8px;
    background-repeat: no-repeat;
}

#comment{
    background-image: url(http://rexkirby.com/kirbyandson/images/comment.svg);
    background-size: 30px 30px;
    background-position: 11px 8px;
    background-repeat: no-repeat;
}

#button-blue{
    width:60%;
    height:60px;
    border: #fbfbfb solid 4px;
    cursor:pointer;
    background-color: #62c1ce;
    color:white;
    font-size:20px;
    padding-top:10px;
    padding-bottom:10px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
  	margin-top:20px;
  	font-weight:600;
  	text-align:center;
}
@media screen and (max-width:480px) {
#button-blue{
	font-size:16px;
}}
#button-blue:hover{
    color: #62c1ce;
    background-color: #fbfbfb;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -o-transition: .3s;
    -ms-transition: .3s;
    transition: .3s;
}
.submit{
	text-align:center;
}
#confirm-blue{
    width:100px;
    height:40px;
    border: #fbfbfb solid 2px;
    cursor:pointer;
    background-color: #62c1ce;
    color:white;
    font-size:16px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
  	margin:10px;
  	font-weight:500;
  	text-align:center;
}
@media screen and (max-width:480px) {
#confirm-blue{
	font-size:16px;
}}
button#confirm-blue{
	float:left;
}
#confirm-blue:hover{
    color: #62c1ce;
    background-color: #fbfbfb;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -o-transition: .3s;
    -ms-transition: .3s;
    transition: .3s;
}
@media screen and (max-width:500px) {
.sp_center{
	display:block;
	margin-left:15px;
	text-align:center;
}}

@media only screen and (max-width: 580px) {
    #form-div{
        left: 3%;
        margin-right: 3%;
        width: 88%;
        margin-left: 0;
        padding-left: 3%;
        padding-right: 3%;
    }
}

#confirm-blue_thanks{
    width:120px;
    height:40px;
    border: #fbfbfb solid 2px;
    cursor:pointer;
    background-color: #62c1ce;
    color:white;
    font-size:14px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
  	margin:10px;
  	font-weight:400;
  	text-align:center;
}
@media screen and (max-width:500px) {
#confirm-blue_thanks{
	font-size:14px;
}}

#confirm-blue_thanks:hover{
    color: #62c1ce;
    background-color: #fbfbfb;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -o-transition: .3s;
    -ms-transition: .3s;
    transition: .3s;
}

/***************** 得点ランキングのテーブル *****************/
table.user_rank{
  border-collapse: separate;
  border-spacing: 0px 5px;
  margin: 0 auto;
  width:90%;
}
td,th.user_rank{
  padding: 10px;
}
th.user_rank{
  background: #10a0e0;
  color: #fff;
  border-right:solid 3px;
}
td.user_rank{
  background: #f1fafe;
}
button.user_rank{
	display:block;
	margin: 15px auto;
	width:80%;
}
@media screen and (min-width:500px) {
table.user_rank{
  width:70%;
}
button.user_rank{
	width:40%;
}}

/***************** 間違った時の色 *****************/
article.back_incorrect {background:#f5dfe1; border:solid 3px #ef858c;} /*背景と枠線*/
.sbox_incorrect {background:#ef858c !important;} /*問とかの箱の中*/
.hr_incorrect {border-top:2px dashed #ef858c;} /*罫線*/
.com_incorrect::before {background-color:#62c1ce;} /*解説の箱の中*/
.com_incorrect::after {border-top:solid 12px #62c1ce;} /*解説の下矢印*/
.com_incorrect {border:2px solid #62c1ce;} /*解説の枠線*/
.part_incorrect {border-bottom:solid 3px #62c1ce; border-left:solid 3px #62c1ce; color:#62c1ce;} /*解説フォームリンク*/