@charset "UTF-8";

/* --------------------------------------------
EDITOR
--------------------------------------------- */
.editor{
	> ul{
		> li{
			position : relative;
			padding-left : 1em;
			&::before{
				position : absolute;
				top : 0;
				left : 0;
				width : 1em;
				text-align : center;
				content : "・";
			}
		}
	}
	> * + p , p + p , * + ul , > * + dl{
		margin-top : 1lh;
	}
	@media screen and ( width <= 768px ){
		img{
			max-width : inherit;
		}
		.float-right-pc{
			> picture + p{
				margin-top : 1lh;
			}
		}
	}
	@media print , screen and ( width > 768px ){
		.float-right-pc{
			> picture{
				float : right;
				margin-left : calc( 20 * var( --remBase ) );
			}
		}
	}
}

/* --------------------------------------------
TEXT
--------------------------------------------- */
p.fz-12-15 , ul.fz-12-15 , dl.fz-12-15{
	line-height : normal;
	@media screen and ( width <= 768px ){
		font-size : calc( 12 * var( --remBase ) );
		line-height : calc( 20 / 12 );
	}
	@media print , screen and ( width > 768px ){
		font-size : calc( 15 * var( --remBase ) );
		line-height : calc( 21 / 15 );
	}
}

/* --------------------------------------------
FRAME
--------------------------------------------- */
.frame01{
	border : solid calc( 2 * var( --remBase ) ) white;
	border-radius : calc( 3 * var( --remBase ) );
	box-shadow : 0 0 calc( 5 * var( --remBase ) ) color-mix( in sRGB , black 10% , transparent );
}
.frame0201 , .frame0202{
	position : relative;
	z-index : 0;
	border : solid calc( 2 * var( --remBase ) ) white;
	box-shadow : 0 0 calc( 5 * var( --remBase ) ) #0000001a;
	img{
		border-radius : calc( 3 * var( --remBase ) );
	}
	&::before{
		position : absolute;
		z-index : -1;
		display : block;
		width : 100%;
		height : 100%;
		content : "";
		background-color : #007ad580;
	}
}
.frame0201::before{
	@media screen and ( width <= 768px ){
		top : calc( -6 * var( --remBase ) );
		left : calc( 6 * var( --remBase ) );
	}
	@media print , screen and ( width > 768px ){
		top : calc( -20 * var( --remBase ) );
		left : calc( 20 * var( --remBase ) );
	}
}
.frame0202::before{
	@media screen and ( width <= 768px ){
		bottom : calc( -6 * var( --remBase ) );
		left : calc( -6 * var( --remBase ) );
	}
	@media print , screen and ( width > 768px ){
		bottom : calc( -20 * var( --remBase ) );
		left : calc( -20 * var( --remBase ) );
	}
}

/* --------------------------------------------
INTERSECTION OBSERVER ANIMATION
--------------------------------------------- */
.io-marker{
	background-repeat : no-repeat;
}
@media ( prefers-reduced-motion : no-preference ){
	.io-marker{
		background-size : 0% 100%;
		transition : background-size var( --transitionBase ) .3s;
		&.is-inview{
			background-size : 100% 100%;
		}
	}
}