@charset 'UTF-8';

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

www.keio-unyu.co.jp
/common/css/theme_pc
Ver.201803

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

01. HTML初期化
02. ページ設定
　02-01. ヘッダー
　02-02. コンテンツ
　02-03. フッター

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





/** |01. HTML初期化| >> *************************************************************** >> START **/


* {font-size: inherit;}

hr {display: none;}

body, header, main, footer, section, article, aside, menu, nav,
address, div, h1, h2, h3, h4, h5, h6, p, hr,
ul, ol, li, dl, dt, dd, table, th, td, figure, figcaption {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

header, main, footer, section, article, aside, nav, figure {display: block;}

body {
	background-color: #fff;
	color: #333;
	font-family: 'メイリオ', Meiryo, 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'MS PGothic', 'MS UI Gothic', Helvetica, Arial, sans-serif;
	-moz-font-feature-settings: 'pkna' 1;
	-webkit-font-feature-settings: 'pkna' 1;
	font-feature-settings: 'pkna' 1;
	font-size: 18px;
	min-width: 1200px;
	overflow-wrap: break-word;
	word-wrap: break-word;
	z-index: 1;
}

table {border-collapse: collapse;}

table, th, td, img, iframe {border: none;}

address {font-style: normal;}

li {list-style: none;}

img {vertical-align: top;}

img[src*="img/sp/"] {
	height: 100%;
	visibility: hidden;
	width: 100%;
}

a:hover img, a:active img {opacity: 0.5;}

a {color: #103675;}

a:link, a:visited {text-decoration: none;}
a:hover, a:active {text-decoration: underline;}

input[type="text"], textarea {
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	border: 1px solid #a9a9a9;
	border-radius: 0;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	box-sizing: border-box;
	font-family: inherit;
	font-size: inherit;
	padding: 0;
}

select {
	border: 1px solid #a9a9a9;
	border-radius: 0;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	box-sizing: border-box;
	font-family: inherit;
	font-size: inherit;
	padding: 0;
}

input[type="submit"], input[type="button"] {
	-moz-appearance: button;
	-webkit-appearance: button;
	appearance: button;
	background-color: transparent;
	border: none;
	border-radius: 0;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	box-sizing: border-box;
	cursor: pointer;
	padding: 0;
}

input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {display: none;}

input[type="submit"]::focus,
input[type="button"]::focus {outline-offset: -2px;}

.clearfix {zoom: 1;}

.clearfix::after {
	clear: both;
	content: '';
	display: block;
}


/** |01. HTML初期化| << ***************************************************************** << END **/





/** |02. ページ設定| >> *************************************************************** >> START **/


	/** |02-01. ヘッダー| **************************************************************** START **/


	.site {
		background-color: #fff;
		border: 1px solid #fff;
		height: 126px;
		margin: 0 auto;
		width: 1200px;
		z-index: 2;
	}


		/** [会社名] >> +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ >> START **/

		.site .trademark {
			background: url(/common/img/pc/st_img_trademark.png) no-repeat 0 0;
			height: 32px;
			left: 50%;
			margin-left: -586px;
			position: absolute;
			top: 26px;
			width: 270px;
		}

		@media screen and (max-width: 1200px) {
			.site .trademark {
				left: 14px;
				margin-left: 0;
			}
		}


		/** [メニュー開閉] >> +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ >> START **/

		.site .menu {display: none;}


		/** [メニューリスト] >> +++++++++++++++++++++++++++++++++++++++++++++++++++++++ >> START **/

		.site .pages {
			font-size: 16px;
			height: 1em;
			letter-spacing: -1em;
			margin: 86px 0 0 18px;
			width: 840px;
			z-index: 3;
		}

			.site .pages > li {
				display: inline-block;
				font-size: inherit;
				height: 1em;
				letter-spacing: normal;
				margin-left: 44px;
			}

			.site .pages > li:first-of-type {margin-left: 0;}


				/* カテゴリ */
				.site .pages .label {padding-bottom: 18px;}

					.site .pages > li a {
						color: inherit;
						font-weight: bold;
					}

					.site .pages > li:hover a {
						color: #999;
						text-decoration: none;
					}


				/* ページリスト */
				.site .pages .list {
					background-color: #103675;
					font-size: 0;
					left: 0;
					min-width: 1200px;
					opacity: 0;
					position: absolute;
					right: 0;
					text-align: center;
					top: 126px;
					transition: 0.3s;
					visibility: hidden;
					z-index: 4;
				}

				.site .pages li:hover .list {
					opacity: 1;
					visibility: visible;
				}

					.site .pages .list::before {
						background: url(/common/img/pc/st_img_page.png) no-repeat 0 0;
						content: '';
						display: block;
						height: 18px;
						left: 50%;
						position: absolute;
						right: 0;
						bottom: 100%;
						width: 22px;
					}

					.site .pages .moving::before {margin-left: -530px;}
					.site .pages .logistics::before {margin-left: -370px;}
					.site .pages .company::before {margin-left: -248px;}

					.site .pages .list > li {
						color: #fff;
						display: inline-block;
						font-size: 14px;
						margin-left: 80px;
						padding: 20px 0 30px;
						text-align: left;
						vertical-align: top;
						width: 270px;
					}

					.site .pages .list > li:first-of-type {margin-left: 0;}

					.site .pages .moving > li {
						margin-left: 40px;
						width: 202px;
					}

						.site .pages .list .index {}

							.site .pages .list .index dt {background: no-repeat 0 0;}

							.site .pages .moving li:nth-of-type(1) .index dt {background-image: url(/common/img/pc/st_bg_moving01.png);}
							.site .pages .moving li:nth-of-type(2) .index dt {background-image: url(/common/img/pc/st_bg_moving02.png);}
							.site .pages .moving li:nth-of-type(3) .index dt {background-image: url(/common/img/pc/st_bg_moving03.png);}
							.site .pages .moving li:nth-of-type(4) .index dt {background-image: url(/common/img/pc/st_bg_moving04.png);}
							.site .pages .moving li:nth-of-type(5) .index dt {background-image: url(/common/img/pc/st_bg_moving05.png);}

							.site .pages .logistics li:nth-of-type(1) .index dt {background-image: url(/common/img/pc/st_bg_logistics01.png);}
							.site .pages .logistics li:nth-of-type(2) .index dt {background-image: url(/common/img/pc/st_bg_logistics02.png);}
							.site .pages .logistics li:nth-of-type(3) .index dt {background-image: url(/common/img/pc/st_bg_logistics03.png);}

							.site .pages .company li:nth-of-type(1) .index dt {background-image: url(/common/img/pc/st_bg_company01.png);}
							.site .pages .company li:nth-of-type(2) .index dt {background-image: url(/common/img/pc/st_bg_company02.png);}

								.site .pages .list .index dt a {
									color: inherit;
									display: block;
									font-size: 16px;
									height: 98px;
									line-height: 98px;
									text-align: center;
									text-shadow: 0 0 8px rgba(0, 0, 0, 0.78);
								}

									.site .pages .list .index dt span {
										color: inherit;
										font-size: 12px;
									}

								.site .pages .list .index dt a:hover {
									border:solid 1px;
									height: 96px;
									line-height: 96px;
								}

							.site .pages .list .index dd {
								line-height: 2.14;
								padding-top: 6px;
							}

							.site .pages .list .index dd:first-of-type {padding-top: 16px;}


		/** [問い合わせ] >> +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ >> START **/

		.site::after {
			background: url(/common/img/pc/st_txt_inquiry.png) no-repeat 0 0;
			content: '';
			display: block;
			height: 142px;
			position: absolute;
			right: 50%;
			margin-right: -586px;
			top: 0;
			width: 300px;
			z-index: 4;
		}

		@media screen and (max-width: 1200px) {
			.site::after {
				left: 886px;
				margin-left: 0;
				right: auto;
			}
		}


	/** |02-01. ヘッダー| ****************************************************************** END **/



	/** |02-02. コンテンツ| ************************************************************** START **/


	.contents {z-index: 1;}


		/** [ページタイトル] >> +++++++++++++++++++++++++++++++++++++++++++++++++++++++ >> START **/

		.contents .theme {
			background-color: #f7f7f7;
			text-align: center;
		}


			/* タイトル */
			.contents .theme .title {
				background: no-repeat 50% 50%;
				background-size: 100% auto;
				padding-top: 17.29%;/* 242px */
				position: relative;
				width: 100%;
			}

				.contents .theme .title span {
					bottom: 0;
					color: #fff;
					font-size: 40px;
					font-weight: bold;
					height: 1em;
					left: 0;
					margin: auto;
					position: absolute;
					right: 0;
					text-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
					top: 0;
				}


			/* 概要 */
			.contents .theme .abstract {
				font-size: 22px;
				padding: 42px 0 104px;
			}

				.contents .theme .abstract p {line-height: 1.75;}

				.contents .theme .abstract ul {
					margin: 0 auto;
					padding-top: 1em;
					text-align: left;
					width: 776px;
				}

					.contents .theme .abstract li {
						line-height: 1.75;
						padding-left: 1em;
						position: relative;
					}

						.contents .theme .abstract li::before {
							color: #103675;
							content: '●';
							font-size: 12px;
							left: 0;
							position: absolute;
							top: 0.5em;
						}

				.contents .theme .abstract dl {}

					.contents .theme .abstract dt,
					.contents .theme .abstract dd {line-height: 1.75;}

					.contents .theme .abstract dt {font-size: 36px;}

					.contents .theme .abstract dd {
						font-size: 20px;
						padding-top: 14px;
					}


		/** [段落] >> +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ >> START **/

		.contents section {
			margin: 0 auto;
			width: 1170px;
		}


		/* 背景付 */
		.contents .wide {
			background-color: #f7f7f7;
			margin: 72px 0 0;
			padding: 42px 0;
			width: auto;
		}

			.contents .wide > .prop {
				margin: 0 auto;
				width: 1170px;
			}


		/* コンテンツ先頭 */
		.contents .head {
			padding-top: 12px;
			position: relative;
		}

			.contents .head::before {
				background: no-repeat 0 100%;
				bottom: 100%;
				content: '';
				height: 72px;
				left: 0;
				margin: 0 auto;
				position: absolute;
				right: 0;
				width: 246px;
				z-index: 2;
			}


			/* タイトル */
			.contents * .headline {
				background: url(/common/img/pc/cnt_bg_headline.png) repeat-x 0 50%;
				color: #103675;
				font-size: 26px;
				margin-top: 48px;
				text-align: center;
				width: 100%;
			}

			.contents .head .headline:first-child,
			.contents .wide .headline:first-child {margin-top: 0;}

				.contents * .headline span {
					background-color: #fff;
					display: inline-block;
					padding: 0 32px;
				}

				.contents .wide .headline span {background-color: #f7f7f7;}










		/** [家財のリサイクル] >> +++++++++++++++++++++++++++++++++++++++++++++++++++++ >> START **/

		.contents .recycling {
			margin: 20px auto 0;
			padding-top: 80px;
			position: relative;
			width: 830px;
			z-index: 1;
		}

			.contents .recycling::before {
				background: url(/moving/common/img/pc/rcy_txt_recycle.png) no-repeat 0 0;
				content: '';
				height: 52px;
				left: 0;
				margin: 0 auto;
				position: absolute;
				right: 0;
				top: 18px;
				width: 288px;
				z-index: -1;
			}

			.contents .recycling a {
				background: url(/moving/common/img/pc/rcy_bg_recycle.png) no-repeat 100% 100%;
				color: inherit;
				display: block;
				height: 162px;
				position: relative;
				text-align: center;
				text-decoration: none;
				width: 832px;
			}

				.contents .recycling figure {
					background: url(/moving/common/img/pc/rcy_btn_recycle.png) no-repeat 0 0;
					display: block;
					height: 100%;
					width: 100%;
				}

					.contents .recycling a:hover figure {background-position: 100% 100%;}

					.contents .recycling figcaption {
						color: #103675;
						display: inline-block;
						font-size: 24px;
						font-weight: bold;
						left: 0;
						position: absolute;
						right: 0;
						top: -0.7em;
					}

					.contents .recycling a:hover figcaption {margin: 8px 0 0 8px;}

						.contents .recycling figcaption span {
							background-color: #fff;
							display: inline-block;
							height: 1em;
							padding: 0 24px;
						}

		/** [引越キャンペーン] >> +++++++++++++++++++++++++++++++++++++++++++++++++++++ >> START **/

		.contents .campaing {
			margin: 20px auto 0;
			padding-top: 80px;
			position: relative;
			width: 830px;
			z-index: 1;
		}

			.contents .campaing::before {
				background: url(/moving/common/img/pc/rcy_txt_campaign.png) no-repeat 0 0;
				content: '';
				height: 52px;
				left: 0;
				margin: 0 auto;
				position: absolute;
				right: 0;
				top: 18px;
				width: 288px;
				z-index: -1;
			}

			.contents .campaing a {
				background: url(/moving/common/img/pc/rcy_bg_recycle.png) no-repeat 100% 100%;
				color: inherit;
				display: block;
				height: 162px;
				position: relative;
				text-align: center;
				text-decoration: none;
				width: 832px;
			}

				.contents .campaing figure {
					background: url(/moving/common/img/pc/rcy_bnr_spring_cp.png) no-repeat 0 0;
					display: block;
					height: 100%;
					width: 100%;
				}

					.contents .campaing a:hover figure {background-position: 100% 100%;}

					.contents .campaing figcaption {
						color: #103675;
						display: inline-block;
						font-size: 24px;
						font-weight: bold;
						left: 0;
						position: absolute;
						right: 0;
						top: -0.7em;
					}

					.contents .campaing a:hover figcaption {margin: 8px 0 0 8px;}

						.contents .recycling figcaption span {
							background-color: #fff;
							display: inline-block;
							height: 1em;
							padding: 0 24px;
						}


.contents .campaing2 {
			margin: 20px auto 0;
			padding-top: 80px;
			position: relative;
			width: 830px;
			z-index: 1;
		}

			.contents .campaing2::before {
				
				content: '';
				height: 0px;
				left: 0;
				margin: 0 auto;
				position: absolute;
				right: 0;
				top: 18px;
				width: 288px;
				z-index: -1;
			}

			.contents .campaing2 a {
				background: url(/moving/common/img/pc/rcy_bg_recycle.png) no-repeat 100% 100%;
				color: inherit;
				display: block;
				height: 162px;
				position: relative;
				text-align: center;
				text-decoration: none;
				width: 832px;
			}

				.contents .campaing2 figure {
					background: url(/moving/common/img/pc/bnr_online_service.png) no-repeat 0 0;
					display: block;
					height: 100%;
					width: 100%;
				}

					.contents .campaing2 a:hover figure {background-position: 100% 100%;}

					.contents .campaing2 figcaption {
						color: #103675;
						display: inline-block;
						font-size: 24px;
						font-weight: bold;
						left: 0;
						position: absolute;
						right: 0;
						top: -0.7em;
					}

					.contents .campaing2 a:hover figcaption {margin: 8px 0 0 8px;}



		/** [問い合わせ] >> +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ >> START **/

		.contents .inquiry {
			background-color: #f7f7f7;
			margin-top: 60px;
			padding: 26px 0;
			text-align: center;
		}

			.contents .inquiry .free {
				background: url(/common/img/pc/cnt_txt_free.png) no-repeat 0 0;
				height: 22px;
				margin: 0 auto;
				width: 588px;
			}

			.contents .inquiry .window {
				font-size: 0;
				padding-top: 14px;
			}

				.contents .inquiry .window li {
					display: inline-block;
					font-size: 18px;
					vertical-align: top;
				}

				.contents .inquiry .window .phone {text-align: right;}

					.contents .inquiry .window .phone dt {
						background: url(/common/img/pc/cnt_txt_freedial.png) no-repeat 100% 100%;
						height: 42px;
						width: 396px;
					}

					.contents .inquiry .window .phone dd {padding-top: 4px;}

						.contents .inquiry .window .phone a {
							color: inherit;
							text-decoration: none;
							cursor: default;
						}

				.contents .inquiry .window .form {margin-left: 16px;}

					.contents .inquiry .window .form a {
						background: url(/common/img/pc/cnt_bg_inquiry.png) no-repeat 100% 100%;
						display: inline-block;
						height: 74px;
						position: relative;
						width: 374px;
					}

						.contents .inquiry .window .form a::after {
							background: url(/common/img/pc/cnt_btn_inquiry.png) no-repeat 0 0;
							bottom: 4px;
							content: '';
							display: block;
							height: 70px;
							right: 4px;
							position: absolute;
							width: 370px;
						}

						.contents .inquiry .window .form a:hover::after {
							bottom: 0;
							right: 0;
						}


		/** [フリップフロップ] >> +++++++++++++++++++++++++++++++++++++++++++++++++++++ >> START **/

		.contents .flipflop {
			height: 70px;
			margin: 60px auto 0;
			position:relative;
			width: 1200px;
			z-index: 2;
		}

			.contents .flipflop a {
				background: url(/common/img/pc/cnt_bg_flipflop.png) no-repeat 0 100%;
				display: block;
				height: 100px;
				position: absolute;
				right: 38px;
				top: 0;
				width: 94px;
			}

				.contents .flipflop a::after {
					background: url(/common/img/pc/cnt_btn_flipflop.png) no-repeat 0 0;
					bottom: 6px;
					content: '';
					display: block;
					height: 94px;
					left: 0;
					position: absolute;
					width: 94px;
					z-index: 3;
				}

				.contents .flipflop a:hover::after {bottom: 0;}


	/** |02-02. コンテンツ| **************************************************************** END **/



	/** |02-03. フッター| **************************************************************** START **/


	.publication {
		background: #fff url(/common/img/pc/pbl_bg_street02.png) repeat-x 50% 0;
		padding-top: 184px;
		position: relative;
		overflow: hidden;
		z-index: 1;
		zoom: 1;
	}

		.publication::before {
			background: url(/common/img/pc/pbl_bg_street01.png) no-repeat 50% 0;
			content: '';
			display: block;
			height: 184px;
			position: absolute;
			top: 0;
			left: 50%;
			margin-left: -850px;
			width: 1700px;
			z-index: 2;
		}

		.publication::after {
			animation: driving 6s linear infinite, bound 1.2s ease infinite;
			background: url(/common/img/pc/pbl_img_truck.png) no-repeat;
			content: '';
			display: block;
			height: 78px;
			position: absolute;
			right: 40px;
			top: 106px;
			width: 110px;
			z-index: 3;
		}

		@media screen and (min-width: 1201px) {
			.publication::after {
				animation: driving 8s linear infinite, bound 1.2s ease infinite;
			}
		}

		@media screen and (min-width: 1400px) {
			.publication::after {
				animation: driving 12s linear infinite, bound 1.2s ease infinite;
			}
		}

		@keyframes driving {
			from {
				right: -110px;
			}
			to {
				right: 100%;
			}
		}

		@keyframes bound {
			5% {
				transform: rotate(6deg);
				top: 104px;
			}
			10% {
				transform: rotate(-3deg);
				top: 104px;
			}
			15% {
				transform: rotate(0);
				top: 108px;
			}
			100% {
				top: 108px;
			}
		}


		/** [ナビゲーション] >> +++++++++++++++++++++++++++++++++++++++++++++++++++++++ >> START **/

		.publication .navigation {
			line-height: 1em;
			margin: 0 auto;
			padding: 42px 14px 32px;
			width: 1200px;
		}


			/* リスト */
			.publication .navigation .list {
				float: left;
				height: 1em;
				letter-spacing: -1em;
				width: 660px;
			}

				.publication .navigation .list li {
					display: inline-block;
					font-size: 16px;
					height: inherit;
					letter-spacing: normal;
					padding-left: 26px;
				}

				.publication .navigation .list li:first-of-type {padding-left: 0;}

					.publication .navigation .list li a {color: inherit;}

						.publication .navigation .list li a::before {
							background: url(/common/img/pc/pbl_ico_menu.png) no-repeat 0 50%;
							content: '';
							display: inline-block;
							height: 1em;
							margin-right: 0.15em;
							vertical-align: -0.1em;
							width: 1em;
						}


			/* コピーライト */
			.publication .navigation .copyright {
				float: right;
				text-align: right;
				width: 500px;
			}


	/** |02-03. フッター| ****************************************************************** END **/


/** |02. ページ設定| << ***************************************************************** << END **/