/* clearfix */

.clear {
clear:both;
font-size:1px;
color:#ffffff;
}
.clearfix { display: inline-block; zoom: 1; }
.clearfix { display: block; }
.clearfix:after {
content: ".";
display: block;
clear: both;
height: 0;
line-height:0;
font-size: 0;
visibility: hidden;
}

* { margin: 0; padding: 0; }

.clearfix {
    zoom: 1; /* for IE6/7 */
}

/* Hides from IE-mac */
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */

html{
background-color:#FFFFFF;
margin: 0 auto;
scroll-behavior: smooth;
height: 100%;
}

body{
margin: 10px auto;
background-color: #FFF;
}

/* header */

header{
max-width: 1000px;
margin: 0 auto;
margin-bottom: 20px;
border-bottom: 25px solid #610B0B;
}

section{
margin: 0 auto;
max-width: 1000px;
line-height: 240%;
font-size: 90%;
}

.h1-a  {
  color: #000000;/*文字色*/
  padding: 1.0em 0;/*上下の余白*/
  border-top: solid 3px #800000;/*上線*/
  border-bottom: solid 3px #800000;/*下線*/
  margin:10px;
  font-weight: bold;
  font-size:120%;
}
.h3-a  {
  width: 97%;
  color: #000000;/*文字色*/
  padding: 0.3em 0;/*上下の余白*/
  border-bottom: dotted 2px #800000;/*下線*/
  margin:5px auto;
  font-weight: bold;
  font-size:100%;
}
.h3-text{
  width: 94%;
  background-color: #dcdcdc;
  margin: 5px auto;
  padding: 5px 10px 5px 10px;
}

a{
text-decoration: none;
padding: 5px;
font-weight: bold;
transition: 0.5s;
color: #000080;
}
a:hover{
opacity: 0.8;
}
a:visited{
color: #000080;
}
a img{
margin: 0 auto;
vertical-align: baseline;
}

.area-link{
display: flex;
flex-wrap: wrap;
}
.area-link a{
width: 30%;
display: block;
border: 1px solid #CCC;
border-radius: 5px;
margin: 10px;
padding: 5px;
text-align: center;
color: #FFF;
background-color: #666;
}
.area-link a:hover{
background-color: #333;
}

.tab_contents {
	width: 100%;
	margin-top: 40px;
}

.tab_wrap {
	width: 95%;
	margin: 10px auto;
	opacity: 0.8;
}

/*タブボタンデザイン*/
label{
	background: #666;
	color: #fff;
	padding: 7px 10px 7px 10px;
	font-weight: bold;
	border-radius: 5px 5px 0px 0px;
	width: 20%;
}

/*タブにチェック入ったとき*/
#tab1-1:checked~.tab_lab1-1 { background: #ffdead; color: #242424; }
#tab1-2:checked~.tab_lab1-2 { background: #ffdead; color: #242424; }
#tab1-3:checked~.tab_lab1-3 { background: #ffdead; color: #242424; }
#tab1-4:checked~.tab_lab1-4 { background: #ffdead; color: #242424; }
#tab1-5:checked~.tab_lab1-5 { background: #ffdead; color: #242424; }
#tab1-6:checked~.tab_lab1-6 { background: #ffdead; color: #242424; }
#tab1-7:checked~.tab_lab1-7 { background: #ffdead; color: #242424; }
#tab1-8:checked~.tab_lab1-8 { background: #ffdead; color: #242424; }

#tab9-1:checked~.tab_lab9-1 { background: #eee8aa; color: #242424; }

#tab2-1:checked~.tab_lab2-1 { background: #ffdead; color: #242424; }
#tab2-2:checked~.tab_lab2-2 { background: #ffdead; color: #242424; }
#tab2-3:checked~.tab_lab2-3 { background: #ffdead; color: #242424; }
#tab2-4:checked~.tab_lab2-4 { background: #ffdead; color: #242424; }
#tab2-5:checked~.tab_lab2-5 { background: #ffdead; color: #242424; }
#tab2-6:checked~.tab_lab2-6 { background: #ffdead; color: #242424; }
#tab2-7:checked~.tab_lab2-7 { background: #ffdead; color: #242424; }
#tab2-8:checked~.tab_lab2-8 { background: #ffdead; color: #242424; }
#tab2-9:checked~.tab_lab2-9 { background: #ffdead; color: #242424; }
#tab2-10:checked~.tab_lab2-10 { background: #ffdead; color: #242424; }
#tab2-11:checked~.tab_lab2-11 { background: #ffdead; color: #242424; }
#tab2-12:checked~.tab_lab2-12 { background: #ffdead; color: #242424; }

#tab3-1:checked~.tab_lab3-1 { background: #eee8aa; color: #242424; }
#tab3-2:checked~.tab_lab3-2 { background: #eee8aa; color: #242424; }
#tab3-3:checked~.tab_lab3-3 { background: #eee8aa; color: #242424; }
#tab3-4:checked~.tab_lab3-4 { background: #eee8aa; color: #242424; }
#tab3-5:checked~.tab_lab3-5 { background: #eee8aa; color: #242424; }
#tab3-6:checked~.tab_lab3-6 { background: #eee8aa; color: #242424; }

#tab4-1:checked~.tab_lab4-1 { background: #ffdead; color: #242424; }
#tab4-2:checked~.tab_lab4-2 { background: #ffdead; color: #242424; }
#tab4-3:checked~.tab_lab4-3 { background: #ffdead; color: #242424; }
#tab4-4:checked~.tab_lab4-4 { background: #ffdead; color: #242424; }
#tab4-5:checked~.tab_lab4-5 { background: #ffdead; color: #242424; }
#tab4-6:checked~.tab_lab4-6 { background: #ffdead; color: #242424; }
#tab4-7:checked~.tab_lab4-7 { background: #ffdead; color: #242424; }

#tab5-1:checked~.tab_lab5-1 { background: #eee8aa; color: #242424; }
#tab5-2:checked~.tab_lab5-2 { background: #eee8aa; color: #242424; }
#tab5-3:checked~.tab_lab5-3 { background: #eee8aa; color: #242424; }
#tab5-4:checked~.tab_lab5-4 { background: #eee8aa; color: #242424; }
#tab5-5:checked~.tab_lab5-5 { background: #eee8aa; color: #242424; }
#tab5-6:checked~.tab_lab5-6 { background: #eee8aa; color: #242424; }
#tab5-7:checked~.tab_lab5-7 { background: #eee8aa; color: #242424; }

#tab6-1:checked~.tab_lab6-1 { background: #ffdead; color: #242424; }
#tab6-2:checked~.tab_lab6-2 { background: #ffdead; color: #242424; }
#tab6-3:checked~.tab_lab6-3 { background: #ffdead; color: #242424; }
#tab6-4:checked~.tab_lab6-4 { background: #ffdead; color: #242424; }
#tab6-5:checked~.tab_lab6-5 { background: #ffdead; color: #242424; }
#tab6-6:checked~.tab_lab6-6 { background: #ffdead; color: #242424; }

#tab7-1:checked~.tab_lab7-1 { background: #eee8aa; color: #242424; }
#tab7-2:checked~.tab_lab7-2 { background: #eee8aa; color: #242424; }

#tab8-1:checked~.tab_lab8-1 { background: #ffdead; color: #242424; }
#tab8-2:checked~.tab_lab8-2 { background: #ffdead; color: #242424; }
#tab8-3:checked~.tab_lab8-3 { background: #ffdead; color: #242424; }


/*タブボタンとボックス連動*/
#tab1-1:checked~.panels #area1-1 { display: block; background: #ffdead; }
#tab1-2:checked~.panels #area1-2 { display: block; background: #ffdead; }
#tab1-3:checked~.panels #area1-3 { display: block; background: #ffdead; }
#tab1-4:checked~.panels #area1-4 { display: block; background: #ffdead; }
#tab1-5:checked~.panels #area1-5 { display: block; background: #ffdead; }
#tab1-6:checked~.panels #area1-6 { display: block; background: #ffdead; }
#tab1-7:checked~.panels #area1-7 { display: block; background: #ffdead; }
#tab1-8:checked~.panels #area1-8 { display: block; background: #ffdead; }

#tab9-1:checked~.panels #area9-1 { display: block; background: #eee8aa; }

#tab2-1:checked~.panels #area2-1 { display: block; background: #ffdead; }
#tab2-2:checked~.panels #area2-2 { display: block; background: #ffdead; }
#tab2-3:checked~.panels #area2-3 { display: block; background: #ffdead; }
#tab2-4:checked~.panels #area2-4 { display: block; background: #ffdead; }
#tab2-5:checked~.panels #area2-5 { display: block; background: #ffdead; }
#tab2-6:checked~.panels #area2-6 { display: block; background: #ffdead; }
#tab2-7:checked~.panels #area2-7 { display: block; background: #ffdead; }
#tab2-8:checked~.panels #area2-8 { display: block; background: #ffdead; }
#tab2-9:checked~.panels #area2-9 { display: block; background: #ffdead; }
#tab2-10:checked~.panels #area2-10 { display: block; background: #ffdead; }
#tab2-11:checked~.panels #area2-11 { display: block; background: #ffdead; }
#tab2-12:checked~.panels #area2-12 { display: block; background: #ffdead; }

#tab3-1:checked~.panels #area3-1 { display: block; background: #eee8aa; }
#tab3-2:checked~.panels #area3-2 { display: block; background: #eee8aa; }
#tab3-3:checked~.panels #area3-3 { display: block; background: #eee8aa; }
#tab3-4:checked~.panels #area3-4 { display: block; background: #eee8aa; }
#tab3-5:checked~.panels #area3-5 { display: block; background: #eee8aa; }
#tab3-6:checked~.panels #area3-6 { display: block; background: #eee8aa; }

#tab4-1:checked~.panels #area4-1 { display: block; background: #ffdead; }
#tab4-2:checked~.panels #area4-2 { display: block; background: #ffdead; }
#tab4-3:checked~.panels #area4-3 { display: block; background: #ffdead; }
#tab4-4:checked~.panels #area4-4 { display: block; background: #ffdead; }
#tab4-5:checked~.panels #area4-5 { display: block; background: #ffdead; }
#tab4-6:checked~.panels #area4-6 { display: block; background: #ffdead; }
#tab4-7:checked~.panels #area4-7 { display: block; background: #ffdead; }

#tab5-1:checked~.panels #area5-1 { display: block; background: #eee8aa; }
#tab5-2:checked~.panels #area5-2 { display: block; background: #eee8aa; }
#tab5-3:checked~.panels #area5-3 { display: block; background: #eee8aa; }
#tab5-4:checked~.panels #area5-4 { display: block; background: #eee8aa; }
#tab5-5:checked~.panels #area5-5 { display: block; background: #eee8aa; }
#tab5-6:checked~.panels #area5-6 { display: block; background: #eee8aa; }
#tab5-7:checked~.panels #area5-7 { display: block; background: #eee8aa; }

#tab6-1:checked~.panels #area6-1 { display: block; background: #ffdead; }
#tab6-2:checked~.panels #area6-2 { display: block; background: #ffdead; }
#tab6-3:checked~.panels #area6-3 { display: block; background: #ffdead; }
#tab6-4:checked~.panels #area6-4 { display: block; background: #ffdead; }
#tab6-5:checked~.panels #area6-5 { display: block; background: #ffdead; }
#tab6-6:checked~.panels #area6-6 { display: block; background: #ffdead; }

#tab7-1:checked~.panels #area7-1 { display: block; background: #eee8aa; }
#tab7-2:checked~.panels #area7-2 { display: block; background: #eee8aa; }

#tab8-1:checked~.panels #area8-1 { display: block; background: #ffdead; }
#tab8-2:checked~.panels #area8-2 { display: block; background: #ffdead; }
#tab8-3:checked~.panels #area8-3 { display: block; background: #ffdead; }



/*チェックボックスとボックス非表示*/
input[name="check"] { display: none; }
input[name="check2"] { display: none; }
input[name="check3"] { display: none; }
input[name="check4"] { display: none; }
input[name="check5"] { display: none; }
input[name="check6"] { display: none; }
input[name="check7"] { display: none; }
input[name="check8"] { display: none; }
input[name="check9"] { display: none; }

.panel {
	padding: 20px;
	display: none;
	border-radius: 0px 5px 5px 5px;
}

.panel-on{
	padding: 20px;
	display: block;
	border-radius: 5px 5px 5px 5px;
	background: #eee8aa;
}

.panel-flex{ display: flex; }
.panel-flex div{ flex: 1; border-right: 2px dotted #FFF; margin-right: 20px; }
.panel-flex div:last-child{ border: none; }

.panel a:hover{
background-color: ;
cursor: pointer;
-webkit-transition: all 0.3s ease;/*ふわっとさせる間隔 Google Chrome、Safari*/
-moz-transition: all 0.3s ease;/*ふわっとさせる間隔 Firefox*/
-ms-transition: all 0.3s ease;/*ふわっとさせる間隔 IE*/
-o-transition: all 0.3s ease;/*ふわっとさせる間隔 Opera*/
transition: all  0.3s ease;/*ふわっとさせる間隔*/
background-color: #FFF;
}

/* footer */
footer {
  max-width: 1000px;
  margin: 0 auto;
  margin-top: 20px;
  padding: 5px;
  color: #FFF;
  background-color: #610B0B;
  text-align: right;
  font-size: 70%;
}

.top{
position: fixed;
bottom: 10px;
right: 10px;
width: 100px;
padding: 5px;
z-index: 10000;
display: block;
background-color: brown;
color: #FFF;
border-radius: 10px 10px 0px 0px;
text-align: center;
}
.top:visited{
color: #FFF;
}

@media screen and (max-width:840px) {
	.tab_wrap {
		width: 100%;
		margin: 0 auto;
		opacity: 0.8;
	}
}

@media screen and (max-width:840px){
img{
max-width: 100%!important;
height: auto;
width /***/:auto;
}
header{ width: 100%!important; margin: 0px!important; }
footer{ width: 96%!important; }
section{ width: 96%!important; }
.panel-flex{ display: block!important; }
.panel-flex div{ border:none!important; margin-right: 0px!important; }
.area-link{display: block!important; }
.area-link a{ width: 85%!important; }
.tab_wrap label{ display: flex;}
label{
	background: #666;
	color: #fff;
	border-radius: 0px!important;
	font-weight: bold;
	padding: 5px 10px 5px 10px!important;
	word-break: break-all;
	display: block!important;
	width: auto!important;
}
.panel {
	padding: 20px;
	display: none;
	border-radius: 0px!important;
}
}


/* seminar */

.koteipage-form{
display: block;
width: 80%;
padding: 15px;
margin: 4px auto;
border: 1px solid #FFFFFF;
text-align: center;
font-size: 200%;
color: #FFFFFF!important;
font-weight: bold;
box-shadow: 4px 4px 4px #CCC;
-moz-box-shadow: 4px 4px 4px #CCC;
-webkit-box-shadow: 4px 4px 4px #CCC;
border-radius: 40px;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
background-color: #f5021b;
}
.koteipage-form:hover{
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
background-color: #e30531;
}

li img{
width: 100%;
}

.seminar-ul ul{
list-style: none;display: flex;
justify-content: space-around;
}
.seminar-ul li{
width: 100%;
padding: 5px;
font-size: 90%;
font-weight: bold;
border-bottom: 1px dotted #CCC;
}
.seminar-day{
width: 10%!important;
padding: 10px;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
background-color: #55FFFF;
text-align: right;
font-weight: bold;
font-size: 110%!important;
border: none!important;
top: 0;
bottom: 0;
margin: auto;
}

.seminar-ul2 ul{
list-style: none;display: flex;align-items:center;
}
.seminar-ul2 li{
padding: 5px;
font-size: 110%;
line-height: 300%;
font-weight: bold;
}
.seminar-span{
font-size: 80%;
display: block;
text-align: right;
}
.seminar-pt{
display: flex;align-items:center;
}
.seminar-pt ul{
width: 50%;
display: flex;align-items:center;
list-style: none;
border: 1px solid #CCC;
margin: 10px;
}
.seminar-pt2 ul{
width: 100%;
display: flex;align-items:center;
list-style: none;
border: 1px solid #CCC;
margin: 10px;
}
.seminar-pt li{
padding: 5px;
margin: 5px;
}
.seminar-point{
width: 30%;
}
.seminar-point2{
width: 40%;
}
.seminar-text{
width: 70%;
font-size: 110%;
line-height: 200%;
font-weight: bold;
}
.seminar-text2{
width: 60%;
font-size: 80%;
line-height: 200%;
font-weight: bold;
}
.seminar-back{
background-image: url(https://www.ok-depot.jp/img/seminar/back.jpg);
background-size:contain;
background-repeat:no-repeat;
background-position: 50%;
border: none!important;
}
.seminar-ul4 ul{
width: 100%;
display: flex;align-items:center;
list-style: none;
border: 1px solid #CCC;
margin: 10px;
}
.seminar-qa1{
width: 10%;
}
.seminar-qa2{
width: 40%;
font-size: 100%;
line-height: 200%;
font-weight: bold;
}

.seminar-ul5 ul{
list-style: none;display: flex;
border-bottom: 3px solid #CCC;
align-items: stretch;
}
.seminar-ul5 li{
width: 20%;
height: auto;
padding: 5px;
font-size: 90%;
font-weight: bold;
align-self: center;
margin: 5px;
}
.seminar-ul5 a{
display: block;
vertical-align:middle;
}
.seminar-ul5 img{
margin: 0 auto;
vertical-align:middle;
}

.seminar-day2{
width: 10%!important;
padding: 10px;
background-color: #4682B4;
text-align: right;
font-weight: bold;
font-size: 110%!important;
border: none!important;
top: 0;
bottom: 0;
margin: auto;
color: #FFF;
}
.seminar-day3{
padding: 10px;
top: 0;
bottom: 0;
margin: auto;
}
.seminar-daytxt2{
width: 50%!important;
font-size: 120%!important;
}

.mousikomi{
padding: 10px;
border: 1px solid #CCC;
}


@media screen and (max-width:840px){
img{
max-width: 100%!important;
height: auto;
width /***/:auto;
}

.seminar-ul ul{
display: block!important;
}
.seminar-ul li{
width: 100%!important;
}
.seminar-day{
text-align: center!important;
}
.koteipage-form{
font-size: 100%!important;
}
.seminar-ul2 ul{
display: block!important;
}
.seminar-ul5 ul{
display: block!important;
}
.seminar-ul5 li{
width: 100%!important;
text-align: center!important;
}
.seminar-pt{
display: block!important;
}
.seminar-pt ul{
display: block!important;
width: 95%!important;
margin: 10px auto;
}
.seminar-pt ul li{
display: block!important;
margin: 0 auto;
}
.seminar-text{
width: 95%!important;
text-align: center!important;
}
.seminar-text2{
width: 95%!important;
text-align: center!important;
}
}