.body        { color: #FFFFFF; line-height: 150%; }
.mapsubtitle { color: #00FF00; font-weight: bold; line-height: 150%; }

.title       { padding-bottom: 20; text-align: center;  }

td.td4 { text-align: center; }
th.th1 { color: #FF0000; font-size: 10pt; }

.photo2 { background-color: #800000; text-align: center; }
.phototext { background-color: #000080; color: #FFFFFF; line-height: 150%; }

.yel { color: #ffff00; font-weight: bold; }
.whi { color: #ffffff; }
.yel2 { color: #ffff00; font-weight: bold; }
.ora { color: #ffcc66; }
.red { color: #ff0000; font-weight: bold; }
.blu { color: #00ffff; font-weight: bold; }
.pur { color: #00ff00; font-weight: bold; }

.maptext { background-color: #000080; color: #FFFFFF; }

.mar10 { padding-left: 10px; }

.body-op1 { background-color: #008080; color: #FFFFFF; line-height: 150%; }
.body-op2 { background-color: #ffff80; line-height: 150%; }

/*-----------------------*/
/*  for link             */
/*-----------------------*/
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; }
.mapbk { background-color: #000000; text-align: center; }
.photo { color: #FFFFFF; text-align: center; background-color: #7f0000; }

.hist-cont { background-color: #800000; color: #ffffff; text-align: center; }
.histry { background-color: #FFFF88; color: #000000; }
.top { vertical-align: top; }

/*-----------------------*/
/*  for fonts            */
/*-----------------------*/
th { font-weight: normal; text-align: left; }
.center { text-align: center; }
p { color: #FFFFFF; line-height: 150%; }
.enlabel { height: 30px; }

/*-----------------------*/
/*  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: 230px; }
.menu { line-height: 150%; }

/*-----------------------*/
/*  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%; }
.weapon { width: 100%; }
.scene { width: 100%; }
.map { width: 100%; }
.largemap { width: 100%; }
.book { height: 120px; }

}

/*-----------------------*/
/*  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%; }
.weapon { width: 300px; }
.scene { width: 100%; }
.map { width: 100%; }
.largemap { width: 100%; }
.book { height: 120px; }

}

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

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

.title img { width: auto; }
.weapon { width: 350px; }
.scene { width: 350px; }
.map { width: auto; }
.largemap { width: 100%; }
.book { height: 180px; }

}