@charset "utf-8";
/* sample index.html */

#hagaki_sample .-flex {
    display: flex;
    justify-content: center;
	flex-wrap: wrap;
    gap: 40px;
    text-align: center;
}
#hagaki_sample .-flex .-col3 {
	width: calc(100% / 3 - 27px);
}
#hagaki_sample .-flex .-col2 {
    width: calc(100% / 2 - 20px);
}
#hagaki_sample > div {
    padding-bottom: 40px;
	margin-bottom: 40px;
    border-bottom: #CCCCCC solid 1px;
}
#hagaki_sample .-flex :where(.-col3, .-col2) img{
    width: 100%;
}

#hagaki_sample dt{
	font-weight: bold;
	margin-bottom: 10px;
}
#hagaki_sample #box_f2card .updown img{
	width: 530px;
}
#hagaki_sample #box_f3card dd img {
    width: 600px;
}
#hagaki_sample #box_a4 img {
    width: 400px;
}
@media screen and (max-width:750px){
	#hagaki_sample .-flex {
		flex-direction: column;
		gap:0;
	}
	#hagaki_sample .-flex :is(.-col3, .-col2) {
		width: 100%;
        margin-inline: auto;
	}
	#hagaki_sample dl + dl {
		margin-top: calc(50 * 100vw / 750);
	}
	#hagaki_sample > div {
		padding-bottom: calc(70 * 100vw / 750);
		margin-bottom: calc(70 * 100vw / 750);
	}
	#hagaki_sample .-flex :where(.-col3, .-col2) img{
		width: 100%;
	}
	#hagaki_sample dt{
		font-weight: bold;
		margin-bottom: calc(16 * 100vw / 750);
	}
	#hagaki_sample #box_f2card .updown img,
	#hagaki_sample #box_f3card dd img,
	#hagaki_sample #box_a4 img {
		width: 100%;
	}
}


/* sample atena.html */
#sample_atena{
	background: #F4F4F4;
}
#sample_atena .layout_box{
	text-align: center;
	padding-top: 30px;
	box-sizing: border-box;
}
#sample_atena .layout_img {
    margin-bottom: 60px;
}
#sample_atena img{
	max-width: 100%;
	height: auto;
}
#sample_atena .btn_close{
	margin:0 auto;
	text-align: center;
}
@media screen and (max-width:750px){
	#sample_atena .layout_box{
		text-align: center;
		padding: calc(60 * 100vw / 750) calc(20 * 100vw / 750);
	}
	#sample_atena .layout_img {
		margin-bottom:calc(60*100vw/750);
	}
}