@charset 'UTF-8';

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

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

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

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

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





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


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


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





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


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


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

	.contents .plan .type {
		padding-top: 52px;
		width: 1170px;
	}

		.contents .plan .type li {
			background: no-repeat 0 100%;
			background-size: 100% auto;
			float: left;
			margin-left: 18px;
			padding-bottom: 12px;
			width: 378px;
		}

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

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


			/* 概要 */
			.contents .plan .type li dl {
				background-color: #fff;
				border: 3px solid;
				border-radius: 10px;
				padding: 20px 0 24px;
				width: 378px;
			}

			.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 {
					background: no-repeat 0 0;
					height: 288px;
					margin: 0 auto;
					width: 332px;
				}

				.contents .plan .type li:nth-of-type(1) dt {background-image: url(/moving/personal/img/pc/pln_txt_type01.png);}
				.contents .plan .type li:nth-of-type(2) dt {background-image: url(/moving/personal/img/pc/pln_txt_type02.png);}
				.contents .plan .type li:nth-of-type(3) dt {background-image: url(/moving/personal/img/pc/pln_txt_type03.png);}

				.contents .plan .type li dd {
					line-height: 1.78;
					margin: 16px auto 0;
					width: 332px;
				}


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

	.contents .plan .flow {padding-top: 52px;}


		/* プラン選択 */
		.contents .plan .flow .list {
			margin: 0 auto;
			width: 842px;
		}

			.contents .plan .flow .list li {
				float: left;
				margin-left: 16px;
				width: 270px;
			}

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

				.contents .plan .flow .list li a {
					background: no-repeat 0 0;
					display: inline-block;
					height: 76px;
					width: 270px;
				}

				.contents .plan .flow .list li:nth-of-type(1) a {background-image: url(/moving/personal/img/pc/pln_btn_type01.png);}
				.contents .plan .flow .list li:nth-of-type(2) a {background-image: url(/moving/personal/img/pc/pln_btn_type02.png);}
				.contents .plan .flow .list li:nth-of-type(3) a {background-image: url(/moving/personal/img/pc/pln_btn_type03.png);}

				.contents .plan .flow .list a:hover {opacity: 0.5;}

				.contents .plan .flow .list .active {background-position: 0 100%;}

				.contents .plan .flow .list .active:hover {opacity: 1;}


		/* 機能説明 */
		.contents .plan .flow .note {
			color: #103675;
			font-size: 16px;
			padding-top: 30px;
			text-align: center;
		}


		/* チャート */
		.contents .plan .flow .chart {
			background: url(/moving/personal/img/pc/pln_img_chart.png) no-repeat 0 0;
			height: 428px;
			margin-top: 30px;
			position: relative;
			width: 1170px;
		}

			.contents .plan .flow .chart::before,
			.contents .plan .flow .chart::after {
				background: url(/moving/personal/img/pc/pln_txt_exclude.png) no-repeat 0 0;
				content: '';
				display: block;
				height: 142px;
				position: absolute;
				width: 226px;
			}

			.contents .plan .flow .chart::before {left: 45px; top: 44px;}
			.contents .plan .flow .chart::after {bottom: 14px; right: 45px;}

			.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 {display: none;}


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





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


.contents .service .type {
	float: left;
	min-height: 82px;
	padding: 24px 0 0 122px;
	position: relative;
	width: 566px;
}

.contents .service .type:nth-of-type(-n+2) {margin-top: 14px;}

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

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

	.contents .service .type::before {
		background: no-repeat 0 0;
		content: '';
		display: block;
		height: 82px;
		left: 0;
		position: absolute;
		top: 26px;
		width: 94px;
	}

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

	.contents .service .type dt {
		font-size: 20px;
		font-weight: bold;
	}

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


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





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


.contents .more {padding-top: 54px;}


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

	.contents .more .supply {
		margin: 0 auto;
		width: 894px;
	}

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

		.contents .more .supply dd {
			font-size: 20px;
			line-height: 1.78;
			padding-top: 8px;
			text-align: left;
		}


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

	.contents .more .checklist {
		background: url(/moving/personal/img/pc/mr_bg_checklist.png) no-repeat 100% 100%;
		margin: 36px auto 0;
		padding-top: 18px;
		width: 608px;
	}

		.contents .more .checklist a {
			background: url(/moving/personal/img/pc/mr_btn_checklist.png) no-repeat 0 0 ;
			display: block;
			height: 102px;
			width: 608px;
		}

		.contents .more .checklist a:hover {background-position: 100% 100%;}


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