@charset "utf-8";

html {
	visibility: hidden;
}

html.wf-active {
	visibility: visible;
}

body {
	font-family: a-otf-midashi-mi-ma31-pr6n, serif;
	font-weight: 600;
	font-style: normal;
    font-feature-settings: "palt";
    letter-spacing: 0.125rem;
	text-align: center;
	background: rgb(255, 255, 255);
}

a {
	display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-decoration: none;
	color: rgb(75, 75, 75);
}

img {
    border: none;
    vertical-align: bottom;
    margin: 0;
    padding: 0;
}

a:hover {
	opacity: 0.4;
}

@media screen and (max-width: 640px) {

	body::before {
		background: url(../images/bg0.jpg) no-repeat left top;
		background-size: 100% auto;
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		padding-bottom: 108px;
		content: "";
		z-index: -999;
		transform: translateZ(0);
	}

	.background::before {
		content: "";
		position: fixed;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, 0.4);
		background-position: center;
		background-size: cover;
		z-index: -99;
		pointer-events: none;
		transform: translateZ(0);
	}

	header {
		padding-top: 4rem;
		margin-bottom: 8.625rem;
		color: rgb(245, 245, 245);
	}
	
	header .title {
		font-size: 1rem;
		margin-bottom: 2rem;
	}
	
	header h1 {
		font-size: 1.25rem;
		margin-bottom: 3rem;
	}

	header .prologue {
		font-size: 0.75rem;
		line-height: 2rem;
		margin-bottom: 2.875rem;
	}
	
	header .prologue span {
		display: block;
	}
	
	header .prologue-end {
		font-size: 0.75rem;
		line-height: 2rem;
	}

	.wrap {
		background: rgb(245, 245, 245);
	}

	.hero {
		padding-top: 4rem;
	}

	.hero .hero-img {
		width: 100%;
		margin-bottom: 1.5rem;
	}

	.hero .hero-description {
		font-size: 0.75rem;
	}

	.item-title {
		font-size: 1rem;
		margin-top: 9.5rem;
		margin-bottom: 4rem;
	}

	.item-img {
		width: 100%;
		margin-bottom: 1.25rem;
	}

	.item {
		margin-bottom: 3.25rem;
	}

	.item:last-child {
		margin-bottom: 0rem;
	}

	.item h4 {
		display: inline-block;
	}

	.item h4 a {
		width: 176px;
		font-size: 0.75rem;
		border:1px solid;
		padding-top: 0.45rem;
		padding-bottom: 0.45rem;
	}

	footer {
		padding-bottom: 2.5rem;
	}

	footer .link {
		margin-bottom: 12rem;
	}

	footer .link span {
		display: inline-block;
	}

	footer a {
		font-size: 1rem;
	}

	footer a img {
		width: 112px;
		height: 43px;
	}

	footer .logo-bm20th {
		display: inline-block;
		margin-top: 9.5rem;
		margin-bottom: 9.5rem;
	}
	
	footer .title {
		font-size: 1rem;
		margin-bottom: 2.5rem;
	}

	footer .mail {
		display: inline-block;
		margin-bottom: 9.5rem;
	}

	footer .credit {
		font-size: 0.5rem;
	}

}

@media screen and (min-width: 641px) {

	body::before {
		background: url(../images/bg1.jpg) no-repeat left top;
		background-size: cover;
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		padding-bottom: 108px;
		content: "";
		z-index: -999;
		transform: translateZ(0);
	}

	.background::before {
		content: "";
		position: fixed;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, 0.4);
		background-position: center;
		background-size: cover;
		z-index: -99;
		pointer-events: none;
		transform: translateZ(0);
	}

	header {
		padding-top: 6rem;
		margin-bottom: 12.25rem;
		color: rgb(245, 245, 245);
	}
	
	header .title {
		font-size: 1.5rem;
		margin-bottom: 3rem;
	}
	
	header h1 {
		font-size: 1.875rem;
		margin-bottom: 3.25rem;
	}

	header .prologue {
		font-size: 1.125rem;
		line-height: 2.5rem;
		margin-bottom: 4.5rem;
	}
	
	header .prologue span {
		display: block;
	}
	
	header .prologue-end {
		font-size: 1.125rem;
		line-height: 2.5rem;
	}

	.wrap {
		background: rgb(245, 245, 245);




	}

	.hero {
		padding-top: 5.75rem;
	}

	.hero .hero-img {
		width: 800px;
		height: 450px;
		margin-bottom: 4.5rem;
	}

	.hero .hero-description {
		font-size: 1.25rem;
	}

	.item-title {
		font-size: 1.5rem;
		margin-top: 14rem;
		margin-bottom: 6rem;
	}

	.item-img {
		width: 562px;
		height: 316px;
		margin-bottom: 2rem;
	}

	.item {
		margin-bottom: 4.75rem;
	}

	.item:last-child {
		margin-bottom: 0rem;
	}

	.item h4 {
		display: inline-block;
	}

	.item h4 a {
		width: 264px;
		font-size: 1.25rem;
		border:1px solid;
		padding-top: 0.575rem;
		padding-bottom: 0.575rem;
	}

	footer {
		padding-bottom: 3rem;
	}

	footer .link {
		margin-bottom: 12rem;
	}

	footer .link span {
		display: inline-block;
	}

	footer a {
		font-size: 1.5rem;
	}

	footer a img {
		width: 168px;
		height: 65px;
	}

	footer .logo-bm20th {
		display: inline-block;
		margin-top: 12rem;
		margin-bottom: 12rem;
	}
	
	footer .title {
		font-size: 1.5rem;
		margin-bottom: 3.75rem;
	}

	footer .mail {
		display: inline-block;
		margin-bottom: 14.25rem;
	}

	footer .credit {
		font-size: 0.75rem;
	}
}