@charset "utf-8";


.main .container:not(:first-of-type) { padding-top: 0; }
.main .container:not(:first-of-type)::before { content: none; }
.main .container:first-of-type .contents { margin-top: 0; }
.main h2 { font-size: var(--font-xl); }

.header { transition: background-color 0.2s ease-out; }
.header .logo svg { transition: color 0.2s ease-out; }

.scrolltop .header { background-color: transparent; }
.scrolltop .header .logo svg { color: var(--color-white); }

.scrolltop .nav span,
.scrolltop .nav::before,
.scrolltop .nav::after { background-color: var(--color-white); }

.header.active { background-color: var(--color-alpha); }
.header.active .logo svg { color: var(--color-black); }
.nav.active span,
.nav.active::before,
.nav.active::after,
.nav.actived span,
.nav.actived::before,
.nav.actived::after { background-color: var(--color-black); }

.footer {
	background-color: var(--color-white);
	margin-top: 0;
}



/* トップ ---------------------------------------------------------------------------------------*/
.main .mainbody {
	background-color: var(--color-white);
	margin-top: calc(100svh - var(--header-h));
	padding: var(--margin-ll) 0 var(--margin-l)
}

.main .comment { margin-top: var(--margin-s); }
.main .comment a {
	padding-right: 20px;
	position: relative;
}
.main .comment a::after {
	border-top: var(--color-black) solid 1px;
	border-right: var(--color-black) solid 1px;
	content: "";
	height: 10px;
	position: absolute;
	top: 5px;
	right: 0;
	transform: rotate(45deg);
	width: 10px;
}

.main .image.square { margin-top: var(--margin-ms); }

.main .image.wide { margin-top: var(--margin-ll); }

.main .image.wide p {
	height: 31vw;
	max-height: 590px;
	overflow: hidden;
	position: relative;
}
.main .image.wide img {
	position: absolute;
	top: 0;
	left: 0;
	transition: transform 0.2s ease-out;
}

/* 動画 */
.main .movie {
	height: 100dvh;/*calc(100dvh - var(--header-h));*/
	overflow: hidden;
	position: fixed;
	top: 0;/*var(--header-h);*/
	left: 0;
	width: 100%;
	z-index: -1;
}
.main .movie video {
	height: 100%;
	position: absolute;
	top: 50%;	
	left: 50%;
	transform: translate(-50%, -50%);
	width: auto;
	max-width: none;
}
.main .movie.h video {
	height: auto;
	width: 100%;
}

.main .movie::before {
	background-image: url("../images/icon_loading.gif");
	background-size: 32px auto;
	content: "";
	height: 32px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 32px;
}

.main .movie::after {
	color: var(--color-white);
	content: "SCROLL";
	font-size: var(--font-s);
	position: absolute;
	bottom: 70px;
	left: 0;
	text-align: center;
	width: 100%;
}
.main .movie .scroll,
.main .movie .scroll::before {
	content: "";
	height: 60px;
	position: absolute;
	bottom: 0;
	width: 1px;
}
.main .movie .scroll {
	background-color: rgba(255, 255, 255, 0.4);
	overflow: hidden;
	left: 50%;
	transform: translateX(-50%);
}
.main .movie .scroll::before {
	animation: bar 2s linear infinite;
	background-color: var(--color-white);
	left: 0;
}
@keyframes bar {
	0% { transform: scaleY(1); transform-origin: bottom; }
	50% { transform: scaleY(0); transform-origin: bottom; opacity: 1; }
	50.001% { transform: scaleY(0); opacity: 0; transform-origin: bottom; }
	50.002% { transform: scaleY(0); opacity: 1; transform-origin: top; }
	100% { transform: scaleY(1); transform-origin: top; }
}

.main .speaker {
	/*background-color: #f00;*/
	cursor: pointer;
	height: 20px;
	position: absolute;
	top: calc(100dvh - 40px);
	left: 20px;
	width: 20px;
	z-index: 100;
}
.main .speaker::before {
	background-image: url('../images/icon_speaker_off.svg');
	content: "";
	height: 20px;
	position: absolute;
	top: 0;
	left: 0;
	width: 20px;
}
.main .speaker.on::before { background-image: url('../images/icon_speaker_on.svg'); }


/* 背景画像 */
.main .background { margin-top: var(--margin-ll); }
.main .background p {
	height: 460px;
	overflow: hidden;
	position: relative;
}
.main .background img {
	position: absolute;
	top: 0;
	left: 0;
	transition: transform 0.2s ease-out;
}

/* お知らせ */
.main .newslist { margin-top: var(--margin-s); }

/* Instagram */
.main .site {
	font-size: var(--font-m);
	margin-top: var(--margin-xs);
}
.main .site a { text-decoration: underline; }
.main .instagram { margin-top: var(--margin-s); }

#sb_instagram .sbi_photo_wrap { overflow: hidden; }
/*-----------------------------------------------------------------------------------------------*/





@media(min-width: 530px) {
}



@media(min-width: 768px) {
	.main .container:not(:first-of-type) { padding-top: var(--margin-l); }
	.main .container:first-of-type .contents { margin-top: var(--margin-m); }
	/* トップ ---------------------------------------------------------------------------------------*/
	.main .container .contents { position: relative; }
	.main .container .contents .text {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 100%;
	}
	.main .container .contents .text .swrapper { padding-right: calc(42% + var(--margin-s)); }
	.main .container .contents .image {
		margin-top: 0;
		margin-left: auto;
		width: 50%;
	}
	.main #tech.container .contents .comment {
		flex: 1;
		margin-top: 0;
	}
}



@media(min-width: 1024px) {
	/* トップ ---------------------------------------------------------------------------------------*/
	/* 施工事例 */
	.main .workslist { gap: var(--margin-m) var(--margin-ms); }
	.main .workslist > li { width: calc((100% - (var(--margin-ms) * 2)) / 3); }
	/* お知らせ */
	.main .newslist {
		border-top: none;
		display: flex;
		flex-wrap: wrap;
		column-gap: var(--margin-s);
	}
	.main .newslist li { width: calc((100% - var(--margin-s)) / 2); }
	.main .newslist li:nth-child(1),
	.main .newslist li:nth-child(2) { border-top: var(--color-border) solid 1px; }
}



@media(min-width: 1280px) {
	/* トップ ---------------------------------------------------------------------------------------*/
	.main .container .contents .text .swrapper { padding-right: calc((var(--wrapper-max) / 2) + var(--margin-l)); }
	/* お知らせ */
	.main .newslist { column-gap: var(--margin-m); }
	.main .newslist li { width: calc((100% - var(--margin-m)) / 2); }
}