* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #cdc; width: 100%; }
section { background: #fffff8; }
ol, ul { list-style: none; }



@media screen and (max-width: 768px) {
  #SIDE_MENU, #FC { display: none; }
  #TOPICS { width: 100%; }

}

@media screen and (min-width: 1024px) {
  section {
    margin          : 1em auto 3em auto;
    width           : 980px;
    border: 1px silver solid;
    box-shadow: 10px 10px 10px rgba(0,0,0,.1);
  }
}


:is(header,footer) p {
  background-color: #582;
  background      : linear-gradient(0, #684 0%, #9b8 100%);
  color           : #efe;
  padding         : 0 1em;
  text-align      : center;
}
:is(header,footer)> p> span:nth-of-type(1) {float: left;}
:is(header,footer)> p> span:nth-of-type(2) {float: right;}

header a, footer a  { color: #252; }
header #logo { width: 280px; height: 90px; margin: 2em 0 1em 350px; }



header nav ul {
  display: flex;
  justify-content: center;
  align-items: center;
}

header nav li {
  display         : block;
  text-align      : center;
  width           : 156px;
  height          : 36px;
	background: -moz-linear-gradient(top, #ac9 0%,#583 100%);
	border-radius: 12px 12px 0 0;
	border: 1px solid #000000;
	text-shadow: 0 -1px 0 rgba(0,0,0,.6),	0 1px 0 rgba(255,255,255,0.3);
  padding     : 6px 0 4px 0;
}

header nav li a {
  text-decoration : none;
	color: #fff;
}

header nav li:hover:has(a) {
 background:#cb0;
 color:#000;
 text-shadow:none;
}

header nav li:has(strong) {
	color: #fff;
	font-size: 16px;
	background: -moz-linear-gradient(top, #bdb 0%, #8b8 65%,#0f0);
}



#PC {
  height          : 240px;
  border          :6px #ddc solid;
  position: relative;
  margin: 0 6px;
}


#PC li img {
  position: absolute;
  top: 0;
  left: 0;
  vertical-align  : bottom;
  width: 100%;
  opacity: 0;
  animation: image-fade 40s infinite;
}

#PC li:nth-of-type(1) img { animation-delay: 0s;}
#PC li:nth-of-type(2) img { animation-delay: 8s;}
/*
画像のファイル数に応じて以下の行を追加
#PC li:nth-of-type(3) img { animation-delay: 16s;}
#PC li:nth-of-type(4) img { animation-delay: 24s;}
#PC li:nth-of-type(5) img { animation-delay: 32s;}
*/
@keyframes image-fade {
  0% { opacity: 0;}
  15% {opacity: 1;}
  50% {opacity: 1;}
  85% {opacity: 0;}
  100% {opacity: 0;}
}




#CONTENTS {
  display: flex;
  background      : #eeeee8;
  padding: 6px;
  margin: 6px;
}



#SIDE_MENU {
  width           : 200px;
  border          : 1px #ccb solid;
  background      : #fffff8;
}

#SIDE_MENU > li {
  margin: 0 0 12px 0;
}

#SIDE_MENU h3 {
 background      : #8a6;
 font            : normal 15px/26px sans-serif;
 color           : #efe;
 text-align      : center;
}

#SIDE_MENU li li {
 display         : block;
 padding    : 0 8px;
 border-bottom: 1px #999 dotted;
}

#SIDE_MENU a {
 color           : #444;
 font            : normal 15px/26px sans-serif;
 text-decoration : none;
}

#SIDE_MENU a:before {
  content :"■";
  color: #cbf;
}
#SIDE_MENU li li:has(a:hover) {
 background      : #fc4;
}





#TOPICS {
 background      : #fffff8;
 border          : 1px #ccb solid;
 padding: 1em;
 min-height: 900px;
 flex: 1;
 margin-left: 6px;
}

#TOPICS > li {
 margin-bottom   : 2em;
}

#TOPICS li h3 {
 display: inline-block;
 background      : #695;/* url(../images/h3.gif);*/
	background: -moz-linear-gradient(top, #9b8 0%,#472 100%);
	background: -webkit-gradient(linear, left top, left bottom,from(#9b8),to(#472));
 font            : bold large/180% sans-serif;
 color           : #fff;
	border-radius: 8px;
	text-shadow :	1px 1px 0px rgba(0,0,0,.9);
  padding: 0 2em 0 .5ex;
  margin: 0;
}
#TOPICS li h3.em {
  background      : #d93;/* url(../images/h3.gif);*/
  background: -moz-linear-gradient(top, #fb6 0%,#a60 100%);
  background: -webkit-gradient(linear, left top, left bottom,from(#fb6),to(#a60));
 }
 

#TOPICS li h3:before {
  content :"● ";
  color: #5f3;
}
#TOPICS li h3.em:before {
  color: #fe4;
}

dt {
  float: left;
  color: #050;
}

dt:after {
  content: ":";
  margin-right: .5ex;
}


footer ul {
 padding    : 70px 0 20px 0;
 text-align : center;
 background      : linear-gradient(0, #ddd 0%, #fffff8 100%);
}

footer li {
 display         : inline;
 border-left     : 1px #252 solid;
 font            : normal small sans-serif;
 padding         : 0 1ex;
}


h4 {
  font            : bold large/100% sans-serif;
  color           : #060;
 }
 h4:before {
   content :"■ ";
   color: #050;
   margin-left: 1ex;
   text-shadow: 3px 3px 0px rgba(0,0,0,.2);
 }
 
 hr {
   margin: 2em 1em 1em;
 }
 
#TOPICS img.photo {
  border         : 6px #ddd solid;
  margin         : 0 16px;
  float:right;
}


#TOPICS p {
 padding  : 0 0 0 2em;
 text-indent   : -1em;
 color         : #021;
 margin: 1.3ex 0 .5ex 0;
 line-height: 160%;
}

#TOPICS p:before {
  content:"\025b6";
  color: #f80;
}

#TOPICS p.jump {
  margin         : 1em 0 2em 0;
  text-align: right;
  border-left :0px none;
}
#TOPICS p.jump:before {
  content:"";
}

.css3button {
  text-decoration : none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 77%;
	line-height: 14px;
	font-weight: bold;
	color: #fff;
	padding: 3px 10px;
	background: #98d;
	border-radius: 8px;
	border: 3px double #fef;
	text-shadow:
		-1px -1px 0px rgba(000,000,000,.6),
		0px 1px 0px rgba(255,255,255,0.0);
}
.css3button:before {
  content :"\21db ";
  color: #fff;
}



sup {
 font-size       : xx-small;
}

em {
  color: #f50;
  font-style:normal;
}
th em {
 color           : #fb0;
 font-weight     : bold;

}

caption {
 font-size       : small;
 color           : #793;
 text-align      : right;
}

table {
 border-collapse : collapse;
 margin          : 1em 0 0 0;
 width: 100%;
 border: 2px #bdb ridge;
 background:#8a4;
}

th {
 background: transparent;
 box-shadow: 0px 4px 4px rgba(255,255,255,.7) inset, 0 -4px 4px rgba(0,0,0,.1) inset;
 padding         : 10px 8px 6px 8px;
 color           : #FFF;
 text-align      : left;
 white-space     : nowrap;
 font-weight     : normal;
 font-size       : medium;
 line-height     : 1.5em;
 text-shadow :	2px 2px 2px rgba(0,0,0,.6);
}
table.passed {
  background: #999;
}

th.hissu {
 border-right    : 4px #fb6 solid;
}

td {
 border-collapse: collapse;
 background      : rgba(225,230,225,.8);
 box-shadow: 0 3px 3px rgba(255,255,255,.4) inset, 0 -3px 3px rgba(0,0,0,.08) inset;
 padding: 4px;
 border: 1px solid #fff;
 font-size       : medium;
 line-height: 140%;
}

iframe {
 margin          : 1ex 0;
}

input[type="text"], select, textarea {
  font-size: 110%;
  color: #444;
}

td input[type="text"] {
  width : 330px;
}


ul.list {
  margin: 1ex 0;
}

ul.list li {
 margin-left     : 1ex;
 border-top      : 1px #fff solid;
 border-right    : 1px #ccb solid;
 border-bottom   : 1px #ccb solid;
 border-left     : 1px #fff solid;
 background      : #eee;
 padding         : .2ex 1ex;
 font-size: small;
}


.TEL {
 font            : 65px/120% Arial;
 color           : #392;
}
.imgValign {
 vertical-align: -13px;
}

.right {
  float           : right;
}



#TEJUN {
  padding-left : 20px;
  height : 50px;
  width  : 570px;
}

#TEJUN li {
  background     : url(../images/step_d.gif) no-repeat;
  width          : 142px;
  height         :46px;
  float:left;
  display:block;
  font-size      : 20px;
  line-height: 48px;
  color: #555;
  margin:0;
  text-indent:32px;
}