@charset "utf-8";

	
	#page_title{
		background:url(grp/page_titile_bg.jpg) right center no-repeat;
	}
	
	#top_com{
		padding:30px 0 0 0;
		width:min(960px,100%);
		margin:0 auto;
		display:grid;
		grid-template-columns:1fr 2fr;
		gap:30px;
		figure{
			img{
				box-shadow: 0 0 2px 2px #ddd;
			}
		}
		> div{
			p{
				text-align:left;
				strong{
					color:red;
					font-weight: 500
					}
				}
			aside{
				font-size: .8em;
				text-align:right;
				padding:1em 0 0 0;
				}
		}
		@media (max-width: 768px) {
			display:block;
			padding:0 0 0 0;
			figure{
				img{
					width:min(300px,100%);
					margin:0 auto;
				}
			}
			> div{
				margin:20px auto 0 auto;
				aside{
					text-align: left;
				}
			}
		}
	}
	
	#ikani{
		width:min(960px,100%);
		margin:50px auto 0 auto;
		border:1px solid silver;
		padding:30px;
		text-align:left;
		border-radius:15px;
		background:#eee;
		display:grid;
		grid-template-columns: 200px 1fr;
		gap:0 30px;
		@media (max-width: 768px) {
			display:block;
			figure{
				display:inline-block;
				float:left;
				width:150px;
				margin:0 10px 5px 0;
			}
		}
		@media (max-width: 480px) {
			padding:20px;
			figure{
				display:block;
				float:none;
				margin:0 auto 0 auto;
			}
			p{
				margin:20px auto 0 auto;
			}
		}
	}
	
	#sample_list{
		padding:50px 0 0 0;
		section{
			padding:80px 0 ;
			border-top:1px dotted silver;
			
			> div{
				display:grid;
				grid-template-columns: repeat(auto-fill,minmax(min(400px,100%),1fr));
				gap:30px;
				margin:20px auto 0 auto;
				> div:nth-of-type(1){
					a{
						display:block;
					}
					aside{
						margin:10px auto 0 auto;
						text-align: right;
						font-size: .8em;
					}
					figure{
						display:block;
						margin:5px auto 0 auto;
					}
				}
				> div:nth-of-type(2){
					h3{
						text-align:left;
						font-weight:500;
						border-bottom:1px solid rgb(var(--baceFontColor));
						font-size: 1.2em;
						padding-bottom:.2em;
					}
					div{
						text-align:left;
						margin:20px auto 0 auto;
					}
					aside{
						text-align:right;
						}
					}
				}
		}
		@media (max-width: 768px) {
			section{
				> div{
					> div:nth-of-type(1){
						figure{
							display:none;
						}
					}
				}
			}
		}
	}