@charset "UTF-8";

main {
	background: url(/images/plan/main.jpg);
	background-size: cover;
	background-position: center;
}
.contents{
	.title{
		width: 100%;
		margin: 0 auto 50px;
	}
}

#contents01{
	.inner_flex{
		gap: 2%;

		.box{
			width: 49%;
			margin: 0 0 20px;

			picture{
				width: 100%;
				margin: 0 auto 20px;
			}
			dl{
				background: var(--colorW);
				padding: 20px 0;

				dt{
					text-align: center;
					width: 100%;
				}
				dd{
					display: flex;
					flex-wrap: wrap;
					justify-content: center;
					gap: 10px;
					width: 100%;

					p{
						text-align: center;
						width: 100%;
						margin: 0 0 10px;
					}
					a{
						background: var(--colorW);
						border: 1px solid var(--color02);
						border-radius: 6px;
						color: var(--color02);
						text-align: center;
						width: 30%;
						padding: 5px 0;
						transition: all ease 0.5s;

						&:hover{
							background: var(--color02);
							color: var(--colorW);
						}
					}
				}
			}
		}
		.box-add{
			background: var(--color03);
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding: 20px 30px;

			h3{
				font-size: var(--font20-24);
				text-align: center;
				width: 100%;
				margin: 0 0 5%;
			}

			picture{
				display: flex;
				justify-content: center;
				align-items: center;
				gap: 20px;
				width: 100%;
				margin: 0 0 5%;

				img.circle{
					width: 150px;
					height: 150px;
				}
				a{
					width: calc(100% - 300px);
					padding: 0 0 20px;
					position: relative;

					&:before{
						content:"";
						background: url(/images/common/icon_zoom.svg);
						background-repeat: no-repeat;
						background-size: 100%;
						width: 10px;
						height: 12px;
						position: absolute;
						bottom: 0;
						right: 70px;
					}
					&:after{
						content:"拡大する";
						color: var(--color04);
						font-size: var(--font-menu);
						position: absolute;
						bottom: -5px;
						right: 0;
					}
				}
			}
			p{
				width: 100%;
				font-size: var(--font-menu);
			}
		}
	}
}


@media screen and (min-width: 769px) {

}

@media screen and (max-width: 768px) {
	main{
		background: url(/images/plan/main.jpg);
		background-size: cover;
		background-repeat: no-repeat;
	}
	#contents01{
		.inner{
			#reserve{
				padding: 0 0 30px;
			}
		}
		.inner_flex{
			.box{
				width: 100%;
			}
			.box-add{
				padding: 20px 20px;

				picture{
					img.circle{
						width: 60px;
						height: 60px;
					}
					a{
						width: 60%;
					}
				}
			}
		}
	}
}