@charset "utf-8";
@import url("../../assets/css/style.css");

/* =============================================

	common-layout

============================================= */

article {
	overflow 							: hidden;
	margin-bottom 						: var(--space40); 
	& h4 {
		width 							: 33%;
		color 							: var(--accept_red);
		font-size 						: var(--font18);
		font-weight 					: var(--bold);
		float 							: left;
		@media screen and (max-width: 640px) {
			background 					: var(--palegred);
			width 						: 100%;
			font-size 					: var(--font22);
			float 						: none;
			padding 					: var(--space15);
		}
	}
	& .details {
		width 							: 67%;
		border-left  					: solid 2px var(--accept_red);
		float 							: right;
		padding-left 					: var(--space40); 
		@media screen and (max-width: 640px) {
			width 						: 100%;
			float 						: none;
			border-left  				: none;
			border-top  				: solid 2px var(--accept_red);
			padding-left 				: 0; 
			padding-top 				: var(--space25); 
		}
		& dl div {
			margin-top					: var(--space30);
			&:first-child {
				margin-top				: 0;
			}
		}
		& dt {
			color 						: var(--accept_red);
			font-size 					: var(--font18);
			font-weight 				: var(--medium);
			margin-bottom 				: var(--space15);
			padding-left 				: 1.3em;
			text-indent 				: -1.3em;
			&:before {
				content: "〇 ";
			}
		}
		& dd {
			color 						: var(--gray);
			font-size 					: var(--font18);
			font-weight 				: var(--normal);
			line-height 				: 1.6;
			padding-left 				: 1.3em;
			
			& .note {
				font-size 				:var(--font16);
				font-weight 			:var(--normal);
				line-height 			: 1.4;
				text-indent 			: -1.2em;
				margin-bottom 			: var(--space15);
				padding-left 			: 1.2em;
				&::before {
					content  			: "※ ";
				color 					: var(--accept_red);
				}
			}
		}
		& .division {
			width: 100%;
			color 						: var(--black);
			font-size 					: var(--font16);
			font-weight 				: var(--bold);
			margin 						: var(--space25) 0;
			
			background-image 			: radial-gradient(circle, var(--accept_red) 3px, transparent 3px);
			background-position 		: left center;
			background-repeat 			: repeat-x;
			background-size 			: 16px 6px;
			
			& > span {
				background-color 		: var(--white);
				display 				: inline-block;
				padding-right			: var(--space25);
			}
			
		}
	}
	
}
