@charset "utf-8";
/* ==========================================================================
	トップページ
============================================================================= */


.is-scrolled .background {
	filter: blur(20px);
    
}
.background {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	height: 100svh;
	height: 100dvh;
	width: 100%;
	position: fixed;
	transition:.3s;
	video#bgVideo {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 0;
    }
    &::before {
	    content: "";
	    position: fixed;
	    z-index: 1;
	    width: 100%;
	    height: 100%;
	    top: 0;
	    left: 0;
	    background-color: rgba(0,0,0,0.3);
    }
}
/* =========================================
	MV：stickyで追尾（固定が自然に終わる）
========================================= */
/* 追尾用クローン */
.sectionMv__titleClone{
	position: fixed;
	z-index: 999;
	pointer-events: none;
	width: 85% !important;
    max-width: var(--contents--large);
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
	height: 100vh !important;
	height: 100svh !important;
	height: 100dvh !important;
    top: 0 !important;
	@media (max-width: 768px){
		width: 88% !important;
		left: 6% !important;
		transform: translateX(0%) !important;
	}
    img {
		width: 50%;
		position: relative;
		z-index: 1;
		margin-top: 32px;
		@media (max-width: 900px){
		}
		@media (max-width: 768px){
			width: 88% !important;
			left: 6% !important;
		}
		@media (max-width: 430px){
		}
    }
}


.sectionMv{
	position: relative;
	display: flex;
	align-items: center;
	height: 100vh;
	height: 100svh;
	height: 100dvh;
}
.sectionMv__area {
	position: relative;
	display: flex;
	align-items: center;
	height: 100vh;
	height: 100svh;
	height: 100dvh;
	width: 100%;
}
.sectionMv .l-container{
	margin: 0 auto;
	display: flex;
	align-items: center;
}
:where(.sectionMv__title) {
	width: 50%;
	position: relative;
	z-index: 1;
	margin-top: 11px;

	@media (max-width: 900px) {
		width: 88%;
		margin-top: -30px;
	}

	@media (max-width: 768px) {
		margin-top: -10px;
	}

	@media (max-width: 430px) {
		margin-top: -15px;
	}
}

:where(.sectionMv__title-img) {
	width: 100%;

	@media (max-width: 900px) {
		width: 70%;
	}

	@media (max-width: 430px) {
		width: 100%;
	}
}



/* =========================================
	Message
========================================= */
.is-title-switched {
	.sectionMessage {
		.sectionMv__title-img{
			opacity: 1;
		}
	}
}
.sectionMessage{
	position: relative;
	z-index: 10;
	border-bottom: 1px solid var(--color-bg);
	padding-top: 15%;
	.sectionMv__title {
		@media (max-width: 768px) {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			img {
				width: 88%;
			}
		}
	}
	.sectionMv__title-img{
		opacity: 0;
	}
}

.js-stopTrigger{
	position: relative;
	width: 1px;
	height: 1px;
}

.sectionMessage__area{
	display: flex;
	flex-direction: column;
	gap: var(--gap--large);
	margin-top: var(--margin--7x-large);
}
.sectionMessage__p{
	font-size: max(var(--font-size--x-large), 22px);
	line-height: var(--line-height--x-large);
	font-weight: var(--font-weight--2x-large);
	
	/* 最初：ぼかし＆薄い */
	filter: blur(10px);
	opacity: 0.15;
	transform: translate3d(0, 0, 0);
	transition: filter 0.9s ease, opacity 0.9s ease;
	word-break: break-all;
	span {
		color: var(--color-bg);
	}
	@media (max-width: 480px){
		br {
			display: none;
		}
	}
}

/* 表示状態：くっきり */
.sectionMessage__p.is-visible{
	filter: blur(0px);
	opacity: 1;
}






/* サービス内容 */
.sectionService {
	position: relative;
	z-index: 1;
	border-bottom: 1px solid var(--color-bg);
}
.sectionService__area {}
.sectionService__message {
	margin-bottom: var(--margin--5x-large);
}


/* 運用ツール */
.sectionTools {
	position: relative;
	z-index: 1;
	border-bottom: 1px solid var(--color-bg);
}


/* 代表情報 */
.sectionPresident {
	position: relative;
	z-index: 1;
	border-bottom: 1px solid var(--color-bg);
}


/* 会社情報 */
.sectionCompany {
	position: relative;
	z-index: 1;
	border-bottom: 1px solid var(--color-bg);
}


/* お問い合わせ */
.sectionContact {
	position: relative;
	z-index: 1;
}
.sectionContact__area {
	margin-bottom: var(--margin--4x-large);
}