/*
 * base css 
 * pc width 1000px fixed
 */

@media (max-width: 599px) {
}

@media (min-width: 600px) and (max-width:959px) {
}

@media (min-width: 960px) {
}

@media (max-width: 480px) {
}

@media (min-width: 481px) and (max-width:767px) {
}

@media (min-width: 768px) and (max-width:959px) {
}

@media (min-width: 960px) {
}



/* ---------------------------------------- common */

#lead {
	text-align: center;
	margin: 0 0 5em;
}

@media (max-width: 480px) {
	#lead { font-size: 1.5rem; }
}

@media (min-width: 481px) and (max-width:767px) {
	#lead { font-size: 1.6rem; }
}

@media (min-width: 768px) and (max-width:959px) {
	#lead { font-size: 1.7rem; }
}

@media (min-width: 960px) {
	#lead { font-size: 1.8rem; }
}

article .inside + .inside {
	border-top: 2px var(--theme-border-gray) dotted;
	padding: 2em 0 0;
	margin: 2em 0 0;
}

article h3 { color: var(--theme-pink-middle); }

@media (max-width: 599px) {
	article .flexwrap > figure {
		text-align: center; 
		margin: 0 0 2em;
	}
	article .flexwrap > figure img {
		width: 70%; 
		max-width: 400px;
	}
	article .width70 > figure {
		text-align: center; 
		margin: 0 0 2em;
	}
	article .width70 > figure img {
		width: 70%; 
		max-width: 400px;
	}
}

@media (min-width: 600px) {
	article .flexwrap {
	    display: -webkit-box;
	    display: -ms-flexbox;
	    display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		-webkit-flex-direction: row-reverse;
		-ms-flex-direction: row-reverse;
		flex-direction:row-reverse;
	}
	article .flexwrap > figure { width: 40%; }
	article .flexwrap > div { width: 55%; }
}