body        { background-color: #33CCCC; background-image: url("numa.jpg"); color: #FFFFFF; }

/*-----------------------*/
/*  for head menu        */
/*-----------------------*/
.cp_navi {
	color: #ffffff;
	display: block;
	margin: 1em 1%;
	width: 100%;
}
.cp_navi ul {
	margin: 0;
	padding: 0;
}
.cp_navi ul li {
	display: inline-block;
	list-style-type: none;
	-webkit-transition: all 0.2s;
	        transition: all 0.2s;
}
.cp_navi > ul > li > a > .caret {
	border-top: 4px solid #aaaaaa;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
	content: '';
	display: inline-block;
	height: 0;
	width: 0;
	vertical-align: middle;
	-webkit-transition: color 0.1s linear;
	        transition: color 0.1s linear;
}
.cp_navi > ul > li > a {
	color: #aaaaaa;
	display: block;
	line-height: 56px;
	padding: 0 10px;
	text-decoration: none;
}
.cp_navi > ul > li:hover {
	background-color: rgb(218, 60, 65);
}
.cp_navi > ul > li:hover > a {
	color: rgb( 255, 255, 255 );
}
.cp_navi > ul > li:hover > a > .caret {
	border-top-color: rgb( 255, 255, 255 );
}
.cp_navi > ul > li > div {
	background-color: rgb(218, 60, 65);
	border-top: 0;
	border-radius: 0 0 4px 4px;
	box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
	display: none;
	margin: 0;
	opacity: 0;
	position: absolute;
	width: 280px;
	visibility: hidden;
	-webkit-transiton: opacity 0.2s;
	       transition: opacity 0.2s;
}
.cp_navi > ul > li:hover > div {
	display: block;
	opacity: 1;
	visibility: visible;
}
.cp_navi > ul > li > div ul > li {
	display: block;
}
.cp_navi > ul > li > div ul > li > a {
	color: #ffffff;
	display: block;
	padding: 6px 24px;
	text-decoration: none;
}
.cp_navi > ul > li > div ul > li:hover > a {
	background-color: rgba( 255, 255, 255, 0.1);
}

/*-----------------------*/
/*  for foot menu        */
/*-----------------------*/
.items { display: flex; flex-wrap:wrap; align-content: space-between; }
div.cat { width: 240px; }
.menu { line-height: 150%; }

/*-----------------------*/
/*  for link             */
/*-----------------------*/
a { text-decoration: none; }
a:link { color: #FFFFFF; }
a:visited { color: #FFFFFF; }
a:active { color: #FFFFFF; }

/*-----------------------*/
/*  for table            */
/*-----------------------*/
table { width: 100%; text-align: left; margin-left: auto; margin-right: auto; }
table.table1 { border-collapse: collapse; border: 0px; }

tr.tr1 { height: 10px; }
tr.tr2 { height: 150px; }
tr.tr3 { height: 50px; }

td.td1 { background-color: #000080; padding: 10px; }
td.td4 { text-align: left; }
td.td5 { text-align: center; }
td.td6 { background-color: #FFFFFF; text-align: center; }
td.td7 { background-color: #000080; }
td.td8 { background-color: #FFFFFF; text-align: center; }
td.td9 { background-color: #FFFFFF; text-align: center; }
td.td10 { background-color: #FFFF99; color: #000000; line-height: 150%;  padding: 5px; }
td.td11 { background-color: #FFCCFF;  color: #000000; line-height: 150%;  padding: 5px; }
td.td12 { background-color: #000080; width: 100px; }
td.td13 { background-color: #FFFFCC; width: 330px; color: #000000; line-height: 150%;  padding: 5px; }
td.td14 { background-color: #CCFFFF; width: 330px; color: #000000; line-height: 150%;  padding: 5px; }
td.td15 { background-color: #000000; width: 150px; text-align: center; font-size: 10pt; }

th.th2 { background-color: #800000;  width: 40px;  text-align: center; }
th.th3 { background-color: #800000;  width: 330px;  text-align: center; }
th.th4 { background-color: #800000;  width: 240px;  text-align: center; }
th.th7 { background-color: #000080; }

/*-----------------------*/
/*  for fonts            */
/*-----------------------*/
th { font-weight: normal; }
.center { text-align: center; }
p { color: #FFFFFF; line-height: 150%; }
.font1 { color: #CCFFFF; line-height: 150%; text-align: center; }
.font2 { color: #FFFFFF; font-size: 10pt; text-align: center; }
.font3 { color: #FFCC00; text-align: center; font-weight: bold; }
.font4 { color: #FF0000; text-align: left; font-size: 10pt; font-weight: bold; }
.font5 { color: #FFFF00; text-align: left; font-weight: bold; }
.font6 { color: #FF0000; text-align: left; font-weight: bold; }
.font7 { color: #FFFF00; text-align: left; font-weight: bold; font-size: 13pt; }
.font8 { color: #FF9900; text-align: left; font-weight: bold; font-size: 14pt; }
.font9 { color: #FFFF00; text-align: center; font-weight: bold; }

.mapsubtitle { color: #00FF00; 
               font-weight: bold; }

img { border-style: none; }

span.red { color: #FF0000; text-align: left; font-weight: bold; }
span.yellow { color: #FFFF00; text-align: left; font-weight: bold; }
span.green { color: #00FF00; text-align: left; font-weight: bold; }
span.blue { color: #00FFFF; text-align: left; font-weight: bold; }
span.orange { color: #FF9900; text-align: left; font-weight: bold; }
span.pink { color: #FF00FF; text-align: left; font-weight: bold; }
span.black { color: #999999; text-align: left; font-weight: bold; }


/*-----------------------*/
/*  for smart phone  */
/*-----------------------*/
@media screen and (max-width: 479px){

div.main { width: 100%; margin-left: auto; margin-right: }

.last td:last-child {
  border-bottom: solid 1px #ccc;
  width: 100%;
}
.tbl-r02 th,
.tbl-r02 td {
  display: block;
  width: 100%;
}

.title img { width: 100%; }
.photo { width: 100%; }
.scene { width: 100%; }
.map { width: 100%; }
.largemap { width: 100%; }
.book { height: 150px; }

}

/*-----------------------*/
/*  for tablet           */
/*-----------------------*/
@media screen and (max-width: 767px){

div.main { width: 100%; margin-left: auto; margin-right: auto; }

.last td:last-child {
  border-bottom: solid 1px #ccc;
  width: 100%;
}
.tbl-r02 th,
.tbl-r02 td {
  display: block;
  width: 100%;
}

.title img { width: 100%; }
.photo { width: 300px; }
.scene { width: 100%; }
.map { width: 100%; }
.largemap { width: 100%; }
.book { height: 150px; }

}

/*-----------------------*/
/*  for pc  */
/*-----------------------*/
@media screen and (min-width: 768px){

div.main { width: 700px; margin-left: auto; margin-right: auto; }

.title img { width: auto; }
.photo { width: 300px; }
.scene { width: 350px; }
.map { width: auto; }
.largemap { width: 100%; }
.book { height: 200px; }

}