@charset "utf-8";

.ds-title {
	background:url('../../pages/p01/img/p01_posidstory_c-00.jpg') no-repeat center center;
	background-size:cover;
	position:relative;
	font-size:4.2rem;
}
.ds-title:before {content:""; display:block; width:50%; height:100%; position:absolute; background:linear-gradient(to right, rgba(111,91,86,0.5), rgba(111,91,86,0)); z-index:0;}

.ds-title>div {z-index:1; position:relative;}
.ds-title>div>div {
	margin:0;
	display:flex; justify-content:space-between; align-items:center;
}

.ds-title h1 {
	margin:0;
	align-self:flex-end;
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	font-size:1em;
}
.ds-title h1 small {font-size:0.7em;}

.ds-title h1 span {background:#16274F; border-radius:0 0.5em 0 0; padding:0.2em 2em 0.2em 1em;}
.ds-title img {display:block;}
.ds-title-img {height:3.2em; margin:8% 0; transition-duration:5s!important;}
.ds-title-img img {height:100%; width:auto;}
.ds-title-img-ext {position:absolute; width:18%; bottom:-20%; left:14em; margin:0; height:initial;}
.ds-title-img-ext img{width:100%; height:auto;}

@media all and (min-width:769px) and (max-width:1024px) { /* TABLET */
	.ds-title {
		font-size:3.6rem;
	}
	.ds-title-img-ext {left:12em;}
}

@media all and (max-width:768px) { /* MOBILE */
	.ds-title:before {width:100%; background:linear-gradient(to right, rgba(111,91,86,0.7), rgba(111,91,86,0.1));}
	.ds-title {
		font-size:1.8rem;
	}
	.ds-title h1 small {font-size:0.8em;}
	.ds-title>div{padding-left:0;}
	.ds-title>div>div {
		overflow:hidden;
	}
	.ds-title h1 {}
	.ds-title h1 * {box-sizing:border-box}
	.ds-title h1 small{padding-left:1em;}
	
	.ds-title-img {height:2.8em;}
	.ds-title-img-ext {display:none;}
}

.ds-article {background:#f48641 url('../../pages/p01/img/p01_posidstory_c-04.png') no-repeat top 20% right 5%; background-size:30% auto; color:#fff; overflow-y:hidden;}
.ds-article>div>div {margin:8% 0;}

.ds-article-txt {display:flex; align-items:center;}
.ds-article-txt~div {margin-top:5%;}

.ds-article-txt>*:not(h2) {overflow:hidden;}
.ds-article h2 {padding-top:0.5em; padding-left:1em; flex:9em 0 0; height:5.5em; margin-right:2em;
font-size:2.6rem; background:#fff; color:#1a9ee9; margin:0; position:relative; box-sizing:border-box; overflow:hidden; background-repeat:no-repeat; background-size: auto 2.4em; background-position:left 1em bottom 0; white-space:nowrap;
clip-path:polygon(100% 0, 100% 78%, 87% 100%, 0 100%, 0 0);
border: 3px solid transparent; border-image: linear-gradient(135deg, red 0%, orange 100%); border-image-slice: 1;
}
.ds-article h2:after {content:""; display:block; position:absolute; width:0.9em; height:0; padding-bottom:0.9em; background:none; right:2%; bottom:2%; border-style:solid; border-color:transparent; border-width:3px 0 0 3px;
border-image: linear-gradient(225deg, red 0%, orange 100%); border-image-slice: 1;}
.ds-article-txt:nth-of-type(1) h2 {background-image:url('../../pages/p01/img/p01_posidstory_c-hbg-01.png')}
.ds-article-txt:nth-of-type(2) h2 {background-image:url('../../pages/p01/img/p01_posidstory_c-hbg-02.png')}
.ds-article-txt:nth-of-type(3) h2 {background-image:url('../../pages/p01/img/p01_posidstory_c-hbg-03.png')}
.ds-article-txt:nth-of-type(4) h2 {background-image:url('../../pages/p01/img/p01_posidstory_c-hbg-04.png')}
.ds-article-txt:nth-of-type(5) h2 {background-image:url('../../pages/p01/img/p01_posidstory_c-hbg-05.png')}
.ds-article-txt-h2-top {align-self:flex-start;}

.ds-article h3 {margin:0 0 0 1.5em;}
.ds-article *+h3 {margin-top:2em;}
.ds-article h3 span {color:yellow; display:inline-block; border-bottom:2px solid yellow; margin:0;}
.ds-article h3 small {margin-left:1em; font-weight:normal;}

.ds-article-txt ul strong {font-size:2.4em; color:inherit;}
.ds-article figure {max-width:1024px; margin-left:auto; margin-right:auto;}

.ds-ct-spc01 figcaption {color:#fff;}
.ds-ct-spc01 {color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center;}

@media all and (min-width:769px) and (max-width:1024px) { /* TABLET */
	.ds-article h2 {font-size:2.4rem; padding-top:0.5em; padding-left:1em; flex:8em 0 0; height:4.5em; margin-right:1em; background-size: auto 2.2em; }
	.ds-article-txt ul strong {font-size:2em;}
	.ds-ct-spc01 img {max-width:25%;}
}

@media all and (max-width:768px) { /* MOBILE */
	.ds-article-txt-full {display:block;}
	.ds-article-txt-full>*:not(h2) {flex:1 0 100%; overflow:visible;}
	.ds-article h2 {font-size:1.7rem; padding-top:0.4em; padding-left:0.5em; flex:6em 0 0; width:6em; height:3.5em; margin-right:0; background-size: auto 1.5em;}
	.ds-article-txt-full:after{clear:both; content:""; display:block; width:100%; height:0;}
	.ds-article-txt-full h2 {float:left; margin:0 2em 2.5em 0;}
	.ds-article-txt ul strong {font-size:1.7em;}
	.ds-ct-spc01 img {max-width:200px;}
}