@charset "utf-8";

/*

Theme Name: nousan-sh

Version: 1.1

Author: OWNDMEDIA.LAB

*/

/**************************** ボタンアニメーション ****************************/

.btn01 a:hover span {
	animation: SlideIn 1.6s infinite;
}

@keyframes SlideIn {
	0% {
		opacity: 0;

		transform: translateX(-30px);
	}

	100% {
		opacity: 1;

		transform: translateX(0);
	}
}

#page_top:focus img,
#page_top:hover img {
	animation: SlideIn2 1.6s;
}

@keyframes SlideIn2 {
	0% {
		opacity: 0;

		transform: translateY(50px);
	}

	100% {
		opacity: 1;

		transform: translateY(0);
	}
}

.container,
.container02 {
	width: 100%;

	padding: 0;

	margin: 0 auto;
}

/*************************** スクロールアニメーション **************************/

.scroll.blurIn {
	opacity: 0;

	filter: blur(10px);

	transition:
		opacity 1.2s ease,
		filter 1.2s ease;

	will-change: opacity, filter;
}

.scroll.blurInSlow {
	opacity: 0;

	filter: blur(16px);

	transition:
		opacity 2.2s ease,
		filter 2.2s ease;

	will-change: opacity, filter;
}

.scroll.blurInUp {
	opacity: 0;

	transform: translateY(30px);

	filter: blur(10px);

	transition: all 1.4s cubic-bezier(0.25, 1, 0.5, 1);

	will-change: opacity, transform, filter;
}

.scroll.fadeIn {
	opacity: 0;

	transition: all 1000ms;
}

.scroll.fadeIn2 {
	opacity: 0;

	transition: all 3000ms;
}

.scroll.fadeInUp {
	opacity: 0;

	transform: translate(0, 50px);

	transition: all 2000ms;
}

.scroll.fadeInLeft {
	opacity: 0;

	transform: translateX(-50px);

	transition: all 2000ms;
}

.scroll.fadeInRight {
	opacity: 0;

	transform: translateX(50px);

	transition: all 2000ms;
}

.scroll.scrollin {
	opacity: 1;

	transform: translate(0, 0);

	filter: blur(0);
}

.scroll.delay {
	-moz-transition-delay: 200ms;

	-webkit-transition-delay: 200ms;

	-o-transition-delay: 200ms;

	-ms-transition-delay: 200ms;
}

.scroll.delay2 {
	-moz-transition-delay: 400ms;

	-webkit-transition-delay: 400ms;

	-o-transition-delay: 400ms;

	-ms-transition-delay: 400ms;
}

/****************************** ヘッダー **************************************/

.header-logo {
	position: absolute;

	top: var(--space-6);

	left: 3vw;

	display: block;

	z-index: 94;
}

.header-logo__link {
	display: flex;

	justify-content: center;

	align-items: center;
}

.header-logo__image {
	max-width: clamp(13rem, 10.374rem + 11.35vw, 24rem);
}

/*********************** グローバルメニュー　フルスクリーン ********************/

.menu {
	height: 20px;

	position: fixed;

	right: 3vw;

	top: var(--space-6);

	width: 30px;

	z-index: 99;

	cursor: pointer;

	-webkit-backface-visibility: hidden;

	backface-visibility: hidden;
}

.menu__line {
	background: #ffffff;

	display: block;

	height: 2px;

	position: absolute;

	transition: transform 0.3s;

	width: 100%;
}

.menu__line--center {
	top: 9px;
}

.menu__line--bottom {
	bottom: 0;
}

.menu__line--top.active {
	top: 8px;

	transform: rotate(45deg);

	background: #333 !important;
}

.menu__line--center.active {
	transform: scaleX(0);

	background: #333 !important;
}

.menu__line--bottom.active {
	bottom: 10px;

	transform: rotate(135deg);

	background: #333 !important;
}

.gnav {
	background: var(--color-beige-300);

	display: none;

	height: 100%;

	position: fixed;

	width: 100%;

	z-index: 98;

	right: 0;

	padding: var(--space-6) 0 0;

	-webkit-backface-visibility: hidden;

	backface-visibility: hidden;

	overflow-y: auto;
}

.gnav .container {
	display: flex;

	flex-direction: column;

	align-items: center;

	gap: var(--space-10);

	width: min(600px, 90%);

	margin-top: var(--space-9);
}

.gnav__wrap {
	width: 100%;
	display: flex;
	justify-content: center;
}

.gnav__menu {
	display: flex;

	flex-direction: column-reverse;

	writing-mode: vertical-rl;

	gap: var(--space-4);
}

.gnav__menu-item a {
	display: inline-block;

	font-size: var(--fs-base);

	transition: all 0.4s ease;
}

@media (hover: hover) and (pointer: fine) {
	.gnav__menu-item a:hover {
		color: var(--color-text);

		transform: translateY(-4px);
	}
}

.header__ttl {
	margin: 0 0 0 3vw;
}

.header__ttl a {
	display: inline-block;
}

.header__ttl img {
	max-width: clamp(13rem, 10.374rem + 11.35vw, 24rem);

	filter: brightness(0.3);

	transition: 0.4s var(--ease-hover);
}

.header__ttl img:hover {
	opacity: 0.7;
}

.gnav__footer {
	text-align: center;
}

.header__sns {
	margin-bottom: var(--space-4);
}

.header__sns a {
	font-size: 3rem;

	margin: 0 1rem;
}

/*********************** ローディング ********************/

.loader-wrap {
	position: fixed;

	display: -ms-grid;

	display: grid;

	place-items: center;

	top: 0;

	width: 100%;

	height: 100vh;

	background-color: #fff;

	overflow: hidden;

	z-index: 1000;
}

.loader {
	font-size: 10px;

	margin: 50px auto;

	text-indent: -9999em;

	width: 11em;

	height: 11em;

	border-radius: 50%;

	background: var(--color-accent-300);

	background: -moz-linear-gradient(left, var(--color-accent-300) 10%, rgba(255, 255, 255, 0) 42%);

	background: -webkit-linear-gradient(
		left,
		var(--color-accent-300) 10%,

		rgba(255, 255, 255, 0) 42%
	);

	background: -o-linear-gradient(left, var(--color-accent-300) 10%, rgba(255, 255, 255, 0) 42%);

	background: -ms-linear-gradient(left, var(--color-accent-300) 10%, rgba(255, 255, 255, 0) 42%);

	background: linear-gradient(to right, var(--color-accent-300) 10%, rgba(255, 255, 255, 0) 42%);

	position: relative;

	-webkit-animation: load3 1.4s infinite linear;

	animation: load3 1.4s infinite linear;

	-webkit-transform: translateZ(0);

	-ms-transform: translateZ(0);

	transform: translateZ(0);
}

.loader:before {
	width: 50%;

	height: 50%;

	background: var(--color-accent-300);

	border-radius: 100% 0 0 0;

	position: absolute;

	top: 0;

	left: 0;

	content: '';
}

.loader:after {
	background: #fff;

	width: 75%;

	height: 75%;

	border-radius: 50%;

	content: '';

	margin: auto;

	position: absolute;

	top: 0;

	left: 0;

	bottom: 0;

	right: 0;
}

@-webkit-keyframes load3 {
	0% {
		-webkit-transform: rotate(0deg);

		transform: rotate(0deg);
	}

	100% {
		-webkit-transform: rotate(360deg);

		transform: rotate(360deg);
	}
}

@keyframes load3 {
	0% {
		-webkit-transform: rotate(0deg);

		transform: rotate(0deg);
	}

	100% {
		-webkit-transform: rotate(360deg);

		transform: rotate(360deg);
	}
}

/*--------------------------------------------------------------



## トップページスライダー



--------------------------------------------------------------*/

/**** スライドショー ****/

.topslider {
	width: 100%;

	height: calc(100vh + 1px);

	position: relative;

	overflow: hidden;

	min-width: 100%;

	max-height: 100vh;

	margin: 0 auto 20vh;
}

.slide {
	position: relative;

	margin: 0;

	padding: 0;

	min-width: 1260px;
}

.slide .item {
	position: relative;

	height: 100vh;
}

.slide .item img {
	position: absolute;

	top: 0;

	bottom: 0;

	right: 0;

	left: 0;

	width: 100%;

	max-height: 100%;

	height: calc(100vh + 1px);

	margin: 0 auto !important;

	object-fit: cover;

	object-position: 50% 50%;

	filter: brightness(0.9);
}

.slide .item img.topslider__image--pc {
	display: block;
}

.slide .item img.topslider__image--sp {
	display: none;
}

.slide-animation img {
	animation: slideZoom 8s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

@keyframes slideZoom {
	0% {
		transform: scale(1) translateX(0);
	}

	100% {
		transform: scale(1.06) translateX(15px);
	}
}

.topslider .overlay {
	position: absolute;

	left: 0;

	top: 0;

	display: flex;

	align-items: center;

	justify-content: center;

	width: 100%;

	height: 100%;

	margin: 0 auto;

	max-height: 100vh;

	background: rgb(30 30 28 / 30%);
}

.topslider .overlay .overlay_ttl {
	font-size: clamp(3.2rem, 2.818rem + 1.65vw, 4.8rem);

	font-weight: 500;

	color: #fff;

	line-height: 1.8;

	letter-spacing: 2.2px;
}

.topslider .overlay .vertical a,
.topslider .overlay .vertical a:before {
	position: absolute;

	left: 50%;
}

.topslider .overlay .vertical a {
	bottom: 4rem;

	width: 2rem;

	height: 4.4rem;

	margin: 0 auto 0 -1rem;

	box-sizing: border-box;

	border: 1px solid #ffffff;

	border-radius: 25px;
}

.topslider .overlay .vertical a:before {
	content: '';

	top: 4px;

	width: 4px;

	height: 4px;

	background: #ffffff;

	margin-left: -2px;

	border-radius: 4px;

	animation: scroll 1.5s infinite;

	-webkit-animation: scroll 2s infinite;

	-moz-animation: scroll 2s infinite;
}

@keyframes scroll {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;

		transform: translateY(41px);
	}
}

@-webkit-keyframes scroll {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;

		transform: translateY(41px);
	}
}

@-moz-keyframes scroll {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;

		transform: translateY(41px);
	}
}

/*--------------------------------------------------------------



## 下層ページヘッダー



--------------------------------------------------------------*/

.header-sub {
	width: 100%;

	height: 80vh;

	color: #fff;
}

#header-sub__contents {
	width: 100%;

	height: 100%;

	align-items: center;

	justify-content: center;
}

.header-sub__bg {
	overflow: hidden;

	position: relative;

	width: 100%;

	height: 100%;
}

.header-sub__bg::before {
	animation: img-bg 1.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;

	background: #fff;

	bottom: 0;

	content: '';

	left: 0;

	pointer-events: none;

	position: absolute;

	right: 0;

	top: 0;

	z-index: 1;
}

@keyframes img-bg {
	100% {
		transform: translateX(100%);
	}
}

.header-sub__bg img {
	width: 100%;

	height: 100%;

	object-fit: cover;
}

.header-sub__bg--pc {
	display: block;
}

.header-sub__bg--sp {
	display: none;
}

.header-sub__overlay {
	width: 100%;

	height: 80vh;

	position: absolute;

	background: rgb(30 30 28 / 40%);

	align-items: center;

	justify-content: center;
}

.header-sub__ttl {
	position: absolute;

	inset: auto 20vw auto auto;
}

.header-sub__ttl h1 {
	font-size: var(--fs-lg-1);

	font-weight: 500;

	line-height: 1;

	writing-mode: vertical-rl;

	letter-spacing: 0.12em;
}

/*--------------------------------------------------------------



## 960px



--------------------------------------------------------------*/

@media screen and (max-width: 959px) {
	.slide {
		min-width: 100%;
	}

	.slide .item img.topslider__image--pc {
		display: none;
	}

	.slide .item img.topslider__image--sp {
		display: block;
	}

	@keyframes ZoomSp {
		0% {
			transform: scale(1);
		}

		100% {
			transform: scale(1.05);
		}
	}

	.slide-animation img {
		animation-name: ZoomSp;
	}
}

/*--------------------------------------------------------------



## 768px



--------------------------------------------------------------*/

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

/*--------------------------------------------------------------



## 600px



--------------------------------------------------------------*/

@media screen and (max-width: 559px) {
	/* メインビジュアル */
	.slide .item img {
		margin: 0 auto !important;
	}

	.topslider {
		margin: 0 auto 10vh;
	}

	/* グローバルメニュー */

	li.item.slick-slide {
		filter: brightness(80%);
	}

	.gnav__wrap {
		justify-content: flex-start;
	}

	.gnav__footer {
		text-align: left;
	}

	.gnav__menu {
		writing-mode: horizontal-tb;

		flex-direction: column;
	}

	/* 下層ページヘッダー */
}