@charset "UTF-8";

/* *******************************************************
PC css start
******************************************************* */
@media screen and (min-width: 960px){

/* table */
/* normal/responsive */
.normal-table,
.responsive-table {
	width: 95%;
	clear: left;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50px;
	border-collapse: collapse;
}
.normal-table th,
.responsive-table th {
	width: 30%;
	padding: 6px;
	background-color: #EEE;
	border: 1px solid #B9B9B9;
	line-height: 135%;
	text-align: left;
	color: #666;
}
.normal-table td,
.responsive-table td {
	width: 70%;
	padding: 6px;
	background-color: #FFF;
	border: 1px solid #B9B9B9;
	line-height: 135%;
}
/* ------------------------------------------------------- */


/* map movie */
.map-space {
	width: 96%;
	float: left;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 30px;
	text-align: center;
}
.map-space iframe,
.map-space object,
.map-space embed {
    width: 100%;
    object-fit: contain;
}
/* ------------------------------------------------------- */

}
/* *******************************************************
PC css end
******************************************************* */





/* *******************************************************
Mobile css start
******************************************************* */
@media screen and (max-width: 959px){

/* table */
/* normal */
.normal-table {
	width: 95%;
	clear: left;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50px;
	border-collapse: collapse;
}
.normal-table th {
	width: 30%;
	padding: 6px;
	background-color: #EEE;
	border: 1px solid #B9B9B9;
	line-height: 135%;
	text-align: left;
	color: #666;
}
.normal-table td {
	width: 70%;
	padding: 6px;
	background-color: #FFF;
	border: 1px solid #B9B9B9;
	line-height: 135%;
}
/* responsive */
.responsive-table {
	width: 95%;
	clear: left;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50px;
	border-collapse: collapse;
}
.responsive-table th {
	width: 95%;
	padding: 6px;
	background-color: #EEE;
	border: 1px solid #B9B9B9;
	line-height: 135%;
	text-align: left;
	color: #666;
	display: block;
	margin-bottom: -1px;
}
.responsive-table td {
	width: 95%;
	padding: 6px;
	background-color: #FFF;
	border: 1px solid #B9B9B9;
	line-height: 135%;
	display: block;
	margin-bottom: -1px;
}
/* ------------------------------------------------------- */



/* map movie */
.map-space {
	width: 96%;
	float: left;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 30px;
	text-align: center;
}
.map-space iframe,
.map-space object,
.map-space embed {
    width: 100%;
    object-fit: contain;
}
/* ------------------------------------------------------- */

}
/* *******************************************************
Mobile css end
******************************************************* */





/* *******************************************************
Common css start
******************************************************* */

/* caution */
.caution {
	padding: 5px;
	margin: 0px 5px 25px;
	background-color: #FFF0F0;
	border: 1px solid #C00;
}
.caution-title {
	margin-bottom: 5px;
	font-size: 16px;
	font-weight: bold;
	color: #C00;
	
}
.caution-title:before {
	float: left;
	margin-right: 4px;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f071";
}
.caution p {
	margin: 0px;
	line-height: 150%;
}
/* ------------------------------------------------------- */



/* line-box */
.line-box {
	margin-top: 5px;
	margin-left: 5px;
	margin-right: 5px;
	margin-bottom: 35px;
	padding-bottom: 30px;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #666;
	padding-left: 16px;
}
.line-box a {
	font-weight: bold;
	text-decoration: none;
}
.line-box a:before {
	float: left;
	margin-right: 0px;
	font-family: "Font Awesome 5 Free";
	content: "\f138";
	font-weight: 900;
	text-indent: -16px;
}
/* ------------------------------------------------------- */



/* arrow-box */
.arrow-box {
	margin-top: 5px;
	margin-left: 5px;
	margin-right: 5px;
	margin-bottom: 30px;
	padding: 5px;
	border: 1px solid #CCC;
	box-shadow: 2px 2px 2px 1px #F5F5F5;
	-webkit-box-shadow: 2px 2px 2px 1px #F5F5F5;
	-moz-box-shadow: 2px 2px 2px 1px #F5F5F5;
	background-color: #F8F8F8;
}
.arrow-box-title {
	width: auto;
	margin-bottom: 5px;
	padding: 5px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCC;
	background-color: #E9E9E9;
}
.arrow-box p {
	margin-bottom: 20px;
	margin-top: 10px;
	line-height: 150%;
}
.arrow {
	width: 0;
	height: 0;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 30px;
	border-style: solid;
	border-width: 20px 25px 0 25px;
	border-color: #369 transparent transparent transparent;
	line-height: 0px;
	_border-color: #369 #000 #000 #000;
	_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000');
}
/* ------------------------------------------------------- */



/* ol,ul */
.ol-style {
	clear: left;
	padding-top: 5px;
	margin-top: 10px;
	margin-left: 24px;
	margin-right: 5px;
	margin-bottom: 50px;
}
.ol-style li {
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #666;
}
.ul-style {
	clear: left;
	margin-top: 10px;
	margin-left: 6px;
	margin-right: 5px;
	margin-bottom: 50px;
	padding-top: 5px;
	list-style-type: none;
}
.ul-style li {
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #666;
	padding-left: 18px;
}
.ul-style li:before {
	float: left;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f054  ";
	color: #066;
	text-indent: -14px;
}
.ol-style li a,
.ul-style li a {
	text-decoration: none;
}
/* ------------------------------------------------------- */



/* toc_container ul */
#contents #toc_container ul {
	clear: left;
	margin-top: 10px;
	margin-left: 6px;
	margin-right: 5px;
	margin-bottom: 0px;
	padding-top: 5px;
	list-style-type: none;
}
#contents #toc_container li {
	margin-bottom: 5px;
	padding-bottom: 5px;
	border-bottom-style: none;
	padding-left: 18px;
}
#contents #toc_container li:before {
	float: left;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f054";
	color: #369;
	text-indent: -14px;
}
#contents #toc_container ul li a {
	text-decoration: none;
}
#contents #toc_container ul li a:hover {
	text-decoration: underline;
}
/* ------------------------------------------------------- */



/* sns */
/* sns drawer */
#drawer-content .sns-bt-area {
	margin-top: 50px;
	margin-bottom: 50px;
	text-align: center;
	line-height: 30px;
}
#drawer-content .sns-bt-area a {
	margin-left: 3px;
	margin-right: 3px;
	font-size: 30px;
	color: #FFF;
	display: inline-block;
	transition-duration: 0.3s;
}
#drawer-content .sns-bt-area a:hover {
	transform: scale(1.5);
	transition-duration: 0.3s;
}
/* sns sidebar */
#side-navi .sns-bt-area {
	margin-top: 50px;
	margin-bottom: 50px;
	text-align: center;
}
#side-navi .sns-bt-area a {
	margin-left: 5px;
	margin-right: 5px;
	font-size: 30px;
	color: #000;
	display: inline-block;
	transition-duration: 0.3s;
}
#side-navi .sns-bt-area a:hover {
	transform: scale(1.5);
	transition-duration: 0.3s;
}
#side-navi .sns-bt-area .bt-twitter {
	color: #00aced;
}
#side-navi .sns-bt-area .bt-instagram {
	color: #bc2a8d;
}
#side-navi .sns-bt-area .bt-facebook {
	color: #3b5998;
}
#side-navi .sns-bt-area .bt-youtube {
	color: #b00;
}
#side-navi .sns-bt-area .bt-line {
	color: #5ae628;
}
#side-navi .sns-bt-area .bt-rss {
	color: #F60;
}
/* ------------------------------------------------------- */



/* blockquote */
blockquote {
	clear: left;
	margin-bottom: 30px;
	position:relative;
	margin-left: 10px;
	margin-right: 10px;
	padding-left: 50px;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	word-break : break-all;
	border: 1px solid #CCC;
}
blockquote:before {
	content: "“";
	font-size: 600%;
	line-height: 90px;
	font-family:"ＭＳ Ｐゴシック",sans-serif;
	color:#999;
	position:absolute;
	left:0;
	top:0;
}
/* ------------------------------------------------------- */



/* wp-block-table */
.wp-block-table table {
	width: 95%;
	clear: left;
	margin-top: 30px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50px;
	border-collapse: collapse;
}
.wp-block-table table td {
	width: auto;
	padding: 6px;
	background-color: #FFF;
	border: 1px solid #B9B9B9;
	line-height: 135%;
}
/* ------------------------------------------------------- */



/* font */
strong {
	color: #663;
}
.notes {
	font-size: 12px;
	color: #066;
}
/* red */
.color-red {
	color: #C00;
}
.color-red-b {
	color: #C00;
	font-weight: bold;
}
.color-red-u {
	color: #C00;
	text-decoration: underline;
}
.color-red-l {
	color: #C00;
	text-decoration: line-through;
}
.color-red-i {
	color: #C00;
	font-style: italic;
}
/* blue */
.color-blue {
	color: #00F;
}
.color-blue-b {
	color: #00F;
	font-weight: bold;
}
.color-blue-u {
	color: #00F;
	text-decoration: underline;
}
.color-blue-l {
	color: #00F;
	text-decoration: line-through;
}
.color-blue-i {
	color: #00F;
	font-style: italic;
}
/* green */
.color-green {
	color: #060;
}
.color-green-b {
	color: #060;
	font-weight: bold;
}
.color-green-u {
	color: #060;
	text-decoration: underline;
}
.color-green-l {
	color: #060;
	text-decoration: line-through;
}
.color-green-i {
	color: #060;
	font-style: italic;
}
/* orange */
.color-orange {
	color: #F60;
}
.color-orange-b {
	color: #F60;
	font-weight: bold;
}
.color-orange-u {
	color: #F60;
	text-decoration: underline;
}
.color-orange-l {
	color: #F60;
	text-decoration: line-through;
}
.color-orange-i {
	color: #F60;
	font-style: italic;
}
/* brown */
.color-brown {
	color: #600;
}
.color-brown-b {
	color: #600;
	font-weight: bold;
}
.color-brown-u {
	color: #600;
	text-decoration: underline;
}
.color-brown-l {
	color: #600;
	text-decoration: line-through;
}
.color-brown-i {
	color: #600;
	font-style: italic;
}
/* purple */
.color-purple {
	color: #90F;
}
.color-purple-b {
	color: #90F;
	font-weight: bold;
}
.color-purple-u {
	color: #90F;
	text-decoration: underline;
}
.color-purple-l {
	color: #90F;
	text-decoration: line-through;
}
.color-purple-i {
	color: #90F;
	font-style: italic;
}
/* pink */
.color-pink {
	color: #F0F;
}
.color-pink-b {
	color: #F0F;
	font-weight: bold;
}
.color-pink-u {
	color: #F0F;
	text-decoration: underline;
}
.color-pink-l {
	color: #F0F;
	text-decoration: line-through;
}
.color-pink-i {
	color: #F0F;
	font-style: italic;
}
/* ocher */
.color-ocher {
	color: #660;
}
.color-ocher-b {
	color: #660;
	font-weight: bold;
}
.color-ocher-u {
	color: #660;
	text-decoration: underline;
}
.color-ocher-l {
	color: #660;
	text-decoration: line-through;
}
.color-ocher-i {
	color: #660;
	font-style: italic;
}
/* ------------------------------------------------------- */



/* marker */
/* red */
.marker-red {
	background: linear-gradient(transparent 0%, #FCC 0%);
}
.marker-red-b {
	background: linear-gradient(transparent 0%, #FCC 0%);
	font-weight: bold;
}
.marker-red-h {
	background: linear-gradient(transparent 60%, #FCC 0%);
}
.marker-red-h-b {
	background: linear-gradient(transparent 60%, #FCC 0%);
	font-weight: bold;
}
.c-marker.red {
	background: -webkit-linear-gradient(left, rgb(255,204,204) 50%, transparent 50%);
	background: -moz-linear-gradient(left, rgb(255,204,204) 50%, transparent 50%);
	background: linear-gradient(left, rgb(255,204,204) 50%, transparent 50%);
	background-repeat: no-repeat;
	background-size: 200% .8em; 
	background-position: 100% .1em;
	transition: 2s;
}
/* blue */
.marker-blue {
	background: linear-gradient(transparent 0%, #CFF 0%);
}
.marker-blue-b {
	background: linear-gradient(transparent 0%, #CFF 0%);
	font-weight: bold;
}
.marker-blue-h {
	background: linear-gradient(transparent 60%, #CFF 0%);
}
.marker-blue-h-b {
	background: linear-gradient(transparent 60%, #CFF 0%);
	font-weight: bold;
}
.c-marker.blue {
	background: -webkit-linear-gradient(left, rgb(204,255,255) 50%, transparent 50%);
	background: -moz-linear-gradient(left, rgb(204,255,255) 50%, transparent 50%);
	background: linear-gradient(left, rgb(204,255,255) 50%, transparent 50%);
	background-repeat: no-repeat;
	background-size: 200% .8em; 
	background-position: 100% .1em;
	transition: 2s;
}
/* yellow */
.marker-yellow {
	background: linear-gradient(transparent 0%, #FF9 0%);
}
.marker-yellow-b {
	background: linear-gradient(transparent 0%, #FF9 0%);
	font-weight: bold;
}
.marker-yellow-h {
	background: linear-gradient(transparent 60%, #FF9 0%);
}
.marker-yellow-h-b {
	background: linear-gradient(transparent 60%, #FF9 0%);
	font-weight: bold;
}
.c-marker.yellow {
	background: -webkit-linear-gradient(left, rgb(255,255,153) 50%, transparent 50%);
	background: -moz-linear-gradient(left, rgb(255,255,153) 50%, transparent 50%);
	background: linear-gradient(left, rgb(255,255,153) 50%, transparent 50%);
	background-repeat: no-repeat;
	background-size: 200% .8em; 
	background-position: 100% .1em;
	transition: 2s;
}
/* green */
.marker-green {
	background: linear-gradient(transparent 0%, #CF6 0%);
}
.marker-green-b {
	background: linear-gradient(transparent 0%, #CF6 0%);
	font-weight: bold;
}
.marker-green-h {
	background: linear-gradient(transparent 60%, #CF6 0%);
}
.marker-green-h-b {
	background: linear-gradient(transparent 60%, #CF6 0%);
	font-weight: bold;
}
.c-marker.green {
	background: -webkit-linear-gradient(left, rgb(204,255,102) 50%, transparent 50%);
	background: -moz-linear-gradient(left, rgb(204,255,102) 50%, transparent 50%);
	background: linear-gradient(left, rgb(204,255,102) 50%, transparent 50%);
	background-repeat: no-repeat;
	background-size: 200% .8em; 
	background-position: 100% .1em;
	transition: 2s;
}
/* orange */
.marker-orange {
	background: linear-gradient(transparent 0%, #F93 0%);
}
.marker-orange-b {
	background: linear-gradient(transparent 0%, #F93 0%);
	font-weight: bold;
}
.marker-orange-h {
	background: linear-gradient(transparent 60%, #F93 0%);
}
.marker-orange-h-b {
	background: linear-gradient(transparent 60%, #F93 0%);
	font-weight: bold;
}
.c-marker.orange {
	background: -webkit-linear-gradient(left, rgb(255,153,51) 50%, transparent 50%);
	background: -moz-linear-gradient(left, rgb(255,153,51) 50%, transparent 50%);
	background: linear-gradient(left, rgb(255,153,51) 50%, transparent 50%);
	background-repeat: no-repeat;
	background-size: 200% .8em; 
	background-position: 100% .1em;
	transition: 2s;
}
.c-marker.is-active{
    background-position: 0% .1em;
}
/* ------------------------------------------------------- */



/* marker */
/* normal */
.bt-normal {
	width: 90%;
	margin-right: auto;
	margin-left: auto;
	margin-top: 10px;
	margin-bottom: 30px;
	padding: 15px;
	display: block;
	outline: none;
	cursor: pointer;
	box-shadow: 2px 2px 4px gray;
	border: 1px solid #999;
	line-height: 150%;
	font-size: 16px;
	font-weight: bold;
	color: #FFF;
	text-decoration: none;
	text-align: center;
}
.bt-normal:hover{
	transition: 0.2s;
	transform: translate3d(0,2px,0);
	box-shadow: none;
	color: #FFF;
}
.bt-normal.red {
	background-color: #C00;
}
.bt-normal.blue {
	background-color: #069;
}
.bt-normal.green {
	background-color: #066;
}
.bt-normal.orange {
	background-color: #F60;
}
.bt-normal.pink {
	background-color: #F3C;
}
/* r-corners */
.bt-r-corners {
	width: 90%;
	margin-right: auto;
	margin-left: auto;
	margin-top: 10px;
	margin-bottom: 30px;
	padding: 15px;
	display: block;
	outline: none;
	cursor: pointer;
	box-shadow: 2px 2px 4px gray;
	border: 1px solid #999;
	border-radius: 10px;
	line-height: 150%;
	font-size: 16px;
	font-weight: bold;
	color: #FFF;
	text-decoration: none;
	text-align: center;
}
.bt-r-corners:hover{
	transition: 0.2s;
	transform: translate3d(0,2px,0);
	box-shadow: none;
	color: #FFF;
}
.bt-r-corners.red {
	background-color: #C00;
}
.bt-r-corners.blue {
	background-color: #069;
}
.bt-r-corners.green {
	background-color: #066;
}
.bt-r-corners.orange {
	background-color: #F60;
}
.bt-r-corners.pink {
	background-color: #F3C;
}
/* r-corners2 */
.bt-r-corners2 {
	width: 90%;
	margin-right: auto;
	margin-left: auto;
	margin-top: 10px;
	margin-bottom: 30px;
	padding: 15px;
	display: block;
	outline: none;
	cursor: pointer;
	box-shadow: 2px 2px 4px gray;
	border: 1px solid #999;
	border-radius: 100px;
	line-height: 150%;
	font-size: 16px;
	font-weight: bold;
	color: #FFF;
	text-decoration: none;
	text-align: center;
}
.bt-r-corners2:hover{
	transition: 0.2s;
	transform: translate3d(0,2px,0);
	box-shadow: none;
	color: #FFF;
}
.bt-r-corners2.red {
	background-color: #C00;
}
.bt-r-corners2.blue {
	background-color: #069;
}
.bt-r-corners2.green {
	background-color: #066;
}
.bt-r-corners2.orange {
	background-color: #F60;
}
.bt-r-corners2.pink {
	background-color: #F3C;
}
/* triangle */
.bt-triangle {
	width: 90%;
	margin-right: auto;
	margin-left: auto;
	margin-top: 10px;
	margin-bottom: 30px;
	padding: 15px;
	display: block;
	position: relative;
	cursor: pointer;
	background-color: #C00;
	border: 1px solid #999;
	line-height: 150%;
	font-size: 16px;
	font-weight: bold;
	color: #FFF;
	text-decoration: none;
	text-align: center;
}
.bt-triangle:hover{
	color: #FFF;
	opacity: 0.8;
}
.bt-triangle.red {
	background-color: #C00;
}
.bt-triangle.blue {
	background-color: #069;
}
.bt-triangle.green {
	background-color: #066;
}
.bt-triangle.orange {
	background-color: #F60;
}
.bt-triangle.pink {
	background-color: #F3C;
}
.bt-triangle::after {
  position: absolute;
  top: 50%;
  right: .2em;
  content: '';
  margin-top: -5px;
  border: 7px solid transparent;
  border-top-width: 5px;
  border-bottom-width: 5px;
  border-left-color: #fff;
  transition: all .2s;
}
.bt-triangle:hover::after {
  right: -.05em;
}
/* slide */
.bt-slide {
	width: 90%;
	margin-right: auto;
	margin-left: auto;
	margin-top: 10px;
	margin-bottom: 30px;
	padding: 15px;
	display: block;
	position: relative;
	cursor: pointer;
	background-color: #C00;
	border: 1px solid #999;
	line-height: 150%;
	font-size: 16px;
	font-weight: bold;
	color: #FFF;
	text-decoration: none;
	text-align: center;
}
.bt-slide:hover{
	color: #FFF;
	opacity: 0.8;
}
.bt-slide.red {
	background-color: #C00;
}
.bt-slide.blue {
	background-color: #069;
}
.bt-slide.green {
	background-color: #066;
}
.bt-slide.orange {
	background-color: #F60;
}
.bt-slide.pink {
	background-color: #F3C;
}
.bt-slide::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  content: '';
  background: #333;
  transform-origin: right top;
  transform: scale(0, 1);
  transition: transform .5s;
}
.bt-slide:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);
}
.bt-slide.red::before {
  background: #F00;
}
.bt-slide.blue::before {
  background: #09C;
}
.bt-slide.green::before {
  background: #099;
}
.bt-slide.orange::before {
  background: #F90;
}
.bt-slide.pink::before {
  background: #F6C;
}
/* box */
/* shadow */
.box-shadow {
	width: 90%;
	margin-right: auto;
	margin-left: auto;
	margin-top: 10px;
	margin-bottom: 30px;
	padding: 15px;
	border: 1px solid #CCC;
	border-radius: 0px;
	background-color: #FFF;
	line-height: 150%;
	font-size: 14px;
	-webkit-filter:drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.2));
	-moz-filter:drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.2));
	-ms-filter:drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.2));
	filter:drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.2));
}
.box-shadow-r {
	width: 90%;
	margin-right: auto;
	margin-left: auto;
	margin-top: 10px;
	margin-bottom: 30px;
	padding: 15px;
	border: 1px solid #CCC;
	border-radius: 10px;
	background-color: #FFF;
	line-height: 150%;
	font-size: 14px;
	-webkit-filter:drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.2));
	-moz-filter:drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.2));
	-ms-filter:drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.2));
	filter:drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.2));
}
/* line */
.box-line {
	width: 90%;
	margin-right: auto;
	margin-left: auto;
	margin-top: 10px;
	margin-bottom: 30px;
	padding: 15px;
	border-radius: 10px;
	background-color: #FFF;
	line-height: 150%;
	font-size: 14px;
}
.box-line.gray {
	border: 2px solid #999;
	background-color: #F6F6F6;
}
.box-line.red {
	border: 2px solid #C00;
	background-color: #FFEAEA;
}
.box-line.blue {
	border: 2px solid #069;
	background-color: #E8F7FF;
}
.box-line.green {
	border: 2px solid #066;
	background-color: #E1FFFF;
}
.box-line.orange {
	border: 2px solid #F60;
	background-color: #FFF1E8;
}
.box-line.brown {
	border: 2px solid #600;
	background-color: #FFE8E8;
}
.box-line.ocher {
	border: 2px solid #660;
	background-color: #FFFFEE;
}
.box-line.purple {
	border: 2px solid #90F;
	background-color: #F5E8FF;
}
.box-line.pink {
	border: 2px solid #F0F;
	background-color: #FFF0FF;
}
/* stickynote */
.box-stickynote {
	width: 90%;
	margin-right: auto;
	margin-left: auto;
	margin-top: 10px;
	margin-bottom: 30px;
	padding: 15px;
	border-radius: 0px;
	background-color: #FFF;
	line-height: 150%;
	font-size: 14px;
	-webkit-filter:drop-shadow(1px 2px 2px rgba(0, 0, 0, 0.2));
	-moz-filter:drop-shadow(1px 2px 2px rgba(0, 0, 0, 0.2));
	-ms-filter:drop-shadow(1px 2px 2px rgba(0, 0, 0, 0.2));
	filter:drop-shadow(1px 2px 2px rgba(0, 0, 0, 0.2));
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 7px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #CCC;
	border-right-color: #CCC;
	border-bottom-color: #CCC;
}
.box-stickynote.red {
	border-left-color: #C00;
}
.box-stickynote.blue {
	border-left-color: #069;
}
.box-stickynote.green {
	border-left-color: #066;
}
.box-stickynote.orange {
	border-left-color: #F60;
}
.box-stickynote.brown {
	border-left-color: #600;
}
.box-stickynote.ocher {
	border-left-color: #660;
}
.box-stickynote.purple {
	border-left-color: #90F;
}
.box-stickynote.pink {
	border-left-color: #F0F;
}
/* caution */
.box-caution {
	position: relative;
	width: 90%;
	margin-right: auto;
	margin-left: auto;
	margin-top: 25px;
	margin-bottom: 30px;
	padding: 15px;
	border-radius: 10px;
	background-color: #FFF;
	line-height: 150%;
	font-size: 14px;
    color: #C00;
	border: 2px solid #C00;
}
.box-caution::before {
	content: "\6ce8\610f\ff01";
    position: absolute;
    padding: 10px;
    left: 20px;
    top: -23px;
    background-color: #FFF;
    color: #C00;
    font-weight: bold;
}
/* important */
.box-important {
	position: relative;
	width: 90%;
	margin-right: auto;
	margin-left: auto;
	margin-top: 25px;
	margin-bottom: 30px;
	padding: 15px;
	border-radius: 10px;
	background-color: #FFF;
	line-height: 150%;
	font-size: 14px;
}
.box-important::before {
	content: "\91cd\8981\ff01";
    position: absolute;
    padding: 10px;
    left: 20px;
    top: -23px;
    background-color: #FFF;
    font-weight: bold;
}
.box-important.red {
	border: 2px solid #C00;
}
.box-important.red::before {
    color: #C00;
}
.box-important.blue {
	border: 2px solid #069;
}
.box-important.blue::before {
    color: #069;
}
.box-important.green {
	border: 2px solid #066;
}
.box-important.green::before {
    color: #066;
}
.box-important.orange {
	border: 2px solid #F60;
}
.box-important.orange::before {
    color: #F60;
}
.box-important.brown {
	border: 2px solid #600;
}
.box-important.brown::before {
    color: #600;
}
.box-important.ocher {
	border: 2px solid #660;
}
.box-important.ocher::before {
    color: #660;
}
.box-important.purple {
	border: 2px solid #90F;
}
.box-important.purple::before {
    color: #90F;
}
.box-important.pink {
	border: 2px solid #F0F;
}
.box-important.pink::before {
    color: #F0F;
}
/* point */
.box-point {
	position: relative;
	width: 90%;
	margin-right: auto;
	margin-left: auto;
	margin-top: 25px;
	margin-bottom: 30px;
	padding: 15px;
	border-radius: 10px;
	background-color: #FFF;
	line-height: 150%;
	font-size: 14px;
}
.box-point::before {
	content: "\Point\ff01";
    position: absolute;
    padding: 10px;
    left: 20px;
    top: -23px;
    background-color: #FFF;
    font-weight: bold;
}
.box-point.red {
	border: 2px solid #C00;
}
.box-point.red::before {
    color: #C00;
}
.box-point.blue {
	border: 2px solid #069;
}
.box-point.blue::before {
    color: #069;
}
.box-point.green {
	border: 2px solid #066;
}
.box-point.green::before {
    color: #066;
}
.box-point.orange {
	border: 2px solid #F60;
}
.box-point.orange::before {
    color: #F60;
}
.box-point.brown {
	border: 2px solid #600;
}
.box-point.brown::before {
    color: #600;
}
.box-point.ocher {
	border: 2px solid #660;
}
.box-point.ocher::before {
    color: #660;
}
.box-point.purple {
	border: 2px solid #90F;
}
.box-point.purple::before {
    color: #90F;
}
.box-point.pink {
	border: 2px solid #F0F;
}
.box-point.pink::before {
    color: #F0F;
}
/* supplement */
.box-supplement {
	position: relative;
	width: 90%;
	margin-right: auto;
	margin-left: auto;
	margin-top: 25px;
	margin-bottom: 30px;
	padding: 15px;
	border-radius: 10px;
	background-color: #FFF;
	line-height: 150%;
	font-size: 14px;
}
.box-supplement::before {
	content: "\88dc\8db3\ff01";
    position: absolute;
    padding: 10px;
    left: 20px;
    top: -23px;
    background-color: #FFF;
    font-weight: bold;
}
.box-supplement.red {
	border: 2px solid #C00;
}
.box-supplement.red::before {
    color: #C00;
}
.box-supplement.blue {
	border: 2px solid #069;
}
.box-supplement.blue::before {
    color: #069;
}
.box-supplement.green {
	border: 2px solid #066;
}
.box-supplement.green::before {
    color: #066;
}
.box-supplement.orange {
	border: 2px solid #F60;
}
.box-supplement.orange::before {
    color: #F60;
}
.box-supplement.brown {
	border: 2px solid #600;
}
.box-supplement.brown::before {
    color: #600;
}
.box-supplement.ocher {
	border: 2px solid #660;
}
.box-supplement.ocher::before {
    color: #660;
}
.box-supplement.purple {
	border: 2px solid #90F;
}
.box-supplement.purple::before {
    color: #90F;
}
.box-supplement.pink {
	border: 2px solid #F0F;
}
.box-supplement.pink::before {
    color: #F0F;
}
/* advice */
.box-advice {
	position: relative;
	width: 90%;
	margin-right: auto;
	margin-left: auto;
	margin-top: 25px;
	margin-bottom: 30px;
	padding: 15px;
	border-radius: 10px;
	background-color: #FFF;
	line-height: 150%;
	font-size: 14px;
}
.box-advice::before {
	content: "\30a2\30c9\30d0\30a4\30b9\ff01";
    position: absolute;
    padding: 10px;
    left: 20px;
    top: -23px;
    background-color: #FFF;
    font-weight: bold;
}
.box-advice.red {
	border: 2px solid #C00;
}
.box-advice.red::before {
    color: #C00;
}
.box-advice.blue {
	border: 2px solid #069;
}
.box-advice.blue::before {
    color: #069;
}
.box-advice.green {
	border: 2px solid #066;
}
.box-advice.green::before {
    color: #066;
}
.box-advice.orange {
	border: 2px solid #F60;
}
.box-advice.orange::before {
    color: #F60;
}
.box-advice.brown {
	border: 2px solid #600;
}
.box-advice.brown::before {
    color: #600;
}
.box-advice.ocher {
	border: 2px solid #660;
}
.box-advice.ocher::before {
    color: #660;
}
.box-advice.purple {
	border: 2px solid #90F;
}
.box-advice.purple::before {
    color: #90F;
}
.box-advice.pink {
	border: 2px solid #F0F;
}
.box-advice.pink::before {
    color: #F0F;
}
/* pr */
.box-pr {
	position: relative;
	width: 90%;
	margin-right: auto;
	margin-left: auto;
	margin-top: 25px;
	margin-bottom: 30px;
	padding: 15px;
	border-radius: 10px;
	background-color: #FFF;
	line-height: 150%;
	font-size: 14px;
}
.box-pr::before {
	content: "PR\ff01";
    position: absolute;
    padding: 10px;
    left: 20px;
    top: -23px;
    background-color: #FFF;
    font-weight: bold;
}
.box-pr.red {
	border: 2px solid #C00;
}
.box-pr.red::before {
    color: #C00;
}
.box-pr.blue {
	border: 2px solid #069;
}
.box-pr.blue::before {
    color: #069;
}
.box-pr.green {
	border: 2px solid #066;
}
.box-pr.green::before {
    color: #066;
}
.box-pr.orange {
	border: 2px solid #F60;
}
.box-pr.orange::before {
    color: #F60;
}
.box-pr.brown {
	border: 2px solid #600;
}
.box-pr.brown::before {
    color: #600;
}
.box-pr.ocher {
	border: 2px solid #660;
}
.box-pr.ocher::before {
    color: #660;
}
.box-pr.purple {
	border: 2px solid #90F;
}
.box-pr.purple::before {
    color: #90F;
}
.box-pr.pink {
	border: 2px solid #F0F;
}
.box-pr.pink::before {
    color: #F0F;
}

/* *******************************************************
Common css end
******************************************************* */