@charset "UTF-8";

/* --------------------------------------------
H1
--------------------------------------------- */
body > h1{
	font-weight : 400;
	color : #666;
	@media screen and ( width <= 768px ){
		padding-block : calc( 7.875 * var( --remBase ) );
		padding-inline : calc( 18.9 * var( --viewportBase ) );
		font-size : calc( 15.75 * var( --remBase ) );
		line-height : 1.5;
	}
	@media print , screen and ( width > 768px ){
		padding-block : calc( 7 * var( --remBase ) );
		padding-inline : calc( 25.2 * var( --viewportBase ) );
		font-size : calc( 14 * var( --remBase ) );
		line-height : 1.5;
	}
}
body:has( > h1 ){
	@media screen and ( width <= 768px ){
		padding-top : 0;
		#header{
			&:not( .is-fixed ){
				position : relative;
				#nav{
					top : calc( var( --headerHeight ) + var( --h1VisibleHeight ) );
					height : calc( 100dvh - var( --headerHeight ) - var( --h1VisibleHeight ) );
				}
			}
			&.is-fixed{
				position : sticky;
				top : 0;
			}
		}
		#menuBtn{
			position : absolute;
		}
	}
	@media print , screen and ( width > 768px ){
		padding-top : calc( var( --headerHeight ) + 35 * var( --remBase ) );
		> h1{
			position : absolute;
			top : 0;
			left : 0;
			width : 100%;
		}
		#header{
			top : calc( 35 * var( --remBase ) );
		}
	}
}