@charset "UTF-8";

* {box-sizing:border-box;margin:0;padding:0;}
.ff-oswald {
	font-family: "Oswald", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
	font-weight: 400;
}
html, body {
	background-color: #fff;
	overflow-x: hidden;
}
body {
	font-family: sans-serif;
}
ol, ul {
	list-style-type: none;
}
img {
	height: auto;
	vertical-align: middle;
	width: 100%;
}
.wrapper {
	padding-bottom: 48px;
}
.content-wrapper {
	padding: 5%;
}

/* ヘッダー */
header {
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
	position: relative;
	width: 100%;
}
#nav-top {
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 10;
}
#nav-top p {
	background-color: #fff;
	font-size: 1.5rem;
	padding: 11px 0;
	text-align: center;
}
#humberger {
	-webkit-appearance: none;
	appearance: none;
	background-color: transparent;
	border: 0;
	cursor: pointer;
	position: fixed;
	right: 2.5%;
	top: 20px;
	transition: top .25s, right .25s;
	z-index: 3;
}
#humberger::after, #humberger::before, #humberger span {
	background-color: #7bc038;
	content: "";
	display: block;
	height: 2px;
	margin: 0 0 4px 0;
	transition: transform .25s;
	width: 32px;
}
#humberger::after {
	margin-bottom: 0;
}
#humberger:hover {
	right: calc(2.5% + 2px);
	top: calc(20px + 2px);
}
#humberger:hover::after, #humberger:hover::before, #humberger:hover span {
	height: 1px;
	margin: 0 0 5px 0;
	width: 28px;
}
#gnav.open #humberger span {
	display: none;
}
#gnav.open #humberger::after {
	transform: translateY(-1px) rotateZ(45deg);
}
#gnav.open #humberger::before {
	transform: translateY(5px) rotateZ(-45deg);
}

#gnav div {
	align-items: center;
	display: none;
	justify-content: center;
	flex-direction: column;
	height: 100vh;
	height: 100dvh;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 2;
}
#gnav.open div {
	background-color: rgba(0, 0, 0, .75);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	display: flex;
}

#gnav .nav {
	margin-bottom: 1rem;
}
#gnav li {
	font-size: 1rem;
	margin-bottom: .5rem;
}
#gnav .contact li {
	color: #fff;
	font-size: .75rem;
	text-align: center;
}
#gnav a {
	color: #fff;
	display: block;
	text-decoration: none;
}
#gnav .contact li a {
	display: block;
	font-size: 1rem;
}

#gnav .contact li:last-child a picture img, #gnav .contact li:last-child a picture source {
	height: 19px;
	width: 28px;
}


/* メインビジュアル */
#mv {
	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: calc(100vh - 48px);
	height: calc(100dvh - 48px);
	padding-bottom: 48px;
	padding-top: 54px;
	overflow: hidden;
	position: relative;
	width: 100%;
}

/* メインビジュアル・写真 */
#mv-image, #mv-image picture, #mv-image picture img {
	height: calc(100vh - 54px - 48px);
	height: calc(100dvh - 54px - 48px);
}
#mv-image {
	background-image: url(../images/index/mv1180p.jpg);
	background-position: 47.5% 50%;
	background-size: cover;
	/*position: relative;
	width: 100%;*/
}
#mv-image-backtop {
	background-color: #fff;
	height: 180px;
	position: absolute;
	top: 58px;
	width: 100%;
}
#mv-image-backbtm {
	aspect-ratio: 50 / 13;
	background-color: #fff;
	height: auto;
	clip-path: polygon(0 0, 100% 0, 100% 0, 0 100%);
	position: absolute;
	top: calc(180px + 58px);
	width: 100%;
}
#logo-back {
	/*aspect-ratio:786/646;*/
	background-color: #fff;
	min-height: 194px;
	position: relative;
	/*top: 54px;*/
	width: 100%;
}
#logo-back::after {
	background-color: #fff;
	bottom: -100%;
	clip-path: polygon(0 0, 100% 0, 100% 0, 0 100%);
	content: "";
	display: block;
	height: 100%;
	position: absolute;
	width: 100%;
}
/*#mv-image picture {
	display: block;
	position: relative;
	width: 100%;
}*/
#mv-image picture img {
	aspect-ratio: 1920 / 1180;
	mask-image: url(../images/index/mvmask1180p.png);
	mask-position: 47.5% 50%;
	mask-size: cover;
	object-fit: cover;
	object-position: 47.5% 50%;
}

/* メインビジュアル・ロゴ */
#mv-logo {
	display: block;
	margin: 0 auto;
	max-width: 204px;
	position: absolute;
	text-align: center;
	top: 62px;
	width: 100%;
	/*width: clamp();*/
	width: clamp(140px, 180px, 204px);
	/*z-index: 2;*/
}
#mv-logo p {
	display: none;
}
#mv-logo picture img, #mv-logo picture source {
	filter: drop-shadow(0px 0px 5px #fff);
}

/* メインビジュアル・コピー */
h1 {
	background-color: rgba(0, 0, 0, .5);
	bottom: -4%;
	color: #fff;
	font-size: clamp(2rem, 8vw, 45px);
	font-style: italic;
	font-weight: bold;
	padding: .5rem 25%;
	position: absolute;
	text-align: center;
	transform: translateY(-12vh) rotateZ(-15deg);
	width: 150%;
}

/* コンテンツエリア */
.content-wrapper > h2, .content-wrapper > h2 + p {
	text-align: center;
}
.content-wrapper > h2 {
	border-bottom: 1px solid #000;
	font-size: 2.125rem;
	line-height: 1.2;
	margin-bottom: .75rem;
	padding-bottom: .5rem;
}
.content-wrapper > h2 + p {
	font-size: .875rem;
	margin-bottom: 1rem;
}

/* フッター */
footer {
	padding: 0 5%;
}
.ftr-logo {
	display: block;
	margin: 0 auto 1rem auto;
	max-width: 182px;
}
#ftr-map iframe {
	margin-bottom: 1rem;
}
#ftr-info dl {
	display: flex;
	flex-wrap: wrap;
	font-size: .875rem;
	justify-content: space-between;
}
#ftr-info dt {
	flex-basis: 20%;
	margin-bottom: .25rem;
	text-align-last: justify;
}
#ftr-info dd {
	flex-basis: 75%;
	margin-bottom: .25rem;
}
#copyright {
	font-size: .75rem;
	padding: .25rem;
	text-align: center;
}


footer .content-wrapper {
	padding: 0;
}
#ftr-nav .nav {
	display: none;
}
#ftr-info .ftr-logo {
	display: none;
}
#ftr-info .outline {
	margin-bottom: 1rem;
}
#ftr-info .outline a {
	color: #000;
	text-decoration: none;
}
#ftr-nav .sns {
	margin-bottom: 1rem;
	text-align: center;
}
#ftr-nav .sns li {
	display: inline-block;
}
#ftr-nav .sns li:first-child {
	margin-right: .5rem;
}
#ftr-nav .sns picture {
	display: block;
	height: 44px;
	width: 44px !important;
}
#ftr-nav dl.contact {
	display: block;
	margin-bottom: 1rem;
}
#ftr-nav .contact dt {
	background-color: #000;
	color: #fff;
	padding: .25rem;
	text-align: center;
	text-align-last: initial;
}
#ftr-nav .contact dd a {
	border-bottom: 4px solid #000;
	color: #000;
	display: block;
	font-size: 7vw;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
}
#ftr-nav .contact dd > a:first-child {
	font-size: 9vw;
}



#app-nav {
	align-items: center;
	background-color: #000;
	bottom: 0;
	color: #fff;
	display: flex;
	justify-content: center;
	padding: .5rem;
	position: fixed;
	width: 100%;
	z-index: 2;
}
#app-nav p {
	font-size: .875rem;
	margin-right: .5rem;
}
#app-nav_tel {
	display: inline-block;
	margin-right: .5rem;
}
#app-nav_tel img {
	aspect-ratio: 26 / 46;
	max-height: 46px;
	max-width: 26px;
	height: 32px !important;
	width: auto !important;
}
#app-nav_mail {
	display: inline-block;
}
#app-nav_mail img, #app-nav_mail source {
	aspect-ratio: 57 / 38;
	max-height: 38px;
	max-width: 57px;
	height: 24px !important;
	width: auto !important;
}

@media screen and (min-width: 768px) {
	footer > div .ftr-logo {
		display: none;
	}
	footer .content-wrapper {
		display: flex;
		justify-content: space-between;
	}
	#ftr-info {
		flex-basis: 35%;
	}
	#ftr-nav {
		flex-basis: 60%;
	}
	#ftr-info .ftr-logo {
		display: block;
		margin: 0 0 1rem 0;
		max-width: 283px;
		text-align: left;
	}
	#ftr-nav .nav, #ftr-nav .sns {
		display: flex;
		justify-content: space-between;
		margin-bottom: 1rem;
		text-align: right;
	}
	#ftr-nav .nav {
		flex-wrap: wrap;
		justify-content: flex-end;
	}
	#ftr-nav .nav li {
		display: inline-block;
		margin-right: .5rem;
	}
	#ftr-nav .nav a {
		color: #000;
		text-decoration: none;
	}
	#ftr-nav .nav a:hover {
		text-decoration: underline;
	}
	#ftr-nav .sns {
		justify-content: flex-end;
	}
	#ftr-nav dl.contact {
		display: flex;
		justify-content: space-between;
		width: 100%;
	}
	#ftr-nav .contact dt {
		/*align-self: center;*/
		flex-basis: 7rem;
		padding: 8px 0;
		white-space: nowrap;
	}
	#ftr-nav .contact dt {
		align-items: center;
		display: flex;
		justify-content: center;
	}
	#ftr-nav .contact dd {
		align-items: center;
		border: 4px solid #000;
		border-left: 0;
		border-right: 0;
		display: flex;
		flex-basis: calc(100% - 7.5rem);
		padding: .5rem;
	}
	#ftr-nav .contact dd a, #ftr-nav .contact dd a:first-child {
		border-bottom: 0;
		display: inline-block;
		flex-basis: 48%;
		font-size: 1.8vw;
		white-space: nowrap;
	}
}

@media screen and (min-width: 1280px) {
	header {
		min-height: 100vh;
		min-height: 100dvh;
		height: initial !important;
		overflow: initial;
		/*overflow-x: hidden;*/
		/*-ms-overflow-style: none;
		scrollbar-width: none;*/
	}
	#nav-top p {
		display: none;
	}
	#humberger {
		display: none;
	}
	#gnav div {
		background-color: #fff;
		display: flex;
		flex-direction: row;
		height: auto;
		justify-content: space-between;
	}
	#gnav div ul {
		padding: .5rem;
	}
	#gnav li {
		display: inline-block;
		font-size: .875rem;
		margin: 0 .125rem;
	}
	#gnav a {
		color: #000;
	}
	#gnav .nav {
		margin-bottom: 0;
	}
	#gnav .contact {
		align-items: center;
		background-color: #000;
		color: #fff;
		display: flex;
		padding: .5rem .75rem;
	}
	#gnav .contact li {
		align-items: center;
		display: flex;
	}
	#gnav .contact li a {
		color: #fff;
		display: inline-block;
		font-size: 1.4rem;
		margin: 0 .5rem;
	}
	#mv {
		/*height: 100vh;
		height: 100dvh;*/
		height: initial !important;
		min-height: 100vh;
		min-height: 100dvh;
		overflow: initial;
		padding-bottom: 0;
		padding-top: 0;/*50px;*/
		top: 50px;
	}
	#mv-image {
		background-size: 140%;
		background-position: 47.5% 50%;
		background: none;
		bottom: 0;
		height: auto;
		min-height: 100vh;
		min-height: 100dvh;
		/*overflow-x: hidden;*/
		position: absolute;
	}
	#mv-image-backtop {
		top: 0;/*50px;*/
	}
	#mv-image-backbtm {
		top: calc(180px + 50px);
	}
	#mv-image, #mv-image picture, #mv-image picture img {
		height: initial;
		overflow: hidden;
		width: 100%;
	}
	#mv-image {
		height: auto;
		overflow: initial;
	}
	#mv-image-backtop {
		display: none;
	}
	#mv-image-backbtm {
		top: 0;/*50px;*/
	}
	#mv-image picture {
		display: block;
		background: url(../images/index/mv1180p.jpg) 55% 100% no-repeat;
		background-size: 120% auto;
	}
	#mv-image picture img {
		/*margin-left: -9.5%;
		margin-top: -13%;*/
		width: 120%;
	}
	#mv-image picture img {
		margin-left: -11%;
		margin-top: -13%;
	}
	#mv-logo {
		background-color: #fff;
		box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 40px #fff, 0 0 60px #fff, 0 0 80px #fff, 0 0 100px #fff;
		display: flex;
		flex-direction: column;
		height: 100dvh;
		left: 0;
		max-width: 408px;
		padding-top: 10%;
		top: 0;
		width: 25%;
	}
	#mv-logo p {
		display: block;
		font-size: 2.125rem;
		margin-bottom: 1rem;
	}
	#mv-logo picture {
		display: block;
		margin: 0 auto;
		width: 90%;
	}
	
	h1 {
		bottom: 5%;/*-2%;*/
		font-size: 4vw;/*clamp(45px 8vw 12vw);*/
	}
	h1 br:nth-child(2) {
		display: none;
	}
	#app-nav {
		display: none;
	}
	
	.content-wrapper > h2 {
		margin-bottom: 1rem;
	}
	.content-wrapper > h2 br {
		display: none;
	}
}
@media screen and (min-width: 1510px) {
	#gnav .nav li {
		font-size: 1rem;
		margin: 0 .25rem;
	}
	#gnav .contact li {
		font-size: 1rem;
	}
	#gnav .contact li a {
		font-size: 1.6rem;
	}
}