@charset "UTF-8";

/* -----------------------------------------------
link color
----------------------------------------------- */
a:link {
	color: #d2691e;
}
a:visited {
	color: #d2691e;
}
a:hover {
	color: #37a34a;
}
/* -----------------------------------------------
pagination
----------------------------------------------- */
.paging .bg {
	background-color: #77bcff;
}
/* -----------------------------------------------
location
----------------------------------------------- */
.location h3 {
	background-color: #77bcff;
}
.location div {
	background-image: url(/imgm/common/wid/location_bg.png);
}
.location p {
	border-top: 10px solid #77bcff;
}

/* -----------------------------------------------
location
----------------------------------------------- */
.volume {
	color: #00a73b;
	font-weight: bold;
	margin: 8px 0 8px;
	min-height: 11px;
}
/* -----------------------------------------------
contents name
----------------------------------------------- */
#contents-name h2 a {
	color: #666666;
	background-image: url(/imgm/common/wid/service_icon.png);
}
/* -----------------------------------------------
fp
----------------------------------------------- */
.fps{
	line-height: 150%;
	padding: 10px 0px;
}
.fps_s{
	padding: 10px 0px;
	line-height: 130%;
	letter-spacing: 1px;
}
.fp {
	clear: both;
	margin-top: 10px;
	margin-bottom: 10px;
}
.fp dl {
	margin-bottom: 20px;
}
.fp dt {
	color: #00a73b;
	font-weight: bold;
	margin-bottom: 5px;
	min-height: 11px;
}
.fp dd {
	line-height: 146%;
	margin-bottom: 6px;
}
.fps_a{
    font-weight: bold;
	margin-top: 14px;
}
.fp a{
	text-decoration: none;
	color: #0089e4;
	font-weight: bold;
}
.fp a:hover{
	color: #FFAF26;
}
.fp_t{
	font-weight: bold;
	font-size: 16px;
    padding-top: 10px;
}
.fp_b{
	padding-right: 10px;
	color: #00a73b;
}
.con{
	text-align: center;
	padding-top: 20px;
}

/* -----------------------------------------------
banner
----------------------------------------------- */

.bn {
	text-align: center;
	background-color: #f08200;
	margin-bottom: 10px;
}
.bn img {
	vertical-align: top;
	width: 320px;
	height: 50px;
}
/* -----------------------------------------------
Free paper 表紙
----------------------------------------------- */
 .freepaper {
	text-align: center;
	background-color: #efefef;
	margin-bottom: 20px;
}
.freepaper img {
	max-width: 100%;
	height: auto;
}
/* =========================================================
footer menu
========================================================= */
/* -----------------------------------------------
footer reg
----------------------------------------------- */
.footer-reg {
	display: none;
}
/* -----------------------------------------------
footer menu
----------------------------------------------- */
.footer-menu .service {
	background-color: #77bcff;
}
/* -----------------------------------------------
footer service menu
----------------------------------------------- */
#side-left .menu h3 {
	border-top: 4px solid #77bcff;
	border-bottom: 1px solid #77bcff;
}
#side-left .menu h3 a {
	color: #666666;
	background-image: url(/imgm/common/wid/service_icon.png);
}
#side-left .menu div a {
	background-color: #77bcff;
}
#side-left .return {
	border-top: 1px dashed #77bcff;
	border-bottom: 1px dashed #77bcff;
}
/* =========================================================
how to
========================================================= */
#howto {
	margin: 5px 0;
}
#howto dl {
	margin-bottom: 12px;
}
#howto dt {
	color: #00a73b;
	font-weight: bold;
	margin-bottom: 5px;
	min-height: 11px;
}
#howto dd {
	line-height: 146%;
}
#howto .sample {
	text-align: center;
	margin-top: 10px;
}
#howto .sample img {
	vertical-align: bottom;
	margin: 5px;
}
#howto .sample img:first-child {
	width: 306px;
	height: 233px;
}
#howto .sample img:nth-child(2) {
	width: 289px;
	height: 276px;
}
/* =========================================================
result
========================================================= */
#result .note {
	font-size: 92%;
	color: #ff6666;
	margin-bottom: 17px;
}
/* -----------------------------------------------
page accordion
----------------------------------------------- */
#result .accordion_btn {
	position: relative;
	color: #ffffff;
	font-size: 80%;
	font-weight: bold;
	background-color: #f59c32;
	padding: 8px 10px 10px;
	margin-bottom: 1px;
	border-radius: 2px;
}
#result .accordion_btn::after {
	content: "";
	position: absolute;
	top: 13px;
	right: 15px;
	width: 4px;
	height: 4px;
	border-right: 3px solid rgba(255,255,255,.7);
	border-bottom: 3px solid rgba(255,255,255,.7);
	transform: rotate(45deg);
}
#result .a_contents {
	display: none;
}
#result .a_contents .box:first-child {
	padding-top: 10px;
}
#result .a_contents .nodata {
	padding: 8px 0;
	font-size: 92%;
}
/* =========================================================
list
========================================================= */
#list {
	margin-bottom: 20px;
}
#list .section {
	margin-bottom: 10px;
}
#list .section .wid {
	font-size: 92%;
	font-weight: bold;
	margin-bottom: 0px;
}
#list .section .wid span {
	background: linear-gradient(transparent 60%, #ffff66 60%);
	margin-right: 4px;
}
#list .section .wid {
	margin-bottom: 10px;
}
#list .frame {
	border: 2px solid #e8ece9;
}
/* -----------------------------------------------
header
----------------------------------------------- */
#list .section .header {
	background-color: #f7f6f5;
	border-bottom: 1px dotted #dcdcdc;
	padding: 5px;

}
#list .section .header:after {
	content: ".";
	display: block;
	height: 0px;
	clear: both;
	visibility: hidden;
}
#list .section .header .actcat {
	float: left;
}
#list .section .header .actcat span {
	display: inline-block;
	font-size: 12px;
	line-height: 100%;
	padding: 4px;
}
#list .section .header .actcat .service {
	color: #ffffff;
}
#list .section .header .actcat .cat {
	background-color: #ffffff;
	margin-left: 1px;
}
#list .section .header .date {
	float: right;
	color: #666666;
	font-size: 70%;
	margin-top: 2px;
}
#list .section .header .date .new {
	color: #ff3399;
}
/* -----------------------------------------------
body
----------------------------------------------- */
#list .section .wrapper {
	margin: 5px;
}
#list .section h3 {
	font-size: 98%;
	font-weight: bold;
	line-height: 126%;
	padding: 0 0 6px 0;
}
#list .section .body {
	display: table;
	border-collapse: collapse;
	border-spacing: 0;
	margin-bottom: 5px;
	width: 100%;
}
#list .section .body .data {
	display: table-cell;
	vertical-align: top;
	width: 100%;
}
/* -----------------------------------------------
thumbnail
----------------------------------------------- */
#list .section .body .thumbnail {
	display: table-cell;
	vertical-align: top;
	text-align: center;
}
#list .section .body .thumbnail .thumb {
	text-align: center;
	margin: 0 8px 2px 0;
	width: 120px;
}
#list .section .body .thumbnail .thumb img.medium {
	vertical-align: middle;
	max-width: 120px;
	max-height: 90px;
}
/* -----------------------------------------------
data
----------------------------------------------- */
#list .section .body .data p {
	font-size: 92%;
	line-height: 137%;
	margin-bottom: 8px;
}
/* -----------------------------------------------
contact
----------------------------------------------- */
#list .section .contact .box {
	display: table;
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
}
#list .section .contact .box .info {
	display: table-cell;
	vertical-align: middle;
	width: 100%;
}
#list .section .contact .box .name {
	font-weight: bold;
	font-size: 80%;
	margin-bottom: 4px;
}
#list .section .contact ul {
	list-style-type: none;
	padding: 0;
	margin: 0 0 8px 0;
}
#list .section .contact ul:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	height: 0;
	clear: both;
}
#list .section .contact li {
	float: left;
	display: inline-block;
	color: #666666;
	font-size: 80%;
	line-height: 126%;
	margin-right: 8px;
}
#list .section .contact li span {
	color: #999999;
	font-weight: normal;
	margin-right: 3px;
}
/* -----------------------------------------------
detail
----------------------------------------------- */
#list .section .detail {
	font-size: 80%;
	text-align: center;
}
#list .section .detail a {
	position: relative;
	display: block;
	color: #ffffff;
	font-weight: bold;
	text-align: center;
	border-radius: 2px;
	padding: 5px 10px;
	z-index: 100;
}
#list .section .detail a:before {
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	left: 20px;
	background-color: #ffffff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	margin-top: -4px;
	width: 8px;
	height: 8px;
}
#list .section .detail a:after {
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	left: 15px;
	background: #e8ece9;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	margin-top: -4px;
	width: 8px;
	height: 8px;
}
/* -----------------------------------------------
service color
----------------------------------------------- */

/* tg */

#list .tg .header {
	background-color: #f2f1de;
}
#list .tg .header .actcat .service {
	background-color: #8f8f5f;
}
#list .tg .detail a,
#list .tg .detail a:after {
	background-color: #8f8f5f;
}

/* cf */

#list .cf .header {
	background-color: #ecf5e1;
}
#list .cf .header .actcat .service {
	background-color: #90ac1a;
}
#list .cf .detail a,
#list .cf .detail a:after {
	background-color: #90ac1a;
}

/* ev */

#list .ev .header {
	background-color: #f7e7e7;
}
#list .ev .header .actcat .service {
	background-color: #660000;
}
#list .ev .detail a,
#list .ev .detail a:after {
	background-color: #660000;
}

/* cj */

#list .cj .header {
	background-color: #e8f7f6;
}
#list .cj .header .actcat .service {
	background-color: #5faea1;
}
#list .cj .detail a,
#list .cj .detail a:after {
	background-color: #5faea1;
}

/* ib */

#list .ib .header {
	background-color: #e8ecf6;
}
#list .ib .header .actcat .service {
	background-color: #336699;
}
#list .ib .detail a,
#list .ib .detail a:after {
	background-color: #336699;
}

/* ln */

#list .ln .header {
	background-color: #fff5ee;
}
#list .ln .header .actcat .service {
	background-color: #fc7070;
}
#list .ln .detail a,
#list .ln .detail a:after {
	background-color: #fc7070;
}

/* bs */

#list .bs .header {
	background-color: #fff9e7;
}
#list .bs .header .actcat .service {
	background-color: #f8b500;
}
#list .bs .detail a,
#list .bs .detail a:after {
	background-color: #f8b500;
}

/* bsc */

#list .bsc .header {
	background-color: #f6ece5;
}
#list .bsc .header .actcat .service {
	background-color: #533c32;
}
#list .bsc .detail a,
#list .bsc .detail a:after {
	background-color: #533c32;
}

/* rp */

#list .rp .header {
	background-color: #e5f1f3;
}
#list .rp .header .actcat .service {
	background-color: #006363;
}
#list .rp .detail a,
#list .rp .detail a:after {
	background-color: #006363;
}

/* re */

#list .re .header {
	background-color: #edf9f3;
}
#list .re .header .actcat .service {
	background-color: #37a76f;
}
#list .re .detail a,
#list .re .detail a:after {
	background-color: #37a76f;
}

/* fr */

#list .fr .header {
	background-color: #f1fbfb;
}
#list .fr .header .actcat .service {
	background-color: #009999;
}
#list .fr .detail a,
#list .fr .detail a:after {
	background-color: #009999;
}

/* lifeline */

#list .lifeline .header {
	background-color: #edf6f4;
}
#list .lifeline .header .actcat .service {
	background-color: #007f61;
}
#list .lifeline .detail a,
#list .lifeline .detail a:after {
	background-color: #007f61;
}

/* mc */

#list .mc .header {
	background-color: #eff5f9;
}
#list .mc .header .actcat .service {
	background-color: #043c78;
}
#list .mc .detail a,
#list .mc .detail a:after {
	background-color: #043c78;
}

/* eb */

#list .eb .header {
	background-color: #fdeee6;
}
#list .eb .header .actcat .service {
	background-color: #ed6c2a;
}
#list .eb .detail a,
#list .eb .detail a:after {
	background-color: #ed6c2a;
}

/* ci */

#list .ci .header {
	background-color: #f7f6f5;
}
#list .ci .header .actcat .service {
	background-color: #666666;
}
#list .ci .detail a,
#list .ci .detail a:after {
	background-color: #666666;
}

/* flyer */

#list .flyer .header {
	background-color: #fff0db;
}
#list .flyer .header .actcat .service {
	background-color: #ff9900;
}
#list .flyer .detail a,
#list .flyer .detail a:after {
	background-color: #ff9900;
}

/* wk */

#list .wk .header {
	background-color: #e8f5ff;
}
#list .wk .header .actcat .service {
	background-color: #2186eb;
}
#list .wk .detail a,
#list .wk .detail a:after {
	background-color: #2186eb;
}
/* =========================================================
ocr_scan
========================================================= */
#ocr_scan {
	margin: 0 -10px;
}
/* -----------------------------------------------
ocr_main
----------------------------------------------- */
#ocr_main #videoBox {
	position: relative;
}
#ocr_main #videoBox .overlay {
	background-color: #fff;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1001;
	opacity: 0.5;
	display: none;
}
#ocr_main #videoBox .overlay span {
	display: inline-block;
	background: url(/img/common/loader_circle_medium.gif) no-repeat 0 0;
	width: 58px;
	height: 58px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1002;
}
#ocr_main #videoBox .wrap {
	width: 100%;
	/* aspect-ratio: 2 / 3; */
	overflow: hidden;
	margin-bottom: 10px;
}
#ocr_main #targetBox {
	width: 100%;
	height: 100%;
	position: absolute;
	background: transparent;
	z-index: 1000;
	box-sizing: border-box;
}
#ocr_main #targetBox img {
	outline: 2px solid rgba(255, 255, 0, 0.8);
	outline-offset: -6px;
}
#ocr_main #cameraDisplay {
	width: 100%;
	position: relative;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
#ocr_main #documentcanvas {
	display: none;
}
/* -----------------------------------------------
info
----------------------------------------------- */
#ocr_main .info {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	margin: 10px 20px 0;
}
#ocr_main .info .text {
	flex-basis: 100%;
}
#ocr_main .info .text p,
#ocr_main .info .text .article {
	background-color: #eee;
	color: #333;
	font-size: 14px;
	text-align: left;
	font-weight: bold;
	position: relative;
	padding: 10px 15px;
	border-radius: 12px;
	margin-right: 18px;
	margin-bottom: 10px;
	line-height: 137%;
}
#ocr_main .info .text p:after,
#ocr_main .info .text .article:after {
	content: "";
	position: absolute;
	top: 11px;
	right: -20px;
	border: 8px solid transparent;
	border-left: 18px solid #eee;
}
#ocr_main .info .text .article {
	display: none;
	background-color: #CFE6E6;
	font-weight: normal;
	font-size: 13px;
	padding: 15px;
}
#ocr_main .info .text .article:after {
	border-left: 18px solid #CFE6E6;
}
#ocr_main .info .text .article:hover,
#ocr_main .info .text .article:hover:after {
	opacity: 0.8;
}
#ocr_main .info .text .article .title {
	display: block;
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	font-weight: bold;
	color: #0066cc;
}
#ocr_main .info .text .article .content {
	display: block;
}
#ocr_main .info .img {
	width: 45px;
	height: 36px;
	display: inline-block;
	background-image: url('/imgm/common/common/icon_vivichan.png');
	background-size: 41px 36px;
	background-repeat: no-repeat;
}
#ocr_main .info #searching {
	display: none;
}
#ocr_main .hint {
	border-top: 3px solid #eee;
	color: #999;
	font-size: 12px;
	padding-top: 10px;
	margin: 50px 20px;
}
#ocr_main .hint dt {
	font-weight: bold;
	margin-bottom: 4px;
}
#ocr_main .hint ul {
	margin: 0;
	padding-left: 2em;
}
#ocr_main .hint li {
	margin-bottom: 2px;
}
/* -----------------------------------------------
ocr_error
----------------------------------------------- */
#ocr_scan #ocr_error {
	display: none;
	border: 1px solid #e6eae6;
	background-color: #f7f6f5;
	padding: 20px;
	margin: 15px 10px;
	line-height: 146%;
	font-size: 14px;
}
/* -----------------------------------------------
landscape
----------------------------------------------- */
@media screen and (orientation: landscape) {
	#ocr_main {
		width: 50vw;
		margin: 0 auto;
	}
	#ocr_main #cameraDisplay {
		width: 50vw;
	}
	#ocr_main .info {
		margin: 0;
	}
	#ocr_main .hint {
		margin-left: 0;
		margin-right: 0;
	}
}