@charset "utf-8";

#newsletter {
	.wrap {
		.contents {
			& > p {
				&:first-child {
					margin-bottom:2em;
				}
			}
			.new {
				margin-bottom:90px;
				display:grid;
				grid-template-columns:30% 1fr;
				align-items:center;
				grid-column-gap:5%;
				background-color:#fafafa;
				padding:50px;
				position:relative;
				box-shadow:0 3px 6px rgba(0,0,0,.15);
				.label {
					position:absolute;
					top:5px;
					left:5px;
					background-color:#ff9900;
					color:#FFFFFF;
					font-size:2.0rem;
					padding:.5em 1em;
					box-shadow:3px 3px 0 #ff6600;
					z-index:1;
				}
				.img {
					img {
						display:block;
						width:100%;
						aspect-ratio:283/400;
						box-shadow:0 3px 6px rgba(0,0,0,.15);
					}
					.noimg {
						display:grid;
						align-items:center;
						justify-content:center;
						font-size:2.0rem;
						width:100%;
						aspect-ratio:283/400;
						background-color:#FFFFFF;
						box-shadow:0 3px 6px rgba(0,0,0,.15);
					}
				}
				dl {
					dt {
						font-size:2.0rem;
						line-height:1.5;
						margin-bottom:1em;
						span {
							display:inline-block;
							font-size:1.5em;
							font-weight:600;
							margin-left:.33em;
						}
					}
					ul {
						margin-bottom:30px;
						li {
							font-size:1.8rem;
							line-height:1.5;
							&::before {
								content:'・';
								margin:0 .25em;
							}
						}
					}
					.btn {
						display:grid;
						grid-template-columns:repeat(2,1fr);
						grid-gap:20px;						
						a {
							display:grid;
							align-items:center;
							justify-content:center;
							background-color:#ff9900;
							color:#FFFFFF;
							max-width:150px;
							font-size:1.8rem;
							font-weight:600;
							height:2em;
							border-radius:1em;
						}
					}
				}
			}
			.contents_inner {
				display:grid;
				grid-template-columns:repeat(3,30%);
				grid-gap:50px 5%;
				.img {
					margin-bottom:20px;
					img {
						display:block;
						width:100%;
						aspect-ratio:283/400;
						box-shadow:0 3px 6px rgba(0,0,0,.15);
					}
					.noimg {
						display:grid;
						align-items:center;
						justify-content:center;
						font-size:2.0rem;
						width:100%;
						aspect-ratio:283/400;
						background-color:#EFEFEF;
						box-shadow:0 3px 6px rgba(0,0,0,.15);
					}
				}
				h3 {
					font-size:2.0rem;
					text-align:center;
				}
				p {
					font-size:1.6rem;
					line-height:1.5;
					margin:.33em 0 .66em;
					text-align:center;
				}
				.btn {
					display:grid;
					grid-template-columns:repeat(2,1fr);
					grid-gap:5px;
					justify-content:center;
					a {
						display:grid;
						align-items:center;
						justify-content:center;
						background-color:#ff9900;
						color:#FFFFFF;
						font-size:1.8rem;
						font-weight:600;
						height:2em;
						border-radius:1em;
					}
				}
			}
		}
	}
}

@media (hover: hover) {

}

@media screen and (max-width:1024px){

}

@media screen and (max-width:768px){

	#newsletter {
		.wrap {
			.contents {
				.new {
					margin-bottom:60px;
					grid-template-columns:1fr;
					padding:20px;
					.label {
						font-size:1.6rem;
					}
					.img {
						width:100%;
						max-width:200px;
						margin:0 auto 20px;
					}
					dl {
						display:grid;
						justify-items:center;
						dt {
							font-size:1.6rem;
							display:grid;
							justify-items:center;
							margin-bottom:10px;
							span {
								font-size:1.5em;
								font-weight:600;
								margin-left:.33em;
							}
						}
						ul {
							margin-bottom:20px;
							li {
								font-size:1.5rem;
							}
						}
						.btn {
							width:100%;
							max-width:300px;
							grid-gap:10px;	
							margin:0 auto;
							a {
								font-size:1.6rem;
							}
						}
					}
				}
				.contents_inner {
					grid-template-columns:repeat(2,48%);
					grid-gap:30px 4%;
					h3 {
						font-size:1.8rem;
						text-align:center;
					}
					p {
						font-size:min(3vw,1.5rem);
					}
					.btn {
						a {
							font-size:1.5rem;
						}
					}
				}
			}
		}
	}
	
}