/*
body::-webkit-scrollbar {
    display:none;
}
*/
header, #main {
	padding : 0px 5px 0px 5px;
}
/*カート
-------------------------------*/
.cart {
	font-size:1.2rem;
	padding:5px;
	/*border:1px solid #ff7700;*/
	border:1px solid #00a5e3;
	position:relative;
	line-height:1.4;
}
.cartbtn {
	display:inline-block;
	font-size:1.8rem;
	/*background:#ff7700;*/
	background:#ee6699;
	color:#ffffff;
	padding:8px 20px;
	border-radius:6px;
}

/*ログイン
-------------------------------*/
.login {
	font-size:1.8rem;
	padding:5px;
	border:1px solid #ff7700;
	position:relative;
}
.loginbtn {
	display:inline-block;
	font-size:1.8rem;
	background:#ff7700;
	color:#ffffff;
	padding:8px 20px;
	border-radius:6px;
}
.box {
    padding:10px;
	text-align:center;
}
.cl-red {color:#f00;}
.cl-gray {color: gray}
.cl-skyblue {color: skyblue}
.cl-orange {color: #fecb81}

.login div.recomend{
	border-color:#999999;
}
.login div.recomend h5{
	font-size:1.8rem;
	padding-bottom:5px;
}
.login div.recomend hr{
	margin:10px 0;
}
.login div.recomend h6{
	text-align:right;
	margin-top:5px;
}
.login div.recomend a{
	position:static;
}

/*下線のみのテーブルで、THは色付き
---------------------------------*/
.tbl_11{
	margin:10px auto;
}
.tbl_11 td,
.tbl_11 th{
	padding:10px 15px 5px 15px;
	font-size:1.6rem;
	vertical-align:middle;
	border-top:1px solid #dddddd;
	border-bottom:1px solid #dddddd;
	border-right:1px solid #dddddd;
}
.tbl_11 th{
	background:#dddddd;
	border-bottom:2px solid #ffffff;
	font-weight:400;
}

#kznm {
	font-size:2rem;
	line-height:3rem;
	margin-bottom:5px;
}

#mymenu ul{
	display:flex;
	flex-wrap:wrap;
	max-width:1080px;
	margin:0 auto;
}
#mymenu ul li{
	width:33%;
	font-size:1.6rem;
	line-height:2.7rem;
}
#mymenu ul li a.fr-red{
	border:1px solid #dd0000;
	padding-left:5px;
	padding-right:5px;
}
#mymenu ul li a{
	border:1px solid #ffffff;
}
.mybtn {
	position:relative;
	display:inline-block;
	border-radius: 5px;
	text-align:center;
	line-height:1em;
	padding:8px 0 8px;
	cursor: pointer;
	font-size:12pt;
	border:1px solid #ffffff;
	/* font-weight:bold; */
	min-width:160px;
}
.mybtn-icon-right{
  position: absolute;
  top: 50%;
  right: 10px;
  width: 13px;
  transform: translateY(-50%);
}
.mybtn-icon-left{
  position: absolute;
  top: 50%;
  left: 10px;
  width: 13px;
  transform: translateY(-50%);
}

a.mybtn {
	text-decoration: none;
}


.col-head-type1 {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
}
 
.col-head-type1 th,
.col-head-type1 td {
  border: 1px solid #dbe1e8;  
  padding: 8px;
  text-align: left;
  font-size:14px;
}

.col-head-type1 th {
  background: #f9fafc;
  text-align: left;
  min-width: 200px;
  width: 120px;
}


@media only screen and (max-width: 800px) {
  .col-head-type1 tr,
  .col-head-type1 th,
  .col-head-type1 td {
    display: block;
    width: auto;
  }
  
  .col-head-type1 tr:first-child {
    border-top: 1px solid #dbe1e8;  
  }
  
  .col-head-type1 th,
  .col-head-type1 td {
    border-top: none;
  }
  .col-head-type1 input[type='text'],
  .col-head-type1 textarea {
    width: 100%;
    padding:4px;
    box-sizing: border-box;
  }
}

.Scrollable{
    overflow:auto;
    white-space:nowrap;
    -webkit-overflow-scrolling:touch
}
.table2 {
  border-collapse: collapse;
  vertical-align: middle;
  width: 100%;
}
.table2 th,
.table2 td {
  border: 1px solid #dbe1e8;  
  padding: 8px;
  text-align:left;
}
.table2 th {
  background: #f9fafc;
}


.video #control {
	font-size:1.4rem;
	margin:0 auto;
	/* border:1px solid #00f; */
	text-align:center;
}
.video #control ul{
	display:flex;
	flex-wrap:wrap;
	justify-content: center;
	/* border:1px solid #f00; */
    list-style-type: none;
	padding-left: 0;
}
.video #control ul li{
	padding: 10px;
	margin: 10px;
}
.video #control p{
	padding: 5px;
	/* border:1px solid #f00; */
}
.video #control p a{
	padding: 10px;
	/* border:1px solid #f00; */
}

.video #mykoza div{
	/* border:1px solid #ff7700; */
	/* padding:10px; */
	/* margin:10px 0; */
	position:relative;
}
.video #mykoza div h4{
	font-size:1.4rem;
	padding:0 0 0 35px;
	margin:0 0 10px 0;
	position:relative;
}
.video #mykoza div h4::before{
	content: "\f04b";
	font-family: "Font Awesome 5 Free";
	font-weight:900;
	position:absolute;
	top:20%;
	left:10px;
	color:#22aaff;
}
.video #mykoza div p{
	padding:0 0 0 35px;
	font-size:1.2rem;
	line-height:1.8;
}

/*
 講座
*/
.koza{
	border:1px solid #ff7700;
	padding:10px;
	margin:10px 0 10px 0;
}
.koza #mykoza div{
	border:1px solid #ff7700;
	padding:10px;
	margin:10px 0 10px 0;
}
.koza #mykoza h3{
	font-size:1.8rem;
	color:#336699;
	font-weight:500;
	margin:0 0 10px 0;
	padding:0 0 0 35px;
	position:relative;
}
.koza #mykoza h3::before{
	content: "\f044";
	font-family: "Font Awesome 5 Free";
	font-weight:900;
	position:absolute;
	top:2px;
	left:10px;
}
.koza #mykoza h3 i{
	margin-right:10px;
}
.koza #mykoza p{
	border-bottom:1px solid #666666;
	font-size:1.4rem;
	margin:0 0 5px 0;
	padding:5px 0;
}
.koza #mykoza p a{
	display:inline-block;
	color:#ffffff;
	padding:3px;
	font-size:1rem;
	background:#ff7700;
	border-radius:2px;
	float:right;
}
.koza #mykoza dl{
	width:85%;
	margin:10px auto;
	display:flex;
	flex-wrap:wrap;
	border:1px solid #999999;
}
.koza #mykoza dl dt{
	width:30%;
	background:#dddddd;
	padding:8px;
}
.koza #mykoza dl dd{
	width:70%;
	padding:8px;
}


/*
単元
------------------------------ */
/*講座一覧
-------------------------------*/
.tangen .kaid {
    background: #22aaff;
    color: #ffffff;
    font-size:1.4rem;
    border-bottom:1px solid #ffffff;
    display: block;
    padding: 10px;
}

.tangen input{
    display: none;
}
.tangen label{
    background: #cccccc;
    color: #ffffff;
    font-size:1.4rem;
    border-bottom:1px solid #ffffff;
    display: block;
    padding: 10px;
    position:relative;
}
.tangen label::after{
	content: "\f067";
	font-family: "Font Awesome 5 Free";
	font-weight:900;
	position:absolute;
	top:33%;
	right:10%;
}
.tangen ul{
    display:none;
}
.tangen input:checked + label + ul{
    display:block;
}
.tangen ul li a{
	display:block;
	border-bottom:1px solid #999999;
	font-size:1.4rem;
	padding:10px 0 10px 35px;
    width:100%;
    position:relative;
}
.tangen ul li a::before{
	content: "\f249";
	font-family: "Font Awesome 5 Free";
	font-weight:400;
	position:absolute;
	top:33%;
	left:10px;
}
.tangen ul li a::after{
	content: "\f054";
	font-family: "Font Awesome 5 Free";
	font-weight:900;
	color:#22aaff;
	position:absolute;
	top:33%;
	right:10px;
}