@charset "UTF-8";

/* 20241108：「100ぴきかぞく」公式サイト */
.frame_area{
	width: 70%;
	/*
	border:1px solid #f00;
	*/
	margin: 0 auto;
}@media screen and (min-width: 1025px){
	.frame_area{
		margin: 0 auto 0 0;
	}	
}
.frame{
	position: relative;
	width: 100%;
	height: 0;
	overflow: hidden;
}
.pc.frame {
	padding-top: 75%; /* 1200*900で取得している */
}
.tb.frame {
	padding-top: 75%; /* 980*735で取得している */
}
.sp.frame {
	padding-top: 177.78%; /* 450*800で取得している */
}
.frame_area .frame iframe {
	transform-origin: 0 0;
}
.pc.frame iframe {
	margin-top: -75%; /* 1200*900で取得している */
}
.tb.frame iframe {
	margin-top: -75%; /* 980*735で取得している */
}
.sp.frame iframe {
	margin-top: -177.78%; /* 450*800で取得している */
}

.frame_area .frame img{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
}

/* 20260120：ねむるまえほん */
.nemuruma_intro{
	display: flex;
	gap:1em;
	position: relative;
	flex-wrap: wrap;
	width: 100%;
}
.nemuruma_intro p{
	flex: 1;
}
.nemuruma_img{
	display: flex;
	max-width: 550px;
	gap: .5em;
	flex-shrink: 1;
}
@media screen and (max-width: 1000px){
	.nemuruma_intro{
		flex-direction: column;
	}
	.nemuruma_img{
		width: 90%;
		margin: 0 auto;
	}
}
@media screen and (max-width: 600px){
	.nemuruma_img{
		flex-direction: column;
	}
}