@charset "UTF-8";
/* CSS Document */

/*main*/
main{
	background-image: url("../img/bg_top.png");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	margin-top: 96px;
}
main .container{
	padding: 40px 20px;
}
main .item_box{
	display: flex;
	justify-content: flex-start;
	align-items: stretch;
	text-align: center;
	width: 100%;
}
h1{
	font-size: var(--fz21);
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: 600;
	font-style: normal;
	line-height: 1.6;
	letter-spacing: 0.05em;
	color: var(--white);
	background-color: var(--light-purple);
	padding: 10px 20px;
	width: 34%;
}
main p{
	font-size: var(--fz21);
	font-weight: 600;
	background-color: var(--white);
	border: solid 1px var(--light-purple);
	padding: 10px 20px;
	width: 76%;
}
/* end main*/
#op_sample .container{padding-top: 40px;}
/*==================================================
section css
===================================*/
.txt_kome p{text-align: right;}

.sample_box{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	margin-top: 40px;
}

.sample_detail{
	width: 32%;
	margin-bottom: 32px;
}
p.txt_box{
	font-size: 1.0625rem;
	background-color: var(--bg-light-gray);
	padding: 16px 20px;
	min-height: 114px;
}

/*==================================================
レスポンシブ css
===================================*/
@media not screen and (min-width: 768px) {
	main{
		margin-top: 60px;
	}
	main .container{
		padding: 20px;
	}
	main .item_box{
		flex-direction: column;
		text-align: left;
	}
	h1{
		width: 100%;
	}
	main p{
		width: 100%;
	}
	#op_sample .container{
		padding-top: 20px;
	}
	.sample_box{
		margin-top: 20px;
	}
	.sample_detail{
		width: 100%;
	}
	p.txt_box{
		min-height: inherit;
	}
}