@charset "utf-8";

/* 太字｜utility.css */
.weight_bold{
	font-weight: bolder;
}

/* 背景色 */
#stepwork1 main{
	background-color: #fceaf0;
}
#stepwork2 main{
	background-color: #e8f6f5;
}
#stepwork3 main{
	background-color: #e6ebf4;
}

.revision_pass_form .bt_submit{
	font-size: 1rem;
}

/* タイトル部 */
.titleArea{
	margin: 0;
	padding: 0;
}
.titleArea img{
	display: block;
	margin: 0 auto;
}

/* ページ幅 */
.contentArea{
	width:  960px;
	margin: 0 auto;
}
@media only screen and (max-width: 768px) {
	.contentArea{
        width: 100%;
        margin: 0 auto;
	}
}

/* タブ切り替え */
.tab-wrap {
  display: flex;
  flex-wrap: wrap;
  margin:0;
	justify-content: center;
}
.tab-wrap:after {
  content: '';
  width: 100%;
  height: 4px;
  display: block;
  order: -1;
}
#stepwork1 .tab-wrap:after {
  background: #e4306c;
	
}
#stepwork2 .tab-wrap:after {
  background: #14a9a2;
	
}
#stepwork3 .tab-wrap:after {
  background: #003a94;
	
}
.tab-label {
  background: LightGray;
  font-weight: bold;
  white-space: nowrap;
  text-align: center;
  padding: 10px .5em;
  order: -1;
  position: relative;
  z-index: 1;
  cursor: pointer;
  border-radius: 20px 20px 0 0;
 /* flex: 1;	*/
	width: 300px;
	margin-left:15px;
}
#stepwork1 .tab-label{
	color: #e4306c;
}
#stepwork2 .tab-label{
	color: #14a9a2;
}
#stepwork3 .tab-label{
	color: #003a94;
}
.tab-label:hover{
	opacity: 0.65;
}
.tab-label:last-of-type {
  margin-right: 15px;
}
.tab-content {
	display: none;
/*  height: 0;
  overflow: hidden;
  opacity: 0;
	background-color: aqua; */
}
@media only screen and (max-width: 768px) {
	.tab-label{
		width: 32%;
		padding: .65em 0 .35em;
		border-radius: .75em .75em 0 0;
		margin: 0 1% 0 0;
	}
	.tab-label:last-of-type{
		margin-right: 0;
	}
	.tab-content{
		width: 100%;
	}
}

#stepwork1 .tab-switch:checked+.tab-label{
	color: white;
	background: #e4306c;	
}
#stepwork2 .tab-switch:checked+.tab-label{
	color: white;
	background: #14a9a2;	
}
#stepwork3 .tab-switch:checked+.tab-label{
	color: white;
	background: #003a94;	
}

.tab-switch:checked+.tab-label+.tab-content {
	display: block;	/* どうしてもtab-contentの動作がおかしいのでdisplayでの制御に変更 */
	width: 960px;
  	padding: 15px;
/*  height: auto;
  overflow: auto;
  opacity: 1;
  transition: .5s opacity;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); */
}
.tab-switch {
  display: none;
}
@media only screen and (max-width: 768px) {
	.tab-switch:checked+.tab-label+.tab-content {
		width: 100%;
		padding: 2%;
	}
}

/* 練習プリントとPDFデータの表 */
th, td{
	border: solid 1px #000000;
	border-collapse: collapse;
}
tr:nth-child(2n){
	background-color: #fff;
}
table.exercise, table.pdf_data{
	width: 100%;
	margin-top: 1em;
}
table.study_log{
	width: 50%;
	margin: 1em auto 0em;;
	background-color: #fff;
}

table.exercise th, table.pdf_data th{
	background-color: lightgray;
}
table.exercise td, table.pdf_data td{
	padding: .5em 2em 0em;
	width: 25%;
}
table.study_log td{
	padding: .5em 2em 0em;
	width: 50%;
}
table.exercise .chapterTitle, table.pdf_data .chapterTitle, table.study_log .chapterTitle{
	width: 50%;
	font-weight: bold;
	padding: 0 2em;
}
@media only screen and (max-width: 768px) {
	table.exercise{
		width: 160%;
	}
	table.pdf_data{
		width: 140%;
	}
	table.study_log{
		width: 100%;
	}
	table.exercise td, table.pdf_data td{
		padding: .5em .5em 0em;
		width: auto
	}
	table.exercise .chapterTitle{
		width: 46%;
		padding: 0 1em;
	}
	table.pdf_data .chapterTitle{
		width: 40%;
		padding: 0 1em;
	}
	table.study_log .chapterTitle{
		width: 30%;
		padding: 0 1em;
	}
}
/* スクロールはtableにつけてもダメでtableの親につけないと */
@media only screen and (max-width: 768px) {
    .scroll_x{
        overflow-x: scroll;
    }
}

/* アコーディオン */
.accbox{
	width: 930px;
	margin: 1em auto 0;
}
@media only screen and (max-width: 768px) {
	.accbox{
		width: 100%;
	}
}
.accbox input{
	display: none;	/* radioのタブとちがってclass名つけずに処理してる */
}
.accbox label{
	cursor: pointer;
	display: block;
	height: 2em;
	border-radius: 1em;
	color: white;
	padding: 0.15em 1em 0;
	font-weight: bold;
	margin-bottom: 5px;
	transition: all 0.5s;
	position: relative;
}
#stepwork1 .accbox label{
	background-color: #e4306c;
}
#stepwork2 .accbox label{
	background-color: #14a9a2;
}
#stepwork3 .accbox label{
	background-color: #003a94;
}
.accbox label:hover{
	opacity: 0.65;
}
.accbox label:after{
  content:"";
  display:block;
  width:1em;
  height:1em;
  border-top: #fff 2px solid;
  border-right: #fff 2px solid;
  -webkit-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  transform: rotate(135deg);
  position:absolute;
  right: 1.25em;
  top: .15em;
  margin: auto;
}
.accbox .cssacc:checked+ label:after{
  content:"";
  display:block;
  width:1em;
  height:1em;
  border-top: #fff 2px solid;
  border-right: #fff 2px solid;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  position:absolute;
  right: 1.25em;
  top: .65em;
  margin: auto;
}
.accbox .accshow{
	height: 0;
	padding: 0;
	overflow: hidden;
	opacity: 0;
	transition: 0.5s;
	margin-bottom: 1em;
}
.accbox .cssacc:checked+label+.accshow{
	height: auto;
	padding: 0px;
	opacity: 1;
}

/* 図版集タイル */
.tiles li {
	float: left;
	width: 151px;
	height: 151px;
	margin: 2px;
	position: relative;
	background: #FFF;
	overflow: hidden;
}
.tiles li img {
	position: absolute;
}

.tiles .contents_title{
	position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 20%;
    text-align: center;
	color: #fff;
}
#stepwork1 .tiles .contents_title{
	background-color: rgba(228,48,108,0.7);
}
#stepwork2 .tiles .contents_title{
	background-color: rgba(20,169,162,0.7);
}
#stepwork3 .tiles .contents_title{
	background-color: rgba(0,58,148,0.7);
}



@media only screen and (max-width:768px) {
    .tiles li {
        width: 30vw;
        height: 30vw;
		margin: 1vw 0 0 1vw;
		font-size: 3.7vw;
    }
	.tiles .contents_title{
		line-height: 1.5em;
	}
}



/* 準備中部分 */
.not_available{
	/*
	 background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJ3aWR0aDoxMDAlO2hlaWdodDoxMDAlOyI+PGxpbmUgeDE9IjEwMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSIgc3R5bGU9InN0cm9rZTogIzMzMzMzMztzdHJva2Utd2lkdGg6IDE7Ij48L2xpbmU+PGxpbmUgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSIgc3R5bGU9InN0cm9rZTogIzMzMzMzMztzdHJva2Utd2lkdGg6IDE7Ij48L2xpbmU+PC9zdmc+');
	*/
}