/*
基本オブジェクト スタイル

*/
@charset "utf-8";


* {
	margin:0;
	padding:0;
}

@media screen and (max-width:780px){
  /*画面幅が780pxまでの時*/
	.site-header {
		padding-top: 0.8em;
		padding-bottom: 0.8em;
		margin: 0;
		left:0;
	  top: 0;
		position:fixed;
		height: 40px;
	  width:100%;
	  z-index:24;
		transition: .5s;
	}
	/*本番色*/
	.site-header {
		background: #96dced;
	}

	/*試験色*/
	/*
	.site-header {
		background: #ffa9ff;
	}
	*/

	.user {
		display: flex;
		justify-content: flex-start;
		height:2em;
		margin-top: 0.5em;
		margin-left: 3em;
		margin-right: 0.1em;
		margin-bottom: 0;
	}

	.login{
		position: relative;
		font-size: 12px;
		color: black;
		background: #d0ecff;
		background: #fff;
		line-height: 1.4;
		padding: 0.3em;
		margin: 0;
		border-radius: 0 5px 5px 5px;
	}

	.login:after {/*タブ*/
	  position: absolute;
	  font-family: "Font Awesome 5 Free",'Quicksand','Avenir','Arial',sans-serif;
	  content: '\f303  E-Learning';
		background: #2196F3;
	  color: #fff;
	  left: 0px;
	  bottom: 100%;
	  border-radius: 5px 5px 0 0;
	  padding: 5px 10px 5px;
	  font-size: 0.7em;
	  line-height: 1;
	  letter-spacing: 0.05em
	}

	.logout {
		position: relative;
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	  margin-left: auto;
	  margin-right: 1em;
		bottom: 0.2em;
	  cursor:pointer;
	}

	.logout_icon {
	  padding:0;
		font-weight:900;
	  font-size: 2em;
	  color: #329863;
		text-shadow: 0px 4px 2px rgba(0, 0, 0, 0.32), 0px 1px 0px #4d7449, 0px 2px 0px #4d7449, 0px 3px 0px #4d7449;
	}

	.logout_icon:active {
		top: 3px;
		text-shadow: none;
	}

	.logout_text {
	  display: flex;
	  font-size: 0.5em;
	  font-weight: bold;
	}

	#iframeBlock{
		margin-top: 60px;
		height: calc(100vh - 100px);
	}

	h1.cont_title {
		position: relative;
		padding-left: 25px;
		font-size: 15px;
	}

	h1.cont_title:before {
		position: absolute;
		content: '';
		bottom: -3px;
		left: 0;
		width: 0;
		height: 0;
		border: none;
		border-left: solid 15px transparent;
		border-bottom: solid 15px rgb(119, 195, 223);
	}
	h1.cont_title:after {
		position: absolute;
		content: '';
		bottom: -3px;
		left: 10px;
		width: 99%;
		border-bottom: solid 3px rgb(119, 195, 223);
	}
}

@media screen and (min-width:781px){
  /*画面幅が781px以上の時*/
	.site-header {
		padding-top: 1.5em;
		padding-bottom: 0.7em;
		margin: 0;
		left:0;
	  top: 0;
		position:fixed;
		height: 60px;
	  width:100%;
	  z-index:24;
		transition: .5s;
	}
	/*本番色*/
	.site-header {
		background: #96dced;
	}

	/*試験色*/
	/*
	.site-header {
		background: #ffa9ff;
	}
	*/


	.user {
		display: flex;
		justify-content: flex-start;
		height:3em;
		margin-top: 0.5em;
		margin-left: 3em;
		margin-right: 0.1em;
		margin-bottom: 0;
	}

	.login{
	position: relative;
	color: black;
	background: #d0ecff;
	background: #fff;
	line-height: 1.4;
	padding: 0.5em;
	margin: 0;
	border-radius: 0 5px 5px 5px;
	}

	.login:after {/*タブ*/
	  position: absolute;
	  font-family: "Font Awesome 5 Free",'Quicksand','Avenir','Arial',sans-serif;
	  content: '\f303  E-Learning';
		background: #2196F3;
	  color: #fff;
	  left: 0px;
	  bottom: 100%;
	  border-radius: 5px 5px 0 0;
	  padding: 5px 10px 5px;
	  font-size: 0.7em;
	  line-height: 1;
	  letter-spacing: 0.05em
	}

	.logout {
		position: relative;
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	  margin-left: auto;
	  margin-right: 1em;
		bottom: 0.5em;
	  cursor:pointer;
	}

	.logout_icon {
	  padding:0;
		font-weight:900;
	  font-size: 3em;
	  color: #329863;
		text-shadow: 0px 4px 2px rgba(0, 0, 0, 0.32), 0px 1px 0px #4d7449, 0px 2px 0px #4d7449, 0px 3px 0px #4d7449;
	}

	.logout_icon:active {
		top: 3px;
		text-shadow: none;
	}


	.logout_text {
	  display: flex;
	  justify-content: center;
	  font-size: 13px;
	  font-weight: bold;
		color: black;
	}

	#iframeBlock{
	margin-top: 110px;
	height: calc(100vh - 130px);
	}

	h1.cont_title {
	position: relative;
	padding-left: 25px;
	}

	h1.cont_title:before {
	position: absolute;
	content: '';
	bottom: -3px;
	left: 0;
	width: 0;
	height: 0;
	border: none;
	border-left: solid 15px transparent;
	border-bottom: solid 15px rgb(119, 195, 223);
	}
	h1.cont_title:after {
	position: absolute;
	content: '';
	bottom: -3px;
	left: 10px;
	width: 99%;
	border-bottom: solid 3px rgb(119, 195, 223);
	}
}


html {
	background-color: #f5f5f5;
	height: 100%;
}


body.cont {
  font-family:Verdana, "ＭＳ Ｐゴシック", sans-serif;
  background-color: #f5f5f5;
}

/*本番色*/
body.other {
  font-family:Verdana, "ＭＳ Ｐゴシック", sans-serif;
  background-color: #ddf7ff;
}

/*試験色*/
/*
body.other {
  font-family:Verdana, "ＭＳ Ｐゴシック", sans-serif;
  background-color: #ffa9ff;
}
*/

/*
.frame_adst {
}

iframe.cont_frame {
	width: 100%;
	border: none;
}
*/


.iframeBody{
  height:100%;
}

iframe{
 border:none;
 width:100%;
 height:100%;
 padding:0;
 margin:0;
}


h1.head_title {
position: relative;
background: #5ac4ff;
padding: 0.4em;
padding-right: 0.4em;
padding-left: 1.2em;
margin: 0;
font-size: 2em;
color: #474747;
color: #fff;
border-radius: 0 10px 10px 0;
}

h1.head_title:before {
font-family: "Font Awesome 5 Free";
content: "\f303";
display: inline-block;
position: absolute;
padding: 0em;
color: white;
background: #5ac4ff;
font-weight: 900;
width: 2em;
text-align: center;
height: 2em;
line-height: 200%;
left: -1.35em;
top: 50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
border: solid 3px white;
border-radius: 50%;
}

@media screen and (max-width:780px){
	h1.main_title {
		position: relative;
		width:50vw;
		background: #5ac4ff;
		margin:auto;
		margin-top: 20vh;
		padding: 0.25em;
		padding-right: 0.4em;
		padding-left: 1.2em;
		font-size: 1em;
		color: #474747;
		color: #fff;
		border-radius: 0 10px 10px 0;
	}

	h1.main_title:before {
		font-family: "Font Awesome 5 Free";
		content: "\f303";
		display: inline-block;
		position: absolute;
		margin:auto;
		padding: 0em;
		color: white;
		background: #5ac4ff;
		font-weight: 900;
		width: 2em;
		text-align: center;
		height: 2em;
		line-height: 200%;
		left: -1.35em;
		top: 50%;
		-moz-transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
		border: solid 3px white;
		border-radius: 50%;
	}
}

@media screen and (min-width:780px){
	h1.main_title {
		position: relative;
		width:50vw;
		background: #5ac4ff;
		margin:auto;
		margin-top: 20vh;
		padding: 0.25em;
		padding-right: 0.4em;
		padding-left: 1.2em;
		font-size: 2em;
		color: #474747;
		color: #fff;
		border-radius: 0 10px 10px 0;
	}

	h1.main_title:before {
		font-family: "Font Awesome 5 Free";
		content: "\f303";
		display: inline-block;
		position: absolute;
		margin:auto;
		padding: 0em;
		color: white;
		background: #5ac4ff;
		font-weight: 900;
		width: 2em;
		text-align: center;
		height: 2em;
		line-height: 200%;
		left: -1.35em;
		top: 50%;
		-moz-transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
		border: solid 3px white;
		border-radius: 50%;
	}
}

h3 {
  color: #6594e0;/*文字色*/
  border-bottom: dashed 2px #6594e0;
  margin-top: 1em;
  margin-bottom: 1px;
}


.title {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	margin-left:auto;
	margin-right: 0.1em;
}


/* == ボタン類 ここから  ============================================================================================================*/

.normal_btn{
     width: 100px;
     height:50px;
     color: #FFF;
		 margin: 1em 0;
     text-decoration: none;
		 font-weight: bold;
     text-align: center;
     background-color: #66b1ff; /*ボタン色*/
     border-bottom: solid 6px #6696cb; /*下線色*/
     border-radius: 5px; /*角丸*/
}
.normal_btn:hover{
     background-color: #66e4ff;/*ボタン色*/
     border-bottom: solid 6px #66c9e2; /*下線色*/
}
.normal_btn:active {
     margin-top: 6px;
     border-bottom: none;
     -webkit-transform: translateY(6px);　/*下移動*/
     transform: translateY(6px);
}

.ment_button {
	margin: 0 1em;
	padding: 0.5em 1em;
	border: none;
	background-color: #5A7AB3;
	box-shadow: 0 6px #4063A4;
	font-weight: bold;
	line-height: 1;
	color: #fff;
	position: relative;
	cursor: pointer;
  border-radius: .5em;
  box-shadow: 0 6px #4063A4;
  top: 0;
  transition: .2s box-shadow,.2s top,.4s background;
}
.ment_button:hover {
    box-shadow: 0 5px #4063A4;
    top: 1px;
}
.ment_button:active {
  background-color: #4163A7;
    box-shadow: 0 0 #4063A4;
    top: 6px;
}

.test_button {
	margin: 0 1em;
	padding: 0.5em 1em;
	border: none;
	background-color: #e18c00;
	font-weight: bold;
	line-height: 1;
	color: #fff;
	cursor: pointer;
  border-radius: 1em;
  box-shadow: 0 6px #ce5915;
  top: 0;
  transition: .2s box-shadow,.2s top,.4s background;
}
.test_button:hover {
	color: #e18c00;
	background-color: white;
	box-shadow: 0 6px gray;
  top: 1px;
}
.test_button:active {
	color: #e18c00;
	background-color: white;
	box-shadow: 0 0 gray;
  top: 6px;
}

.seiseki_button {
	margin: 0 1em;
	padding: 0.5em 1em;
	border: none;
	background-color: #66d861;
	font-weight: bold;
	line-height: 1;
	color: #fff;
	cursor: pointer;
  border-radius: 1em;
  box-shadow: 0 6px #65a068;
  top: 0;
  transition: .2s box-shadow,.2s top,.4s background;
}
.seiseki_button:hover {
	color: #66d861;
	background-color: white;
	box-shadow: 0 6px gray;
  top: 1px;
}
.seiseki_button:active {
	color: #66d861;
	background-color: white;
	box-shadow: 0 0 gray;
  top: 6px;
}

.delete_button {
	margin: 0 1em;
	padding: 0.5em 1em;
	border: none;
	background-color: #d54b4d;
	box-shadow: 0 6px #984b4d;
	font-weight: bold;
	line-height: 1;
	color: #fff;
	position: relative;
	cursor: pointer;
  border-radius: .5em;
  top: 0;
  transition: .2s box-shadow,.2s top,.4s background;
}
.delete_button:hover {
    box-shadow: 0 5px #984b4d;
    top: 1px;
}
.delete_button:active {
  background-color: #d54b4d;
    box-shadow: 0 0 #984b4d;
    top: 6px;
}


.mini-button {
  display: inline-block;
	padding: 0.2em 0.3em;
	font-weight: bold;
  text-decoration: none;
  background: #4f85d5;/*ボタン色*/
  color: #FFF;
  border-bottom: solid 4px #627295;
}
.mini-button:active {
  /*ボタンを押したとき*/
  -webkit-transform: translateY(4px);
  transform: translateY(4px);/*下に動く*/
  border-bottom: none;/*線を消す*/
}

.mini-delete-button {
  display: inline-block;
	padding: 0.2em 0.3em;
	font-weight: bold;
  text-decoration: none;
  background: #ff5543;/*ボタン色*/
  color: #FFF;
  border-bottom: solid 4px #a24332;
}
.mini-delete-button:active {
  /*ボタンを押したとき*/
  -webkit-transform: translateY(4px);
  transform: translateY(4px);/*下に動く*/
  border-bottom: none;/*線を消す*/
}

.btn-square-pop {
  position: relative;
  display: inline-block;
  padding: 0.25em 0.5em;
  text-decoration: none;
  color: #FFF;
  background: #fd9535;/*背景色*/
  border-bottom: solid 2px #d27d00;/*少し濃い目の色に*/
  border-radius: 4px;/*角の丸み*/
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
  font-weight: bold;
}

.btn-square-pop:active {
  border-bottom: solid 2px #fd9535;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}

.logout_button {
}
.logout_button:before {
	font-family: "Font Awesome 5 Free";
	content: "\f303";
}


/* == ボタン類 ここまで  ============================================================================================================*/

/* == チェックボックスここから =======================================================================================================*/

label input[type="checkbox"]{
  display: none;
}
label{
  cursor: pointer;
  color: #333333;
  font-weight: normal;
  letter-spacing: 0;
  display: inline-block;
  position: relative;
	margin-right: 0.2em;
}
label .checkbox-icon:before{
  content:'';
  border: 1px solid #ddd;
  width: 20px;
  height: 20px;
  margin-right: 5px;
  display: inline-block;
  vertical-align: middle;
  border-radius: 3px;
  -webkit-transition: all 800ms cubic-bezier(1, 0, 0, 1);
  -moz-transition: all 800ms cubic-bezier(1, 0, 0, 1);
  -o-transition: all 800ms cubic-bezier(1, 0, 0, 1);
  transition: all 800ms cubic-bezier(1, 0, 0, 1);
  -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  -moz-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  -o-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  transition-timing-function: cubic-bezier(1, 0, 0, 1);
  background: #ffffff;
}
label input[type="checkbox"]:checked + .checkbox-icon:before{
  opacity: 0;
  background: #eee;
  border-color: #eee;
  transform:scale(2);
}
label .checkbox-icon:after{
  content:'';
  opacity: 0;
  position: absolute;
  left: 8px;
  top: 0px;
  width:8px;
  height: 16px;
  border-right: 2px solid #ddd;
  border-bottom: 2px solid #ddd;
  transform:rotate(-200deg);
  -webkit-transition: all 400ms cubic-bezier(1, 0, 0, 1);
  -moz-transition: all 400ms cubic-bezier(1, 0, 0, 1);
  -o-transition: all 400ms cubic-bezier(1, 0, 0, 1);
  transition: all 400ms cubic-bezier(1, 0, 0, 1);
  -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  -moz-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  -o-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  transition-timing-function: cubic-bezier(1, 0, 0, 1);
}
label input[type="checkbox"]:checked + .checkbox-icon:after{
  opacity: 1;
  position: absolute;
  left: 8px;
  top: 0px;
  width:8px;
  height: 16px;
  border-right: 2px solid #e93653;
  border-bottom: 2px solid #e93653;
  transform:rotate(40deg);
}


/* == チェックボックここまで =========================================================================================================*/


/* == ラジオボタンここから =========================================================================================================*/

.radios {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.radio {
  margin: 0.2rem;
}
.radio input[type="radio"] {
  position: absolute;
  opacity: 0;
}
.radio input[type="radio"] + .radio-label:before {
  content: '';
  background: #f4f4f4;
  border-radius: 100%;
  border: 1px solid #b4b4b4;
  display: inline-block;
  width: 1em;
  height: 1em;
  position: relative;
  top: -0.1em;
  vertical-align: top;
  cursor: pointer;
  text-align: center;
  transition: all 250ms ease;
}
.radio input[type="radio"]:checked + .radio-label:before {
  background-color: #3197EE;
  box-shadow: inset 0 0 0 4px #f4f4f4;
}
.radio input[type="radio"]:focus + .radio-label:before {
  outline: none;
  border-color: #3197EE;
}
.radio input[type="radio"]:disabled + .radio-label:before {
  box-shadow: inset 0 0 0 4px #f4f4f4;
  border-color: #b4b4b4;
  background: #b4b4b4;
}
.radio input[type="radio"] + .radio-label:empty:before {
  margin-right: 0;
}


/* == ラジオボタンここまで =========================================================================================================*/


/* == 囲み枠 ここから  ============================================================================================================*/
/*　width指定無しで画面いっぱい　*/
.box1{
		display: inline-block;
    padding: 0.5em 1em;
    margin: 2em 0;
    background: white;
    border-top: solid 5px #5d627b;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}

.p_box {
    margin: 2em 0;
    background: #fafafa;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}
.p_box .box-title {
    font-size: 1.2em;
    background: #5fc2f5;
    padding: 5px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.p_box p {
    padding: 15px 20px;
    margin: 0;
}

.box2{
    color: #5989cf;
    background: #c6e4ff;
    border-bottom: solid 6px #aac5de;
    border-radius: 9px;
}
.box2 p {
    margin: 0;
    padding: 0;
}

.hako {
  padding: 0.8em;
  background: #a5e9ff;
  border-bottom: solid 6px #aac5de;
  border-radius: 9px;
}

.hako label {
  font-weight: bold;
  color: #5989cf;
}

.siro_hako {
	padding: 0.5em 1em;
	margin: 2em 0;
color: #5d627b;
background: white;
border-top: solid 5px #5d627b;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}

/* == 囲み枠 ここまで  ============================================================================================================*/