@charset 'UTF-8';

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

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

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

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

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





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


.contents .theme {
	background: url(/img/sp/thm_bg_photo01.png) no-repeat 50% 100%;
	background-size: 100% auto;
	height: 82.81vw;/* 530px */
	overflow: hidden;
	position: relative;
	width: 100%;/* 640px */
	z-index: 1;
}


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

	.contents .theme .slogan {
		left: 1.88vw;/* 12px */
		position: absolute;
		top: 8.44vw;/* 54px */
		width: 62.5vw;/* 400px */
		z-index: 4;
	}


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

	.contents .theme .truck {
		bottom: 0;
		position: absolute;
		right: 4.69vw;/* 30px */
		width: 17.81vw;/* 114px */
		z-index: 3;
	}

	.contents .theme .street {
		bottom: 0;
		font-size: 0;
		left: 0;
		height: 22.81vw;/* 146px */
		overflow: hidden;
		position: absolute;
		white-space: nowrap;
		width: 100vw;/* 640px */
		z-index: 2;
	}

		.contents .theme .street img {width: 98.13vw;/* 640px */}


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

	.contents .theme .photos {width: 100vw;/* 640px */}

	.contents .theme .control {display: none;}


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





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


.contents .service {padding-bottom: 21.56%;/* 138px */}

	.contents .service::before {
		background-image: url(/img/sp/srv_txt_head.png);
		padding-top: 10.63%;/* 68px */
		width: 40%;/* 256px */
	}

		.contents .service .domain {
			margin: 0 auto;
			width: 95.31%;/* 610px */
		}

			.contents .service .domain li {
				background-color: #fff;
				border-radius: 10px;
				float: left;
				margin-top: 4.92%;/* 30px */
				overflow: hidden;
				width: 47.54%;/* 290px */
			}

			.contents .service .domain li:nth-of-type(odd) {clear: both;}

			.contents .service .domain li:nth-of-type(even) {float: right;}

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

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

					.contents .service .domain li .photo {}

					.contents .service .domain li .label {
						margin: 0 auto;
						padding: 6.9% 0;/* 20px 0 */
						width: 86.21%;/* 250px */
					}

						.contents .service .domain li .label dt {text-align: center;}

						.contents .service .domain li .label dt img[src$="srv_txt_domain01.png"] {width: 70.4%;/* 176px */}
						.contents .service .domain li .label dt img[src$="srv_txt_domain02.png"] {width: 70.1%;/* 176px */}
						.contents .service .domain li .label dt img[src$="srv_txt_domain03.png"] {width: 86.4%;/* 216px */}
						.contents .service .domain li .label dt img[src$="srv_txt_domain04.png"] {width: 52%;/* 130px */}

						.contents .service .domain li .label dd {
							line-height: 1.82;
							margin-top: 5.6%;/* 14px */
						}


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





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


.contents .information {padding-top: 3.13%;/* 20px */}

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

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

			.contents .information .title span {
				display: block;
				font-size: 2.2rem;
				font-weight: normal;
			}


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

		.contents .information .valuable {
			margin: 0 auto;
			width: 95.31%;/* 610px */
		}

			.contents .information .valuable .topic {
				background-color: #f7f7f7;
				border-radius: 10px;
				margin-top: 4.92%;/* 30px */
				width: 100%;/* 610px */
			}

				.contents .information .valuable .topic a {
					color: inherit;
					display: block;
					padding-bottom: 9.18%;/* 56px */
					position: relative;
					text-decoration: none;
					width: 100%;/* 610px */
				}

					.contents .information .valuable .topic a::after {
						background: url(/img/sp/inf_ico_topic.png) no-repeat 0 50%;
						background-size: 100% auto;
						bottom: 0;
						content: '';
						display: block;
						margin: 0 3.93% 3.93% 0;/* 0 24px 24px 0 */
						padding-top: 2.95%;/* 18px */
						position: absolute;
						right: 0;
						width: 6.56%;/* 40px */
					}

					.contents .information .valuable .topic .photo {
						position: relative;
						width: 100%;/* 610px */
					}

						.contents .information .valuable .topic .photo > img {border-radius: 10px 10px 0 0;}

						.contents .information .valuable .topic .photo figcaption {
							left: 0;
							margin-left: -1.64%;/* 10px */
							position: absolute;
							bottom: 0;
							width: 21.64%;/* 132px */
						}

					.contents .information .valuable .topic .label {
						line-height: 1.73;
						padding: 3.28% 3.93% 0;/* 20px 24px 0  */
					}

						.contents .information .valuable .topic .label span {
							display: block;
							font-size: 1.6rem;
							line-height: 1.53;
						}

					.contents .information .valuable .topic .outline {
						line-height: 1.82;
						padding: 0 3.93%;/* 0 24px */
					}

			.contents .information .valuable .more {
				margin: 0 auto;
				padding-top: 4.92%;/* 30px */
				width: 50.49%;/* 308px */
			}


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

		.contents .information .relation {
			margin: 0 auto;
			width: 96.25%;/* 616px */
		}

			.contents .information .relation dl {padding-top: 6.82%;/* 42px */}

				.contents .information .relation dt {text-align: center;}

				.contents .information .relation dt img[src$="inf_txt_relation01.png"] {width: 66.56%;/* 410px */}
				.contents .information .relation dt img[src$="inf_txt_relation02.png"] {width: 97.73%;/* 602px */}


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





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


.contents .link {
	margin: 0 auto;
	padding: 5.94% 0;/* 38px 0 */
	width: 95.31%;/* 610px */
}

	.contents .link .label {
		background: url(/common/img/sp/cnt_bg_wavy.png) repeat-x 0 100%;
		background-size: 3.75% auto;
		color: #103675;
		font-size: 2.8rem;
		font-weight: bold;
		padding-bottom: 3.61%;/* 22px */
		text-align: center;
	}

	.contents .link .list {
		padding-top: 2.95%;/* 18px */
		width: 100%;/* 610px */
	}

		.contents .link .list li {
			float: left;
			padding-top: 2.95%;/* 18px */
			width: 47.54%;/* 290px */
		}

		.contents .link .list li:nth-of-type(odd) {clear: both;}

		.contents .link .list li:nth-of-type(even) {float: right;}

			.contents .link .list li a {}


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


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


.contents .notice {padding-bottom: 21.56%;/* 138px */}

	.contents .notice::before {
		background-image: url(/img/sp/ntc_txt_head.png);
		padding-top: 10.63%;/* 68px */
		width: 40%;/* 256px */
	}

		.contents .notice .domain {
			margin: 0 auto;
			width: 95.31%;/* 610px */
		}

			.contents .notice .domain li {
				background-color: #fff;
				border-radius: 10px;
				float: left;
				margin-top: 4.92%;/* 30px */
				overflow: hidden;
				width: 47.54%;/* 290px */
			}

			.contents .notice .domain li:nth-of-type(odd) {clear: both;}

			.contents .notice .domain li:nth-of-type(even) {float: right;}

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

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