@charset "utf-8";

article.ds-ct {background:#ffffed; overflow-y:hidden;}

.ds-title,
.ds-title>div>div {
	background:url('../../pages/p02/img/p02_10story_31b.jpg') top center repeat-x;
	background-size:100% auto;
	overflow:hidden;
	
}

.ds-title>div>div {
	height:0;
	padding-bottom:50%;
	position:relative;
}

.ds-title>div>div>div {
	position:absolute; width:100%; height:100%; left:0; top:0;
	display:flex; justify-content:center; align-items:flex-end;
}

.ds-title h1 {width:45%;margin:0 0 5% 0;}
.ds-title h1 img {width:100%;}

.ds-article>div>div {display:flex; justify-content:space-between; align-items:center; gap:5%; margin:8% 0;}
.ds-article h2 {margin:8% 0 2% 0;}
.ds-article h2 +div {margin-top:0;}
.ds-article h2 img {height:2.5em; width:auto; display:block;}
.ds-article>div>div h3 {flex:0 0 22em;}
.ds-article>div>div img {display:block;}

.ds-article>div>div:nth-of-type(2n) {flex-direction:row-reverse}
.ds-article>div>div:nth-of-type(2)~div:nth-of-type(2n) {flex-direction:row;}
.ds-article>div>div:nth-of-type(4)~div:nth-of-type(2n-1) {flex-direction:row-reverse;}

.ds-article>div>div:nth-of-type(11)~div:nth-of-type(2n-1) {flex-direction:row;}
.ds-article>div>div:nth-of-type(12)~div:nth-of-type(2n) {flex-direction:row-reverse;}

@media all and (max-width:768px) { /* MOBILE */
	.ds-title>div>div {
	height:0;
	padding-bottom:70%;
	}
	.ds-title h1 {width:60%;}
	
	.ds-article>div>div {flex-direction:column!important; gap:0; margin:10% 0;}
	.ds-article>div>div>* {flex:1 0 100%!important; margin:0;}
	.ds-article>div>div>h3 {width:100%;}
	.ds-article>div>div>h3 img {width:20em;}
	
	.ds-article>div>div img {margin-left:0; margin-right:auto;}
	.ds-article>div>div:nth-of-type(2n) img {margin-right:0; margin-left:auto;}
	.ds-article>div>div:nth-of-type(2)~div:nth-of-type(2n) img {margin-left:0; margin-right:auto;}
	.ds-article>div>div:nth-of-type(4)~div:nth-of-type(2n-1) img {margin-right:0; margin-left:auto;}

	.ds-article>div>div:nth-of-type(11)~div:nth-of-type(2n-1) img {margin-left:0; margin-right:auto;}
	.ds-article>div>div:nth-of-type(12)~div:nth-of-type(2n) img {margin-right:0; margin-left:auto;}
}