@charset "UTF-8";

/* --------------------------------------------
UNIT
--------------------------------------------- */
@media screen and ( width <= 780px ){
	:root{
		--breakPoint : 390;
		--gutter : 18;
		--remBase : 100vw / 390;
	}
}
@media print , screen and ( width > 780px ){
	:root{
		--breakPoint : 1200;
		--gutter : 18;
		--remBase : min( 1px , 100vw / 390 );
	}
}
:root{
	--viewportBase : 100% / 390;
	--contentBase : 100% / 354;
}

/* --------------------------------------------
  STATE
  --------------------------------------------- */
.is-sp{
	@media print , screen and ( width > 780px ){
		display : none;
	}
}
.is-pc{
	@media screen and ( width <= 780px ){
		display : none;
	}
}
.is-tb{
	@media screen and ( width <= 780px ){
		display : none;
	}
	@media print , screen and ( width >= 1200px ){
		display : none;
	}
}

/* --------------------------------------------
FIXED LINKS
--------------------------------------------- */
body:has( #fixedLinks ){
	@media screen and ( width <= 780px ){
		padding-bottom : calc( 64 * var( --remBase ) );
	}
}
#fixedLinks{
	@media screen and ( width <= 780px ){
		position : fixed;
		bottom : 0;
		left : 0;
		z-index : 5;
		display : grid;
		grid-template-rows : calc( 64 * var( --remBase ) );
		grid-template-columns : repeat( 2 , 50% );
		width : 100%;

		/* translate: 0 100%; */
		a{
			display : grid;
			grid-template-columns : auto auto;
			align-items : center;
			justify-content : center;
			width : 100%;
			height : 100%;
			font-family : source-han-sans-japanese;
			font-size : calc( 16 * var( --remBase ) );
			font-weight : 700;
			line-height : 1.2;
			text-align : center;
			&::before{
				display : block;
				width : auto;
				font-size : 0;
				content : "";
				background-repeat : no-repeat;
				background-position : 0 0;
				background-size : contain;
			}
		}
		a:nth-of-type( 1 ){
			column-gap : calc( 10 * 100% / 195 );
			color : white;
			background-color : #4fba2b;
			&::before{
				height : calc( 23.33 * var( --remBase ) );
				aspect-ratio : 24.48/23.33;
				background-image : url( "../images/ui/sns/line.svg" );
			}
		}
		a:nth-of-type( 2 ){
			column-gap : calc( 12 * 100% / 195 );
			color : #db5549;
			background-color : white;
			outline : solid 1px #db5549;
			outline-offset : -1px;
			&::before{
				height : calc( 23.25 * var( --remBase ) );
				aspect-ratio : 22.88/23.25;
				background-image : url( "../images/ui/icon/calendar.svg" );
			}
		}
	}
}