@charset 'UTF-8';

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

www.keio-unyu.co.jp
/common/css/theme_sp
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;}

html {font-size: 50%;/* 10px = 1rem(62.5% * 0.8) */}

@media screen and (max-width: 320px) {/* iPhone 5s */
	html {font-size: 36%;}
}

@media screen and (max-width: 375px) {/* iPhone 6S */
	html {font-size: 40%;}
}

body {/* base width 640px */
	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: 2.2rem;
	overflow-wrap: break-word;
	-webkit-text-size-adjust: 100%;
	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 {
	height: auto;
	vertical-align: top;
	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;
		padding-top: 16.25%;/* 104px */
		position: relative;
		width: 100%;/* 640px */
		z-index: 1000;
	}


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

		.site .trademark {
			bottom: 0;
			height: 5vw;/* 32px */
			left: 0;
			margin: auto 0 auto 2.5%;/* auto 0 auto 16px */
			position: absolute;
			top: 0;
			width: 42.19vw;/* 270px */
		}


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

		.site .menu {
			bottom: 0;
			height: 11.25vw;/* 72px */
			margin: auto 2.5% auto 0;/* auto 16px auto 0 */
			position: absolute;
			right: 0;
			top: 0;
			width: 11.25vw;/* 72px */
		}

		.site .menu.open {
			background: url(/common/img/sp/st_btn_close.png) no-repeat 0 0;
			background-size: 100% auto;
		}

			.site .menu.open img {visibility: hidden;}


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

		.site .pages {
			background-color: #103675;
			bottom: 0;
			display: none;
			left: 0;
			overflow: auto;
			-webkit-overflow-scrolling: touch;
			position: fixed;
			right: 0;
			top: 16.25vw;/* 104px */
			z-index: 1001;
		}

			.site .pages > li {
				border-bottom: 1px solid #fff;
				font-size: 3rem;
			}

				.site .pages > li a {
					color: #fff;
					display: block;
					padding: 4.69% 11.88% 4.69% 6.25%;/* 30px 76px 30px 40px */
					position: relative;
					text-decoration: none;
				}

					.site .pages > li a::after {
						background: url(/common/img/sp/st_ico_link.png) no-repeat 50% 50%;
						background-size: 21.05% auto;
						bottom: 0;
						content: '';
						display: block;
						position: absolute;
						right: 0;
						top: 0;
						width: 11.88%;/* 76px */
					}


				/* カテゴリ */
				.site .pages .label {}

				.site .pages .label a::after {
					background: url(/common/img/sp/st_ico_expand.png) no-repeat 50% 50%;
					background-size: 31.58% auto;
				}

				.site .pages .expand a::after {background-image: url(/common/img/sp/st_ico_contract.png);}


				/* ページリスト */
				.site .pages .list {display: none;}

					.site .pages .list > li {}

						.site .pages .list .index {background-color: #0c2858;}

							.site .pages .list .index dt {border-top: 1px solid #fff;}

							.site .pages .list .index dd {display: none;}


	/** |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% 0;
				background-size: 100% auto;
				padding-top: 33.44%;/* 214px */
				position: relative;
				width: 100%;/* 640px */
			}

				.contents .theme .title span {
					bottom: 0;
					color: #fff;
					font-size: 3.6rem;
					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: 2.2rem;
				padding: 4.38% 4.38% 18.13%;/* 28px 28px 116px */
			}

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

				.contents .theme .abstract ul {
					padding-top: 1em;
					text-align: left;
				}

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

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

				.contents .theme .abstract dl {}

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

					.contents .theme .abstract dt {font-size: 2.6rem;}

					.contents .theme .abstract dd {padding-top: 3.77%/* 22px */}


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

		.contents section {}


		/* 背景付 */
		.contents .wide {
			background-color: #f7f7f7;
			margin-top: 8.44%;/* 54px */
			padding: 5.94% 0;/* 38px 0 */
		}

		.contents .wide.head {margin-top: 0;}

			.contents .wide > .prop {
				margin: 0 auto;
				width: 95.31%;/* 610px */
			}


		/* ヘッダ付 */
		.contents .head {
			padding-top: 1.56%;/* 10px */
			position: relative;
		}

			.contents .head::before {
				background: no-repeat 0 100%;
				background-size: 100% auto;
				bottom: 100%;
				content: '';
				left: 0;
				margin: 0 auto;/* 0 auto */
				padding-top: 13.75%;/* 88px */
				position: absolute;
				right: 0;
				width: 43.75%;/* 280px */
				z-index: 2;
			}


			/* タイトル */
			.contents * .headline {
				background: url(/common/img/sp/cnt_bg_headline.png) repeat-x 0 50%;
				background-size: 0.78% auto;
				color: #103675;
				font-size: 2.6rem;
				margin-top: 5.94%;/* 38px */
				text-align: center;
				width: 100%;/* 640px */
			}

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

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

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










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

		.contents .recycling {
			margin: 15.63% auto 0;/* 100px auto 0 */
			position: relative;
			width: 95.31%;/* 610px */
			z-index: 1;
		}

			.contents .recycling::before {
				background: url(/moving/common/img/sp/rcy_txt_recycle.png) no-repeat 0 0;
				background-size: 100% auto;
				content: '';
				left: 0;
				margin: -9.51% auto 0;/* 58px auto 0 */
				padding-bottom: 8.2%;/* 50px */
				position: absolute;
				right: 0;
				top: 0;
				width: 56.39%;/* 344px */
				z-index: -1;
			}

			.contents .recycling a {
				color: inherit;
				display: block;
				position: relative;
				text-align: center;
				text-decoration: none;
				width: 100%;/* 610px */
			}

			.contents .recycling a:hover {opacity: 0.5;}

				.contents .recycling a:hover img {opacity: 1;}

				.contents .recycling figure {}

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

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

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

		.campaign {
			margin: 15.63% auto 0;/* 100px auto 0 */
			position: relative;
			width: 95.31%;/* 610px */
			z-index: 1;
		}

			.campaign::before {
				background: url(/moving/common/img/sp/rcy_txt_campaign.png) no-repeat 0 0;
				background-size: 100% auto;
				content: '';
				left: 0;
				margin: -9.51% auto 0;/* 58px auto 0 */
				padding-bottom: 8.2%;/* 50px */
				position: absolute;
				right: 0;
				top: 0;
				width: 56.39%;/* 344px */
				z-index: -1;
			}

			.campaign a {
				color: inherit;
				display: block;
				position: relative;
				text-align: center;
				text-decoration: none;
				width: 100%;/* 610px */
			}

			 .campaign a:hover {opacity: 0.5;}

				.campaign a:hover img {opacity: 1;}

				.campaign figure {}

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

						.campaign figcaption span {
							background-color: #fff;
							display: inline-block;
							height: 1em;
							padding: 0 1.6em;
						}



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

		.contents .inquiry {margin-top: 9.38%;/* 60px */}

			.contents .inquiry .floating {
				background-color: #f7f7f7;
				padding: 2.5% 0;/* 16px 0 */
				text-align: center;
			}

			.contents .inquiry .fixed {
				bottom: 0;
				left: 0;
				position: fixed;
				right: 0;
				z-index: 999;
			}

				.contents .inquiry .free {
					margin: 0 auto;
					line-height: 1;
					width: 83.75%;/* 536px */
				}

				.contents .inquiry .window {
					font-size: 0;
					padding-top: 1.56%;/* 10px */
				}

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

					.contents .inquiry .window .phone {
						text-align: right;
						width: 56.88%;/* 364px */
					}

						.contents .inquiry .window .phone dt {}

							.contents .inquiry .window .phone a {color: inherit;}

					.contents .inquiry .window .form {
						margin-left: 0.94%;/* 6px */
						width: 37.5%;/* 240px */
					}


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

		.contents .flipflop {
			margin-top: 6.25%;/* 40px */
			padding-bottom: 3.13%;/* 20px */
			text-align: right;
		}

			.contents .flipflop a {
				display: inline-block;
				margin-right: 9.38%;/* 60px */
				width: 15%;/* 96px */
			}


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



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


	.publication {
		background: #fff url(/common/img/sp/pbl_bg_street.png) no-repeat 0 0;
		background-size: 100% auto;
		overflow: hidden;
		padding-top: 10.94%;/* 70px */
		position: relative;
		z-index: 1;
	}

		.publication::before {
			animation: driving 6s linear infinite, bound 1.2s ease infinite;
			background: url(/common/img/sp/pbl_img_truck.png) no-repeat;
			background-size: 100% auto;
			content: '';
			display: block;
			left: 0;
			margin: 5.94% 0 0 14.69%;/* 38px 0 0 94px */
			padding-top: 5%;/* 32px */
			position: absolute;
			top: 0;
			width: 6.88%;/* 44px */
			z-index: 2;
		}

		@keyframes driving {
			from {
				margin-left: 100%;
			}
			to {
				margin-left: -6.88%;
			}
		}

		@keyframes bound {
			5% {
				transform: rotate(6deg);
				margin-top: 5.74%;
			}
			10% {
				transform: rotate(-3deg);
				margin-top: 5.74%;
			}
			15% {
				transform: rotate(0);
				margin-top: 5.94%;
			}
			100% {
				margin-top: 5.94%;
			}
		}


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

		.publication .navigation {
			padding-top: 2.5%;/* 16px */
			text-align: center;
		}


			/* リスト */
			.publication .navigation .list {}

				.publication .navigation .list li {
					font-size: 2rem;
					padding-top: 6.25%;/* 40px */
				}

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

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


			/* コピーライト */
			.publication .navigation .copyright {
				font-size: 1.8rem;
				padding: 6.25% 0 5.94%;/* 40px 0 38px */
			}

				.publication .navigation .copyright::before {
					background: url(/common/img/sp/cpy_bg_line.png) repeat-x 0 0;
					background-size: 100% auto;
					content: '';
					display: block;
					margin-bottom: 5.94%;/* 38px */
					padding-top: 0.94%;/* 6px */
					width: 100%;/* 640px */
				}


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


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