@charset 'UTF-8';

/** |READ ME| **************************************************************************************

www.keio-unyu.co.jp
/css/index_pc
Ver.201803

----------------------------------------------------------------------------------------------------

01. テーマ
02. 京王運輸の主なサービス
03. 暮らしにまつわるお得な情報
04. 関連リンク

************************************************************************************** |READ ME| **/





/** |01. テーマ| >> ******************************************************************* >> START **/


.contents .theme {
	background: url(/img/pc/thm_bg_photo01.png) no-repeat 50% 100%;
	background-size: cover;
	height: 632px;
	overflow: hidden;
	position: relative;
	width: 100%;/* 1400px */
	z-index: 1;
}


	/** [キャッチコピー] >> +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ >> START **/

	.contents .theme .slogan {
		background: url(/img/pc/thm_txt_slogan.png) no-repeat 0 0;
		height: 58px;
		left: 50%;
		position: absolute;
		top: 128px;
		margin-left: -592px;
		width: 774px;
		z-index: 4;
	}


	/** [アニメーション] >> +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ >> START **/

	.contents .theme .truck {
		background: url(/img/pc/thm_bg_truck.png) no-repeat 0 0;
		bottom: 0;
		height: 90px;
		left: 50%;
		margin-left: 332px;
		position: absolute;
		width: 142px;
		z-index: 3;
	}

	.contents .theme .street {
		bottom: 0;
		height: 180px;
		left: 0;
		position: absolute;
		width: 100%;
		z-index: 2;
	}

		.contents .theme .street li {}

			.contents .theme .street span {
				display: block;
				height: 180px;
				width: 800px;
			}


	/** [背景] >> +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ >> START **/

	.contents .theme .photos {
		background-color: #fff;
		bottom: 0;
		height: 632px;
		left: 0;
		width: 100%;
	}

		.contents .theme .photos li {
			height: 632px;
			overflow: hidden;
			position: relative;
			width: 100%;
		}

			.contents .theme .photos li img {
				bottom: 0;
				height: auto;
				left: 0;
				position: absolute;
				width: 100%;
			}


	.contents .theme .control {
		background: no-repeat 0 0;
		bottom: 0;
		cursor: pointer;
		height: 52px;
		margin: auto 0;
		position: absolute;
		top: 0;
		width: 28px;
	}

	.contents .theme .control:hover {opacity: 0.3;}

	.contents .theme .prev {
		background-image: url(/img/pc/thm_btn_prev.png);
		left: 0;
	}

	.contents .theme .next {
		background-image: url(/img/pc/thm_btn_next.png);
		right: 0;
	}


/** |01. テーマ| << ********************************************************************* << END **/





/** |02. 京王運輸の主なサービス| >> *************************************************** >> START **/


.contents .service {
	margin-top: 0;
	padding-bottom: 118px;
}

	.contents .service::before {
		background-image: url(/img/pc/srv_txt_head.png);
		height: 54px;
		width: 222px;
	}

	.contents .service .domain {
		padding-top: 34px;
		width: 1170px;
	}

		.contents .service .domain li {
			background-color: #fff;
			border-radius: 10px;
			float: left;
			margin-left: 30px;
			overflow: hidden;
			width: 270px;
		}

		.contents .service .domain li:first-of-type {margin-left: 0;}

			.contents .service .domain li a {
				color: inherit;
				display: block;
				text-decoration: none;
				width: 100%;
			}

			.contents .service .domain li a:hover {opacity: 0.5;}

				.contents .service .domain li .photo {
					background: no-repeat 0 0;
					height: 170px;
					width: 270px;
				}

				.contents .service .domain li:nth-of-type(1) .photo {background-image: url(/img/pc/srv_img_domain01.png);}
				.contents .service .domain li:nth-of-type(2) .photo {background-image: url(/img/pc/srv_img_domain02.png);}
				.contents .service .domain li:nth-of-type(3) .photo {background-image: url(/img/pc/srv_img_domain03.png);}
				.contents .service .domain li:nth-of-type(4) .photo {background-image: url(/img/pc/srv_img_domain04.png);}

				.contents .service .domain li .label {
					margin: 0 auto;
					padding: 16px 0;
					width: 230px;
				}

					.contents .service .domain li .label dt {
						background: no-repeat 50% 0;
						height: 72px;
						margin: 0 auto;
						width: 200px;
					}

					.contents .service .domain li:nth-of-type(1) .label dt {background-image: url(/img/pc/srv_txt_domain01.png);}
					.contents .service .domain li:nth-of-type(2) .label dt {background-image: url(/img/pc/srv_txt_domain02.png);}
					.contents .service .domain li:nth-of-type(3) .label dt {background-image: url(/img/pc/srv_txt_domain03.png);}
					.contents .service .domain li:nth-of-type(4) .label dt {background-image: url(/img/pc/srv_txt_domain04.png);}

					.contents .service .domain li .label dd {
						line-height: 1.78;
						margin-top: 18px;
					}


/** |02. 京王運輸の主なサービス| << ***************************************************** << END **/





/** |03. 暮らしにまつわるお得な情報| >> *********************************************** >> START **/


.contents .information {padding-top: 26px;}

	.contents .information::before {background-image: url(/img/pc/inf_txt_head.png);}

		.contents .information .title {
			background: url(/common/img/pc/cnt_bg_wavy.png) repeat-x 0 100%;
			color: #103675;
			font-size: 24px;
			padding-bottom: 30px;
			text-align: center;
		}

			.contents .information .title span {
				display: block;
				font-size: 20px;
				font-weight: normal;
				padding-bottom: 8px;
			}


		/** [お得な情報] >> +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ >> START **/

		.contents .information .valuable {
			margin: 0 auto;
			padding-top: 34px;
			width: 1170px;
		}

			.contents .information .valuable .topic {
				background-color: #f7f7f7;
				border-radius: 10px;
				float: left;
				height: 304px;
				width: 570px;
			}

			.contents .information .valuable .topic:nth-of-type(even) {float: right;}

				.contents .information .valuable .topic a {
					-moz-box-sizing: border-box;
					-webkit-box-sizing: border-box;
					box-sizing: border-box;
					color: inherit;
					display: block;
					height: 100%;
					padding: 14px 30px 52px 270px;
					position: relative;
					text-decoration: none;
					width: 100%;
				}

				.contents .information .valuable .topic a:hover {opacity: 0.5;}

					.contents .information .valuable .topic a::after {
						background: url(/img/pc/inf_ico_topic.png) no-repeat 0 0;
						bottom: 18px;
						content: '';
						display: block;
						height: 16px;
						position: absolute;
						right: 14px;
						width: 36px;
					}

					.contents .information .valuable .topic .photo {
						background: no-repeat 0 0;
						border-radius: 10px 0 0 10px;
						height: 304px;
						left: 0;
						position: absolute;
						top: 0;
						width: 250px;
					}

					.contents .information .valuable .topic:nth-of-type(1) .photo {background-image: url(/img/pc/inf_img_topic27.png);}
					.contents .information .valuable .topic:nth-of-type(2) .photo {background-image: url(/img/pc/inf_img_topic28.png);}

						.contents .information .valuable .topic .photo figcaption {
							background: no-repeat 0 0;
							height: 34px;
							left: -8px;
							position: absolute;
							top: 12px;
							width: 110px;
						}

						.contents .information .valuable .topic:nth-of-type(1) .photo figcaption {background-image: url(/img/pc/inf_txt_genre02.png);}
						.contents .information .valuable .topic:nth-of-type(2) .photo figcaption {background-image: url(/img/pc/inf_txt_genre01.png);}

					.contents .information .valuable .topic .label {line-height: 1.67;}

						.contents .information .valuable .topic .label span {
							display: block;
							font-size: 14px;
							line-height: 1.57;
							padding-bottom: 12px;
						}

					.contents .information .valuable .topic .outline {line-height: 1.78;}

			.contents .information .valuable .more {
				clear: both;
				padding-top: 28px;
				width: 1170px;
			}

				.contents .information .valuable .more a {
					background: url(/img/pc/inf_bg_more.png) no-repeat 100% 100%;
					display: block;
					height: 62px;
					margin: 0 auto;
					position: relative;
					width: 228px;
				}

					.contents .information .valuable .more a::before {
						background: url(/img/pc/inf_btn_more.png) no-repeat 0 0;
						content: '';
						display: block;
						height: 56px;
						left: 0;
						position: absolute;
						top: 0;
						width: 222px;
					}

					.contents .information .valuable .more a:hover::before {margin: 6px 0 0 6px;}


		/** [関連情報] >> +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ >> START **/

		.contents .information .relation {
			margin: 0 auto; 
			padding-top: 58px;
			width: 1170px;
		}

			.contents .information .relation dl {
				float: left;
				position:relative;
				width: 570px;
				z-index: 1;
			}

			.contents .information .relation dl:nth-of-type(even) {float: right;}

				.contents .information .relation dl::after {
					background: url(/img/pc/inf_bg_relation.png) no-repeat 0 0;
					bottom: -8px;
					content: '';
					display: block;
					height: 258px;
					right: -8px;
					position: absolute;
					width: 570px;
					z-index: -1;
				}

				.contents .information .relation dt {
					background: no-repeat 50% 0;
					width: 570px;
					height: 64px;
				}

				.contents .information .relation dl:nth-of-type(1) dt {background-image: url(/img/pc/inf_txt_relation01.png);}
				.contents .information .relation dl:nth-of-type(2) dt {background-image: url(/img/pc/inf_txt_relation02.png);}

				.contents .information .relation dd {
					height: 258px;
					position:relative;
					width: 570px;
				}

					.contents .information .relation dd a {
						background: no-repeat 0 0;
						display: block;
						width: 578px;
						height: 266px;
						position: absolute;
						top: 0;
						left: 0;
					}

					.contents .information .relation dl:nth-of-type(1) a {background-image: url(/img/pc/inf_img_relation01.png);}
					.contents .information .relation dl:nth-of-type(2) a {background-image: url(/img/pc/inf_img_relation02.png);}

					.contents .information .relation dd a:hover {
						background-position: 8px 8px;
						opacity: 0.8;
					}


/** |03. 暮らしにまつわるお得な情報| << ************************************************* << END **/





/** |04. 関連リンク| >> *************************************************************** >> START **/


.contents .link {
	margin: 0 auto;
	padding: 76px 0 8px;
	width: 1170px;
}

	.contents .link .label {
		background: url(/common/img/pc/cnt_bg_wavy.png) repeat-x 0 100%;
		color: #103675;
		font-size: 24px;
		font-weight: bold;
		padding-bottom: 30px;
		text-align: center;
	}

	.contents .link .list {
		padding-top: 0px;
		width: 1170px;
	}

		.contents .link .list li {
			float: left;
			padding-top: 22px;
			margin-left: 30px;
			width: 370px;
		}

		.contents .link .list li:nth-of-type(3n+1) {
			clear: both;
			margin-left: 0;
		}

			.contents .link .list li a {
				background: no-repeat 0 0;
				display: block;
				height 66px:
				width: 370px;
			}

			.contents .link .list li a[href*="keio.co.jp"] {background-image: url(/img/pc/lnk_img_site01.png);}
			.contents .link .list li a[href*="keiofudosan.co.jp"] {background-image: url(/img/pc/lnk_img_site02.png);}
			.contents .link .list li a[href*="keio-passport.co.jp"] {background-image: url(/img/pc/lnk_img_site03.png);}
			.contents .link .list li a[href*="mitaketozan.co.jp"] {background-image: url(/img/pc/lnk_img_site04.png);}
			.contents .link .list li a[href*="https://www.keio-unyu.co.jp/moving/personal/pdf/jrcx_0208.pdf"] {background-image: url(/img/pc/lnk_img_site05.png);}
			.contents .link .list li a:hover {opacity: 0.5;}


/** |04. 関連リンク| << ***************************************************************** << END **/

/** |05. お知らせ| >> *************************************************** >> START **/


.contents .notice {
	margin-top: 0;
	padding-bottom: 118px;
}

	.contents .notice::before {
		background-image: url(/img/pc/ntc_txt_head.png);
		height: 54px;
		width: 222px;
	}

	.contents .notice .domain {
		padding-top: 34px;
		width: 1170px;
	}

		.contents .notice .domain li {
			background-color: #fff;
			border-radius: 10px;
			float: left;
			margin-left: 30px;
			overflow: hidden;
			width: 270px;
		}

		.contents .notice .domain li:first-of-type {margin-left: 0;}

			.contents .notice .domain li a {
				color: inherit;
				display: block;
				text-decoration: none;
				width: 100%;
			}

/** |05. お知らせ| << ***************************************************** << END **/