@charset 'UTF-8';

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

www.keio-unyu.co.jp
/moving/personal/css/index_sp
Ver.201802

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

01. テーマ
02. お引越しプラン
03. 各種サービス
04. その他

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





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


.contents .theme .title {background-image: url(/moving/personal/img/sp/thm_bg_wall.png);}


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





/** |02. お引越しプラン| >> *********************************************************** >> START **/


.contents .plan::before {background-image: url(/moving/personal/img/sp/plm_txt_head.png);}


	/** [お引越しプラン] >> +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ >> START **/

	.contents .plan .type {
		margin: 0 auto;
		padding-top: 4.06%;/* 26px */
		width: 87.5%;/* 560px */
	}

		.contents .plan .type li {
			background: no-repeat 0 100%;
			background-size: 100% auto;
			padding: 4.29% 0 2.5%;/* 24px 0 14px */
			width: 100%;/* 560px */
		}

		.contents .plan .type li:nth-of-type(1) {background-image: url(/moving/personal/img/sp/pln_bg_type01.png);}
		.contents .plan .type li:nth-of-type(2) {background-image: url(/moving/personal/img/sp/pln_bg_type02.png);}
		.contents .plan .type li:nth-of-type(3) {background-image: url(/moving/personal/img/sp/pln_bg_type03.png);}


			/* 概要 */
			.contents .plan .type li dl {
				background-color: #fff;
				border: 3px solid;
				border-radius: 10px;
				padding: 2.86% 0 6.79%;/* 16px 0 38px */
				width: 100%;/* 554px */
 			}

			.contents .plan .type li:nth-of-type(1) dl {border-color: #4c89c2;}
			.contents .plan .type li:nth-of-type(2) dl {border-color: #5ac4a3;}
			.contents .plan .type li:nth-of-type(3) dl {border-color: #ff9d5f;}

				.contents .plan .type li dt {
					margin: 0 auto;
					width: 59.93%;/* 332px */
				}

				.contents .plan .type li dd {
					line-height: 1.73m;
					margin: 5.78% auto 0;/* 32px auto 0 */
					width: 89.53%;/* 496px */
				}


	/** [お引越しの流れ] >> +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ >> START **/

	.contents .plan .flow {padding-top: 7.19%;/* 46px */}


		/* プラン選択 */
		.contents .plan .flow .list {
			font-size: 0;
			margin: 0 auto;
			text-align: center;
			width: 94.06%;/* 602px */
		}

			.contents .plan .flow .list li {
				display: inline-block;
				margin-left: 1.66%;/* 10px */
				padding-top: 16.94%;/* 102px */
				position: relative;
				width: 32.23%;/* 194px */
			}

			.contents .plan .flow .list li:first-child {margin-left: 0;}

				.contents .plan .flow .list li a {
					display: block;
					height: 100%;/* 102px */
					left: 0;
					overflow: hidden;
					position: absolute;
					top: 0;
					width: 100%;/* 194px */
				}

					.contents .plan .flow .list img {
						position: absolute;
						top: 0;
						left: 0;
					}

					.contents .plan .flow .list .active img {top: -100%;/* 102px */}


		/* 機能説明 */
		.contents .plan .flow .note {
			color: #103675;
			font-size: 1.8rem;
			line-height: 2;
			margin: 0 auto;
			text-indent: -1em;
			padding: 3.44% 0 0 1em;/* 22px 0 0 1em */
			width: 94.06%;/* 602px */
		}


		/* チャート */
		.contents .plan .flow .chart {
			margin: 5.63% auto 0;/* 36px auto 0 */
			position: relative;
			width: 92.81%;/* 594px */
		}

			.contents .plan .flow .chart::before,
			.contents .plan .flow .chart::after {
				background: url(/moving/personal/img/sp/pln_txt_exclude.png) no-repeat 0 0;
				background-size: 100% auto;
				content: '';
				display: block;
				padding-top: 26.94%;/* 160px */
				position: absolute;
				width: 42.76%;/* 254px */
			}

			.contents .plan .flow .chart::before {
				margin: 8.25% 0 0 3.03%;/* 49px 0 0 18px */
				left: 0;
				top: 0;
			}

			.contents .plan .flow .chart::after {
				bottom: 0;
				margin: 0 3.03% 2.86% 0;/* 0 18px 17px 0 */
				right: 0;
			}

			.contents .plan .flow #planA::before {content: none;}

			.contents .plan .flow #planB::before,
			.contents .plan .flow #planB::after {content: none;}

			.contents .plan .flow .animate::before,
			.contents .plan .flow .animate::after {animation: flash 2s ease 0.3s 1;}


		/* 再選択 */
		.contents .plan .flow .retry {
			font-size: 2rem;
			font-weight: bold;
			padding-top: 6.25%;/* 40px */
			text-align: center;
		}

			.contents .plan .flow .retry a {
				color: #103675;
				text-decoration: underline;
			}

				.contents .plan .flow .retry a::after {content: '▲';}


/** |02. お引越しプラン| << ************************************************************* << END **/





/** |03. 各種サービス| >> ************************************************************* >> START **/


.contents .service .type {
	margin-top: 5.25%;/* 32px */
	min-height: 9.68vw;/* 62px */
	padding-left: 21.64%;/* 132px */
	position: relative;
	width: 100%;/* 610px */
}

.contents .service .type:first-child {margin-top: 6.23%;/* 38px */}

	.contents .service .type::before {
		background: no-repeat 0 0;
		background-size: 100% auto;
		content: '';
		display: block;
		left: 0;
		margin-left: 2.3%;/* 14px */
		padding-top: 13.77%;/* 84px */
		position: absolute;
		top: 0;
		width: 13.77%;/* 84px */
	}

	.contents .service .type:nth-of-type(1)::before {background-image: url(/moving/personal/img/sp/srv_ico_service01.png);}
	.contents .service .type:nth-of-type(2)::before {background-image: url(/moving/personal/img/sp/srv_ico_service02.png);}
	.contents .service .type:nth-of-type(3)::before {background-image: url(/moving/personal/img/sp/srv_ico_service03.png);}
	.contents .service .type:nth-of-type(4)::before {background-image: url(/moving/personal/img/sp/srv_ico_service04.png);}
	.contents .service .type:nth-of-type(5)::before {background-image: url(/moving/personal/img/sp/srv_ico_service05.png);}

	.contents .service .type dt {
		font-size: 2ren;
		font-weight: bold;
	}

	.contents .service .type dd {line-height: 1.8;}


/** |03. 各種サービス| << *************************************************************** << END **/





/** |04. その他| >> ******************************************************************* >> START **/


	/** [荷造り用品] >> +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ >> START **/

	.contents .more .supply {
		margin: 0 auto;
		padding-top: 7.81%;/* 50px */
		width: 95.31%;/* 610px */
	}

		.contents .more .supply dt {
			color: #103675;
			font-size: 2.4rem;
			font-weight: bold;
			text-align: center;
		}

		.contents .more .supply dd {
			line-height: 1.73;
			padding-top: 2.62%;/* 16px */
			text-align: left;
		}


	/** [引越し準備チェックリスト] >> +++++++++++++++++++++++++++++++++++++++++++++++++ >> START **/

	.contents .more .checklist {
		margin: 0 auto;
		padding-top: 7.81%;/* 50px */
		width: 95.31%;/* 610px */
	}


/** |04. その他| << ********************************************************************* << END **/