/************************************************************
　　　　主な取扱業務
************************************************************/
#business #contentArea section img {
	width: 100%;
}

#business #contentArea section nav {
	margin: 30px 0 40px ;
}

#business #contentArea section nav p {
	margin-bottom: 6px;
	text-align: center;
	font-weight: bold;
}

#business #contentArea section nav ul {
	border: 1px solid #dedede;
	border-radius: 6px;
	margin-bottom: 20px;
	overflow: hidden;
}

#business #contentArea section nav ul.guide {
	margin-top: 30px;
}

#business #contentArea section nav li + li {
	border-top: 1px solid #dedede;
}

#business #contentArea section nav li a {
	display: block;
	padding: 12px 10px;
	text-decoration: none;
	position: relative;
}

#business #contentArea section nav li a:after {
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	border-top: 1px solid #E60020;
	border-right: 1px solid #E60020;
	position: absolute;
	top: 50%;right: 20px;
	margin: -5px 0 0 0;
	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	     -ms-transform: rotate(45deg);
	        -o-transform: rotate(45deg);
	            transform: rotate(45deg);
}

#business #contentArea section p,
#business #contentArea section ul {
	margin-bottom: 20px;
}

#business #contentArea section .list {
	border: 1px solid #000;
	padding: 10px 10px 0 10px;
}

#business #contentArea section .list li {
	padding-left: 1.5em;
	position: relative;
	margin-bottom: 10px;
}

#business #contentArea section .list li:before {
	content: "・";
	position: absolute;
	left: 0;
}

/*****************************************************************/
	@media print, screen and (min-width: 920px) {

		#business #contentArea section img {
			width: auto;
		}

		#business #contentArea section .businessImg {
			width: 550px;
			float: left;
			margin: 0 100px 0 50px;
			position: relative;
		}

		#business #contentArea section nav {
			margin: 0 0 40px ;
			width: 300px;
			float: left;
			position: relative;
		}

		#business #contentArea section nav:before {
			content: "";
			position: absolute;
			height: 100%;
			width: 1px;
			background-color: #eee;
			top: 0; left: -70px;
		}

		#business #contentArea section nav ul {
			margin-bottom: 20px;
		}

		#business #contentArea section nav ul:last-child {
			margin-bottom: 0;
		}

		#business #contentArea section nav li a:after {
			-webkit-transition: all 0.1s linear;
			transition: all 0.1s linear;
		}

		#business #contentArea section nav li a:hover {
			background-color: #E60020;
			color: #fff;
		}

		#business #contentArea section nav li a:hover:after {
			border-color: #fff;
			-webkit-transition: all 0.1s linear;
			transition: all 0.1s linear;
		}

		#business #contentArea section p,
		#business #contentArea section ul {
			margin-bottom: 60px;
		}

		#business #contentArea section .list {
			padding: 30px 30px 10px 30px;
		}

	}

/************************************************************
　　　　取引媒体一覧
************************************************************/
#business #contentArea dl {
	margin-top: 30px;
}

#business #contentArea dt {
	font-weight: bold;
	border-bottom: 1px solid #ddd;
	margin-bottom: 10px;
	padding-bottom: 7px;
}

#business #contentArea dd {
	width: calc(100% / 2);
	float: left;
}

#business #contentArea dd.wide {
	width: 100%;
}

	@media print, screen and (min-width: 600px) {

		#business #contentArea dd {
			width: calc(100% / 3);
		}

		#business #contentArea dd.wide {
			width: calc(100% / 3 * 2);
		}

	}
#business #contentArea dd.else {
	width: 100%;
	margin-top: 4px;
}

#business #contentArea .other dt {
	border :none;
}

/*****************************************************************/
	@media print, screen and (min-width: 920px) {
		#business #contentArea dt {
			margin-bottom: 16px;
			padding-bottom: 12px;
		}

		#business #contentArea dl {
			margin-top: 60px;
		}

		#business #contentArea dd {
			width: calc(100% / 4 - 16px);
			padding-left: 16px;
			position: relative;
		}

		#business #contentArea dd.else {
			text-align: left;
			padding-left: 0;
		}


		#business #contentArea dd.wide {
			width: calc(100% / 2 - 16px);
		}

		#business #contentArea dd:not(.else):before {
			content: "";
			width: 10px;
			height: 10px;
			background-color: #dfdfdf;
			position: absolute;
			top:4px; left: 0;
		}

	}

/************************************************************
　　　　県版媒体資料
************************************************************/

#asahi #contentArea .leadList {

}

#asahi #contentArea .leadList li {
	margin-bottom: 10px;
	padding-left: 1.5em;
	position: relative;
}

#asahi #contentArea .leadList li span {
	font-size: 0.8em;
	display: block;
}

#asahi #contentArea .leadList li:before {
	content: "・";
	position: absolute;
	left: 0;top: 0;
}

#asahi #contentArea .tableWrap {
	width: 100%;
	overflow-x: auto;
}

#asahi #contentArea h2 {
	font-size: 18px;
	margin: 20px 0 10px;
}

#asahi #contentArea .tableWrap table {
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
	width: 100%;
	min-width: 400px;
}

#asahi #contentArea .tableWrap tr:nth-child(odd) {
	background-color: #f5f5f5;
}

#asahi #contentArea .tableWrap tr.head {
	background-color: #E60020;
	color: #fff;
	text-align: center;
}

#asahi #contentArea .tableWrap tr.head {
	background-color: #E60020;
	color: #fff;
	text-align: center;
}

#asahi #contentArea .tableWrap th,
#asahi #contentArea .tableWrap td {
	border-bottom: 1px solid #ccc;
	border-right: 1px solid #ccc;
	padding: 6px 4px;
}

#asahi #contentArea .tableWrap td {
	text-align: right;
}
#asahi #contentArea .tableWrap .head td {
	text-align: center;
}


#asahi #contentArea .tableWrap th {
	min-width: 76px;
}

#asahi #contentArea .tableWrap th span {
	display: block;
	font-size: 0.6em;
}

#asahi #contentArea .subList {
	font-size: 0.8em;
	margin-top: 16px;
}

#asahi #contentArea .subList li {
	margin-bottom: 6px;
}


/*****************************************************************/
	@media print, screen and (min-width: 920px) {

		#asahi #contentArea .leadList {
		}

		#asahi #contentArea .leadList li {
			margin-bottom: 24px;
		}

		#asahi #contentArea h2 {
			font-size: 20px;
			margin: 60px 0 20px;
		}

		#asahi #contentArea .tableWrap table {
			width: 100%;
		}

		#asahi #contentArea .tableWrap th {
			width: 180px;
		}

		#asahi #contentArea .tableWrap th span {
			font-size: 0.8em;
		}

		#asahi #contentArea .subList {
			margin-top: 50px;
		}

}


/************************************************************
　　　　水戸オーパビジョン
************************************************************/
#mito_opa_vision #contentArea section .photo img {
	width: 100%;
	margin-bottom: 40px;
}

#mito_opa_vision #contentArea section h2 {
	font-size: 16px;
	margin: 35px 0 10px 0;
	border-bottom: 1px solid #ddd;
	padding-bottom: 10px;
}

#mito_opa_vision #contentArea section .case {
	background-color: #f5f5f5;
	padding: 15px 20px;
	margin-top: 20px;
}

#mito_opa_vision #contentArea section .case h3 {
	font-size: 1em;
}

#mito_opa_vision #contentArea section .case ul li:before {
	content: "・";
}

#mito_opa_vision #contentArea section .case ul li {
	text-indent: -1em;
	margin: 5px 0 0 1em;
}

#mito_opa_vision #contentArea section .link {
	margin: 15px 0 30px;
}

#mito_opa_vision #contentArea section .link a {
	display: block;
	background-color: #e6b800;
	text-align: center;
	padding: 15px 0;
	text-decoration: none;
}

#mito_opa_vision #contentArea section .link a:hover {
	background-color: #f7d64f;
}

#mito_opa_vision #contentArea section .contact {
	border: 1px solid #000;
	padding: 15px 20px;
}

#mito_opa_vision #contentArea section .contact h3 {
	margin-bottom: 10px;
	font-size: 16px;
}

/*****************************************************************/
	@media print, screen and (min-width: 920px) {
	#mito_opa_vision #contentArea section .link {
		width: 400px;
		margin: 20px auto 50px;
	}

}

/************************************************************
　　　　インターネットサービス・ガイド
************************************************************/
/*#guide section.inBox .box {
	border: 1px solid #ddd;
	padding: 15px;
}*/

#guide section.inBox h2 {
	text-align: center;
	margin-bottom: 10px;
	font-size: 1em;
}

#guide section.inBox .photo {
	width: calc(100% + 40px);
	margin: 20px 0 0 -20px;
	vertical-align: bottom;
	line-height: 0;
}

#guide section.inBox .photo img {
	width: 100%;
}

#guide section.inBox .box ol li {
	padding: 10px 0 10px 30px;
	border-bottom: 1px dotted #ddd;
	position: relative;
}

/*
#guide section.inBox .box ol li:before {
	content: "1";
	position: absolute;
	left: 0;
	top: 10px;
	width: 18px;
	height: 18px;
	background-color: #E60020;
	color: #fff;
	text-align: center;
	font-size: 12px;
}

#guide section.inBox .box ol li:nth-child(2):before {content:"2";}
#guide section.inBox .box ol li:nth-child(3):before {content:"3";}
#guide section.inBox .box ol li:nth-child(4):before {content:"4";}
#guide section.inBox .box ol li:nth-child(5):before {content:"5";}
#guide section.inBox .box ol li:nth-child(6):before {content:"6";}
#guide section.inBox .box ol li:nth-child(7):before {content:"7";}
#guide section.inBox .box ol li:nth-child(8):before {content:"8";}
#guide section.inBox .box ol li:nth-child(9):before {content:"9";}
#guide section.inBox .box ol li:nth-child(10):before {content:"10";}
*/

#guide section.inBox .box ul li {
	padding: 10px 0 10px 30px;
	border-bottom: 1px dotted #ddd;
	position: relative;
}

#guide section.inBox .box ul li:before {
	content: "";
	position: absolute;
	left: 10px;
	top: 16px;
	width: 6px;
	height: 6px;
	background-color: #E60020;
	border-radius: 50%;
}

#guide section.inBox .box ul li span {
	display: block;
	font-size: 12px;
	margin-top: 6px;
}

#guide #point .copy {
	font-size: 18px;
	text-align: center;
	line-height: 1.8;
	margin: 20px 0 ;
}

#guide #point .copy span {
	text-decoration: underline;
}

#guide #service .lead {
	margin: 0 0 20px;
}

#guide #cost {
	margin-top: -45px;
}

#guide #cost div.budget {
	background: url('../guide/images/03.jpg') center;
	background-size: cover;
}

#guide #cost div.budget .inner {
	padding: 45px 20px 40px;
}

#guide #cost div.budget .inner p {
	margin-bottom: 10px;
}

#guide #cost div.budget .inner h2 {
	font-size: 16px;
	margin: 20px 0 10px;
}

#guide #cost div.cost {
	background-color: #f5f5f5;
	padding: 45px 20px;
	overflow: hidden;
}

#guide #cost div.cost h2 {
	font-size: 16px;
	margin-bottom: 10px;
}

#guide #cost div.cost h3 {
	margin: 10px 0 6px;
}

#guide #cost div.cost dl {
	margin-top: 6px;
}

#guide #cost div.cost dt {
	font-weight: bold;
	padding-left: 1em;
	position: relative;
}

#guide #cost div.cost dt:before,
#guide #cost div.cost li:before {
	content: "・";
	position: absolute;
	left: 0;
	top: 0;
}

#guide #cost div.cost dd {
	margin: 0 0 6px 1em;
}

#guide #cost div.cost li {
	padding-left: 1em;
	position: relative;
}

#guide #cost div.cost .sub {
	margin-top: 6px;
	font-size: 14px;
}

#guide #cost div.cost .supple {
	border: 1px solid #aaa;
	font-size: 12px;
	padding: 6px;
	line-height: 1.2;
}

#guide #cost div.cost .contact {
	margin-top: 20px;
	font-weight: bold;
	border: 1px solid #000;
	padding: 10px;
}

#guide #point .box{
	border: 3px solid #000;
}

#guide #point h2 {
	border-bottom: 3px solid #000;
	background-color: #d41326;
	color: #fff;
	padding: 8px 0;
}

#guide section.inBox .box ol {
	padding: 0 10px 10px;
}

#guide section.inBox .box ol li {
	padding-left: 1em;
	text-indent: -1em;
	border-bottom: none;
	padding: 4px 0 4px 1em;
}

/*****************************************************************/
	@media print, screen and (min-width: 920px) {

		#guide section.inBox h2 {
			margin: 40px 0 30px;
			font-size: 20px;
		}

		#guide section.inBox .photo {
			width: 1400px;
			margin: 60px 0 0 -325px;
		}

		#guide section.inBox .box ol li {
			padding: 15px 0 15px 40px;
		}

		#guide section.inBox .box ol li:before {
			top: 13px;
			width: 24px;
			height: 24px;
			font-size: 14px;
		}

		#guide section.inBox .box ul li {
			padding: 15px 0 15px 40px;
		}

		#guide section.inBox .box ul li:before {
			content: "";
			position: absolute;
			left: 10px;
			top: 20px;
			width: 10px;
			height: 10px;
		}

		#guide section.inBox .box ul li span {
			font-size: 14px;
			margin-top: 8px;
		}

		#guide #point .copy {
			font-size: 24px;
			margin: 40px 0 ;
		}

		#guide #service .lead {
			text-align: center;
			margin: 0 0 60px;
		}

		#guide #cost {
			margin-top: -80px;
		}

		#guide #cost div.budget {
			max-width: 1400px;
			margin: 0 auto;
		}

		#guide #cost div.budget .inner {
			width: 750px;
			margin: 0 auto;
			padding: 80px 0 80px;
		}

		#guide #cost div.budget .inner h2 {
			font-size: 18px;
			margin: 40px 0;
			text-align: center;
		}

		#guide #cost div.cost {
			padding: 50px 0;
			max-width: 1400px;
			margin: 0 auto;
		}

		#guide #cost div.cost .inner {
			width: 750px;
			margin: 0 auto;
			padding: 50px 0;
		}

		#guide #cost div.cost h2 {
			font-size: 18px;
		}

		#guide #cost div.cost h3 {
			font-size: 16px;
			margin: 12px 0 10px;
		}

		#guide #cost div.cost h3.cost03 {
			width: 436px;
			float: left;
		}

		#guide #cost div.cost h3.cost03 + .price {
			padding-left: 436px;
			margin: 12px 0 10px;
		}

		#guide #cost div.cost dl {
			margin-top: 12px;
		}

		#guide #cost div.cost dt {
			font-size: 16px;
			float: left;
			width: 420px;
		}

		#guide #cost div.cost dd {
			margin-bottom: 10px;
			padding-left: 420px;
		}

		#guide #cost div.cost .supple {
			width: 660px;
			padding: 10px;
		}

		#guide #point .box{
			width: 600px;
			margin: 0 auto;
		}

		#guide #point h1 {
			font-size: 40px;
		}

		#guide #point h1:after {
			content: none;
		}

		#guide #point h2 {
			padding: 12px 0;
			margin: 0;
			font-size: 26px;
		}

		#guide section.inBox .box ol {
			padding: 20px 30px;
		}

		#guide section.inBox .box ol li {
			padding: 10px 0 10px 1em;
			font-size: 18px;
		}

	}


/************************************************************
　　　　SOLUTION
************************************************************/
#solution {
	text-align: center;
	position: relative;
	letter-spacing: -0.05em;
	margin-top: -20px;
}

#solution h1 {
	background-color: #e50019;
	color: #fff;
	font-size: 14px;
	padding: 12px 0;
	line-height: normal;
}

#solution .listLingk {
	float: right;
	position: relative;
	top: -34px; right: 20px;
}

#solution .listLingk a {
	font-size: 12px;
	color: #fff;
	text-decoration: none;
}

#solution .listLingk:before {
	content: "";
	width: 0;height: 0; font-size: 0;
	border: 3px solid transparent;
	border-left: 5px solid #fff;
	position: absolute;
	top: 50%;
	left: -14px;
	margin-top: -3px;
}

#solution li a {
	display: block;
	padding: 32px 10px;
	color: #fff;
	text-decoration: none;
	position: relative;
	background-color: rgba(0,0,0,0.3);
}

#solution li a:before {
	display: block;
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top:0 ;left: 0;
	background: url('/home/images/solution_media.jpg') no-repeat center;
	background-size: cover;
	z-index: -1;
}

#solution li.branding a:before {background-image: url('/home/images/solution_branding.jpg');background-position: center bottom;}
#solution li.interactive a:before {background-image: url('/home/images/solution_interactive.jpg');}
#solution li.promotion a:before {background-image: url('/home/images/solution_promotion.jpg');}



/*****************************************************************/
	@media print, screen and (min-width: 920px) {
		#solution {
			margin-top: -50px;
		}

		#solution h1 {
			font-size: 32px;
		}

		#solution .h-01 {
			font-size: 20px;
		}

		#solution .listLingk {
			float: none;
			width: 200px;
			text-align: left;
			position: absolute;
			top: 26px; right: auto;left: 50%;
			margin-left: 415px;
		}

		#solution .listLingk a {
			font-size: 14px;
		}

		#solution ul {
			position: relative;
			height: 580px;
		}

		#solution li {
			width: calc(100% / 3);
			float: left;

		}

		#solution li a {
			padding: 65px 12px 0;
			height: 225px;
			overflow: hidden;

		}

		#solution li a:hover {
			background-color: rgba(0,0,0,0.2);
		}

		#solution li.media a {
			padding: 75px 12px 0;
			height: 215px;
		}

		#solution li:first-child {width: calc(100% / 3 * 2);}
		#solution li:nth-child(2) {float: right;}
		#solution li:nth-child(2) a{height:360px;padding-top:220px;}
		#solution li:nth-child(3) {float: right;}
		#solution li:last-child {float: left;}
		#solution li:last-child {float: left;width: calc(100% / 3 - 0.05px);}

		#solution li a:before {
			-webkit-transition: all 1s ease-out;
			    -moz-transition: all 1s ease-out;
			      -ms-transition: all 1s ease-out;
			        -o-transition: all 1s ease-out;
			             transition: all 1s ease-out;
		}

		#solution li a:hover:before {
			transform: scale(1.3);
			-webkit-transition: all 6s ease-out;
			    -moz-transition: all 6s ease-out;
			      -ms-transition: all 6s ease-out;
			        -o-transition: all 6s ease-out;
			             transition: all 6s ease-out;
		}
}




#guide #contentArea #lead p {
	margin-bottom: 20px;
}
@media print, screen and (min-width: 920px) {
	#guide #contentArea #lead p {
		margin-bottom: 60px;
	}
}



#solution_lead h3 {
	margin-top: 20px;
	padding-bottom: 0.2em;
	font-size: 14px;
	border-bottom: solid 1px #dddddd;
}
@media print, screen and (min-width: 920px) {
	#solution_lead h3 {
		margin-top: 60px;
		font-size: 16px;
	}
}

#solution_lead p {
	margin-bottom: 20px;
	font-size: 14px;
}
@media print, screen and (min-width: 920px) {
	#solution_lead p {
		margin-bottom: 60px;
		font-size: 16px;
	}
}


.lead__graphic {
	position: relative;
	height: 80px;
	margin: 30px 0;
}
@media print, screen and (min-width: 920px) {
	.lead__graphic {
		height: 140px;
	}
}





.lead__graphic__text {
	position: absolute;
	left: 50%;
	transform: translateX(-50%) translateY(0);
	width: 0;
	text-align: center;
	overflow: hidden;
}

.lead__graphic__text.upper.open-wide {
	width: 100%;
	transition: all 2.0s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.lead__graphic__text.middle.open-wide {
	width: 100%;
	transition: all 2.0s cubic-bezier(0.215, 0.61, 0.355, 1) 0.1s;
}

.lead__graphic__text.lower.open-wide {
	width: 100%;
	transition: all 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s;
}






.lead__graphic__text.upper {
	top: 0;
}

.lead__graphic__text.middle {
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
}

.lead__graphic__text.lower {
	bottom: 0;
}






.lead__graphic__mark {
	position: absolute;
	top: 50%;
	left: 50%;
	font-size: 18px;
	transform: translateX(-50%) translateY(-50%);
}
@media print, screen and (min-width: 920px) {
	.lead__graphic__mark {
		font-size: 40px;
	}
}



.lead__graphic__text span {
	display: inline-block;
	padding: 0.2em 0.5em;
	background-color: #e60020;
	color: #ffffff;
	font-size: 14px;
	white-space: nowrap;
}
@media print, screen and (min-width: 920px) {
	.lead__graphic__text span {
		font-size: 28px;
	}
}






.lead__graphic__top {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 30px;
}
@media print, screen and (min-width: 920px) {
	.lead__graphic__top {
		
	}
}

.lead__graphic__top__text {
	
}
.lead__graphic__top__text span {
	display: inline-block;
	padding: 0.2em 0.5em;
	background-color: #e60020;
	color: #ffffff;
	font-size: 14px;
	white-space: nowrap;
}

@media print, screen and (min-width: 920px) {
	.lead__graphic__top__text span {
		font-size: 28px;
	}
}

.lead__graphic__top__mark {
	font-size: 14px;
}

@media print, screen and (min-width: 920px) {
	.lead__graphic__top__mark {
		font-size: 40px;
	}
}


#business #contentArea h2 {
	margin: 30px 0;
	font-size: 16px;
}

@media print, screen and (min-width: 920px) {
	#business #contentArea h2 {
		margin: 60px 0 30px;
	}
}

#business #contentArea #topics {
	max-width: 750px;
}

@media screen and (min-width: 920px) {
	#business #contentArea #topics dl {
		padding-left: 33px;
	}
}


#business #contentArea #topics dt {
	font-size: 16px;
	border-bottom: none;
}

@media screen and (min-width: 920px) {
	#business #contentArea #topics dt {
		margin-left: -32px;
	}
}

#business #contentArea #topics dd {
	width: auto;
	padding-left: 1.0em;
}

#business #contentArea #topics dd.else {
	width: 100%;
}

@media screen and (min-width: 600px) {
	#business #contentArea #topics dd {
		width: auto;
	}
	#business #contentArea #topics dd.wide {
		width: auto;
	}
}

@media screen and (min-width: 920px) {
	#business #contentArea #topics dd {
		width: auto;
	}
}

@media print, screen and (min-width: 920px) {
	#business #contentArea #topics dd:not(.else):before {
		display: none;
	}
}