@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=M+PLUS+1p:700&display=swap');

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

.btn-primary
{
	background-color: #00ccff;
	border-color: #00ccff;
}
	.btn-primary:hover
	{
		background-color: #00aeff;
		border-color: #00aeff;
	}
.btn-danger
{
	background-color: #ff4e68;
	border-color: #ff4e68;
}
	.btn-danger:hover
	{
		background-color: #f52f4c;
		border-color: #f52f4c;
	}

.bg-primary
{
	background-color: #00ccff!important;
}

#header
{
	
}
	#header .navbar
	{
		border-bottom: 3px solid #00a2ff;
		z-index: 99;
		width: 100%;
		position: fixed;
		top: 0;
		background-color: rgba(250,250,250,1);
	}
	#header .image
	{
		margin-top: 59px;
		min-height: 50vh;
		background: transparent url(/asset/img/header.jpg) center top no-repeat;
		background-size: auto 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-content: center;
	}

	#header .image h1,
	#header .image h2
	{
		font-size: 1.8rem;
		text-align: center;
		color: #ffffff;
		text-shadow: 0 0 3px rgba(66,33,0,1), 0 0 3px rgba(66,33,0,1), 0 0 5px rgba(66,33,0,1);
		padding: 1rem 2rem;
		margin: 0;
		font-weight: bold;
	}
	#header .image h1
	{
		font-size: 3rem;
	}

	.navbar-light .navbar-brand
	{
		color: #00ccff;
		font-weight: bold;
	}
	.navbar-brand br
	{
		display: none;
	}

	.navbar-expand-lg .navbar-collapse
	{
		justify-content: end;
	}
	#header .navbar .navbar-nav
	{
		font-size: 0.8rem;
	}


main section
{
	padding-top: 40px;
}

section
{
	padding-bottom: 4rem;
}

.block-header .title,
.section-header .title
{
	font-size: 2rem;
	position: relative;
	padding: 0.5rem 0.8rem 0.3rem;
	text-align: center;
	padding: 3rem 0 2rem;
	font-weight: bold;
	font-family: 'M PLUS 1p', sans-serif;
	letter-spacing: 0.1rem;
	color: #00ccff;
}
	.bg-primary .section-header .title
	{
		color: #ffffff;
	}
	.section-body.feature h3
	{
		font-size: 1.2rem;
		background-color: #333333;
		padding: 0.25rem 0.5rem 0.1rem;
		color: #ffffff;
	}
		.section-body.feature h3::first-letter
		{
			color: #ffe600;
			font-size: 1.3rem;
			letter-spacing: 0.15rem;
			font-weight: bold;
		}

#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;
}
	#shop-description .image img
	{
		max-height: 80vh;
	}
	#shop-description span.bg-primary
	{
		white-space: nowrap;
	}

.breadcrumb
{
	border-radius: 0;
}
.breadcrumb-item br
{
	display: none!important;
}

.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; }

#flow .section-body
{
	color: #ffffff;
}
	#flow .section-body .item
	{
		display: flex;
		margin: 0 auto;
		width: 200px;
		height: 200px;
		background-color: #ffffff;
		color: #00ccff;
		border-radius: 200px;
		justify-content: center;
		align-items: center;
		font-size: 1.5rem;
		font-weight: bold;
		margin-bottom: 0.5rem;
	}
	#flow .section-body .icon
	{
		font-size: 2rem;
	}

@media (max-width: 992px)
{
	#header .navbar .navbar-nav
	{
		font-size: 1rem;
		margin: 0!important;
	}
	#header .navbar .navbar-nav .nav-item
	{
		padding: 0.75rem 1rem;
		border-bottom: 1px solid #CCCCCC;
	}
}

@media (max-width: 768px)
{
	.navbar-brand img
	{
		max-width: 200px;
	}
	.navbar-brand br
	{
		display: block;
	}


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

	#header
	{
		margin-top: 79px;
	}
	#header .image h1
	{
		font-size: 1.6rem;
	}
	#header .image h2
	{
		font-size: 1.2rem;
	}
}