@charset "utf-8";

body
{
	font-family: -apple-system, BlinkMacSystemFont, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", Helvetica, Arial, Verdana, sans-serif;
	font-size: 16px;
	line-height: 1.6rem;
}

#header
{
	padding-top: 109px;
}
#header .navbar
{
	border-bottom: 3px solid #8Fc31f;
	position: fixed;
	top: 0;
	z-index: 99;
	width: 100%;
}

main section
{
	padding-top: 40px;
}

.block-header .title,
.section-header .title
{
	font-size: 1.5rem;
	border-bottom: 3px solid #cccccc;
	border-left: 8px solid #8Fc31f;
	position: relative;
	padding: 0.5rem 0.8rem 0.3rem;
}
	section .caption
	{
		font-size: 1.2rem;
		background-color: #eeeeee;
		padding: 0.25rem 0.5rem 0.1rem;
	}
		section .caption::first-letter
		{
			color: #8Fc31f;
			text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
			font-size: 1.3rem;
			letter-spacing: 0.15rem;
		}

#right
{
	padding-top: 40px;
}
	.block
	{
		padding-top: 40px;
	}
	#right .block .title
	{
		font-size: 1rem;
	}

#footer
{
	background-color: #cccccc;
}

#footer .copyright
{
	text-align: center;
	padding: 1rem 0;
	background-color: #666666;
	color: #ffffff;
}

#shop-list .card
{
	cursor: pointer;
}
	#shop-list .card.status1
	{
		position: relative;
		overflow: hidden;
	}
	#shop-list .card.status1:before
	{
		content: "成約済み";
		display: inline-block;
		font-size: 2rem;
		color: #ffffff;
		background-color: crimson;
		padding: 0.75rem 1rem;
		text-align: center;
		width: 80%;
		top: 2rem;
		left: 10%;
		position: absolute;
		transform: rotateZ(-15deg);
		z-index: 10;
	}
	#shop-list .card.status2
	{
		opacity: 0.3;
	}
	#shop-list.shop .card.status1
	{
		background-color: #cccccc;
	}
		#shop-list.shop .card.status1 .card-body,
		#shop-list.shop .card.status1 .scale
		{
			opacity: 0.5;
		}

	#shop-order .list-group-item
	{
		cursor: move;
	}
	#shop-order .list-group-item.status2
	{
		opacity: 0.5;
		background-color: #cccccc;
	}
	#shop-order .list-group-item.status1
	{
		background-color: #ffcccc;
	}


.sortable-chosen {
	color: #fff;
	background-color: #ffd280!important;
}

.scale
{
	max-height: 140px;
	overflow: hidden;
	position: relative;
}
	.scale img
	{
		transition: all 0.5s ease 0s;
	}
	.scale img:hover
	{
		transform: scale(1.2,1.2);
		opacity: 0.8;
	}
	.scale .category,
	.scale .area
	{
		position: absolute;
		top: 0;
		left: 0;
		background-color: rgba(0, 200, 127, 0.5);
		color: #ffffff;
		font-size: 0.8rem;
		padding: 0 0.5rem;
		z-index: 10;
	}
	.scale .category
	{
		top: unset;
		bottom: 0;
		left: unset;
		right: 0;
		background-color: rgba(200, 0, 60, 0.5);
	}

#shop-description
{
	padding-top: 20px;
}

.breadcrumb
{
	border-radius: 0;
}

.back2top
{
	position: relative;
	display: none;
}
	.back2top .icon
	{
		display: block;
		position: fixed; right: 1em;
		padding: 0; margin: 0;
		width: 60px; height: 60px;
		font-size: 48px;
		bottom: 0.5rem;
		right: 0.5rem;
		text-align: center;
		line-height: 60px;
		color: #666666;
		background-color: #eeeeee;
		overflow: hidden; z-index: 99;
	}
	.back2top .icon::before
	{
		margin: 0;
	}

.form-confirm-block {
  display: none; }
  .form-confirm-block .row {
    padding: 0.5rem;
    border-bottom: 1px dotted #CCCCCC; }
    .form-confirm-block .row:last-child {
      border: none; }

.form-result-block {
  display: none; }

@media (max-width: 768px)
{
	#header
	{
		padding-top: 71px;
	}
	.navbar-brand img
	{
		max-width: 200px;
	}

	.link-next a,
	.link-prior a
	{
		display: block;
		background-color: #eeeeee;
		border: 1px solid #cccccc;
		padding: 1rem;
	}

	#header h1
	{
		padding: 1rem;
		font-size: 1rem;
		color: #666666;
		margin: 0;
	}
}