// ==================================================
// Interactive Setting
// ==================================================
// Loading Style
// --------------------------------------------------
@keyframes loadRotate {
	from {
		transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		@include opacity(1);
		animation-timing-function: ease-out;
	}
	25% {
		transform: rotate(180deg);
		-moz-transform: rotate(180deg);
		@include opacity(0.25);
		animation-timing-function: ease-in;
	}
	50% {
		transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		@include opacity(1);
		animation-timing-function: ease-out;
	}
	75% {
		transform: rotate(540deg);
		-moz-transform: rotate(540deg);
		@include opacity(0.25);
		animation-timing-function: ease-in;
	}
	to {
		@include opacity(1);
		transform: rotate(720deg);
		-moz-transform: rotate(720deg);
	}
}
@keyframes loadScaleX {
	from {
		transform: scaleX(1);
		-moz-transform: scaleX(1);
		@include opacity(1);
		animation-timing-function: ease-out;
	}
	50% {
		transform: scaleX(0);
		-moz-transform: scaleX(0);
		@include opacity(0);
		animation-timing-function: ease-out;
	}
	to {
		transform: scaleX(1);
		-moz-transform: scaleX(1);
		@include opacity(1);
	}
}
#loadBegin {
	width: 100%;
	height: 100vh;
	position: fixed;
	background: white;
	z-index: 10;
	img {
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		&.logomark {
			$logomarkwidth: 178px;
			width: $logomarkwidth;
			margin-top: -$logomarkwidth*0.5;
			margin-left: -$logomarkwidth*0.5;
			animation: 'loadScaleX' 1.5s ease-out 0s infinite;
			-moz-animation: loadScaleX 1.5s ease-out 0s infinite;
		}
		&.load_txt {
			$load_txtwidth: 282px;
			width: $load_txtwidth;
			margin-top: -$load_txtwidth*0.5;
			margin-left: -$load_txtwidth*0.5;
			animation: loadRotate 5s ease-out 0s infinite;
			-moz-animation: loadRotate 5s ease-out 0s infinite;
		}
	}
}
// ==================================================
// Section style setting
// ==================================================
// .shopping_guide Section Style
// --------------------------------------------------
.shopping_guide {
	margin: 40px 0;
	.row {
		background: $silver;
		.ttl {
			background: $color1;
			color: $white;
			padding: 0.2em 0.4em;
			margin: 15px 0;
			font-weight: bold;
			@include fs(20);
		}
		.subttl {
			background: $grey;
			color: $white;
			padding: 0.1em 0.4em 0;
			margin: 0 0 0.6em;
			@include fs(18);
			font-weight: bold;
		}
		.ttl_s {
			border-left: 0.4em solid $lightgrey;
			padding-left: 0.4em;
			margin: 1em 0;
			line-height: 1;
			@include fs(14);
		}
		p {
			@include fs(14);
			margin: 0 0 1em;
		}
		.btn {
			background: Coral;
			padding: 0.2em 1.4em;
			font-weight: bold;
			border: none;
			@include fs(15);
			border-radius: 3px;
			&:hover {
				color: $white;
				background: $cvSubColor;
			}
		}
		.col {
			.dummy_ {
				margin-bottom: 15px;
			}
		}
		.guide_inner {
			background: $white;
			padding: 10px;
			margin-bottom: 15px;
		}
		.f_guide_block {
			&.block01 {
				width: 340px;
				padding-top: 2.4em;
			}
			&.block02 {
				width: 260px;
				padding-top: 2.4em;
			}
		}
	}
}

// .article_listview.top_bnr_area Section Style
// --------------------------------------------------
.top_bnr_area {}
@include ltMD {};
@include ltSM {};
@include ltXS {};