@charset "utf-8";

.ds-shadow-1 {box-shadow:0 0 20px -10px #000;}
.ds-color-spc01 {color:#221776;}
.ds-color-spc02 {color:#584f96;}
.ds-color-spc03 {color:#897db3;}
.ds-title {
	background:#e9c3bb;
	overflow-y:hidden;
}

.ds-title>div>div {
	margin:8% 0 0 0;
	padding-bottom:20%;
	position:relative;
}

.ds-title .ds-ct-img {margin-bottom:0; z-index:1;}
.ds-title img {width:100%; height:auto;}

.ds-title .ds-ct-img~* {position:absolute; font-size:0; z-index:2;}
.ds-title>div>div>div {bottom:-5%; left:-5%; width:60%;}
.ds-title>div>div>h1 {margin:0; bottom:8%; right:5%; width:38%}
@media all and (min-width:769px) and (max-width:1024px) { /* TABLET */
	.ds-title>div>div>div {width:50%;}
	.ds-title>div>div>h1 {width:50%}
}

@media all and (max-width:768px) { /* MOBILE */
	.ds-title>div>div>div {left:0; width:45%;}
	.ds-title>div>div>h1 {width:55%}
}

.ds-article1 {
	background:#e9c3bb;
	overflow-y:hidden;
}
.ds-article1>div>div{
	padding:0 0 8% 0;
}
.ds-article1>div>div>div {
	background:#fff;
	padding:0 5%;
	overflow:hidden;
}

.ds-spc-01 {box-sizing:border-box; padding:8% 5%; border-style:solid; border-color:#dbc5ba; border-width:0 1px 1px 1px; background-image:url('../../pages/p01/img/p01_peoplestory_a-08.png'); background-position:top left; background-repeat:repeat-x; background-color:#faf7f5; position:relative; font-size:1.1em; font-weight:bold; margin:8% 0; word-break:keep-all;}
.ds-spc-01 div {position:absolute; width:20%; bottom:0; left:0; font-size:0; z-index:0;}
.ds-spc-01 div img{width:100%; height:auto;}

@media all and (min-width:769px) and (max-width:1024px) { /* TABLET */
	.ds-spc-01 {padding:4% 4%;}
	.ds-spc-01 div {width:15%;}
}

@media all and (max-width:768px) { /* MOBILE */
	.ds-spc-01 {padding:4% 4%; font-size:1em;}
	.ds-spc-01 div {width:15%;}
}

.ds-spc-02 {margin:8% 0;}
.ds-spc-02 li {display:flex; align-items:center; gap:8%;}
.ds-spc-02 li:nth-of-type(2){border-color:#ccc; border-style:dotted; border-width:2px 0; padding:4% 0; margin:4% 0;}
.ds-spc-02 h2 {font-size:0; margin:0; flex:0 0 25%;}
.ds-spc-02 div {flex:auto;}
.ds-spc-02 img {width:100%; height:auto;}

@media all and (min-width:769px) and (max-width:1024px) { /* TABLET */
	.ds-spc-02 li {gap:6%;}
	.ds-spc-02 h2 {flex:0 0 23%;}
}

@media all and (max-width:768px) { /* MOBILE */
	.ds-spc-02 li {gap:5%;}
	.ds-spc-02 h2 {flex:0 0 26%;}
}


.ds-article2 {background:#f7f1ee}
.ds-article2 >div {max-width:1920px; overflow:hidden; margin-left:auto; margin-right:auto;}
.ds-article2 h2 {font-size:0; display:flex; justify-content:center; align-items:center; gap:2%; margin:5% 0;}
.ds-article2 h2 span:nth-of-type(1) {width:38.075%}
.ds-article2 h2 span:nth-of-type(2) {width:29.275%;}
.ds-article2 h2 img {width:100%; height:auto;}

@media all and (min-width:769px) and (max-width:1024px) { /* TABLET */
	.ds-article2 h2 span:nth-of-type(1) {width:50.86%}
	.ds-article2 h2 span:nth-of-type(2) {width:39.12%;}
}

@media all and (max-width:768px) { /* MOBILE */
	.ds-article2 h2 span:nth-of-type(1) {width:53.7%}
	.ds-article2 h2 span:nth-of-type(2) {width:41.3%;}
}

.ds-article3>div>*:last-child{margin-bottom:8%;}

.ds-spc-03 {box-sizing:border-box; background:#fff; padding:5% 1% 0 1%; margin:5% auto; font-size:0; position:relative;}
.ds-spc-03>div {display:flex; justify-content:center;}
.ds-spc-03-a {align-items:center}
.ds-spc-03-a span{flex:0 0 16.5%;}
.ds-spc-03-a span~span{margin-left:-1%;}
.ds-spc-03 img {width:100%; height:auto;}

.ds-spc-03-b {align-items:flex-end;}
.ds-spc-03-b span {flex-grow:0; flex-shrink:0;}
.ds-spc-03-b span:nth-of-type(1) {flex-basis:15.64%; transition-delay:0.3s}
.ds-spc-03-b span:nth-of-type(2) {flex-basis:18.46%; transition-delay:0.4s}
.ds-spc-03-b span:nth-of-type(3) {flex-basis:11.91%; transition-delay:0.1s}
.ds-spc-03-b span:nth-of-type(4) {flex-basis:12.06%; transition-delay:0.0s}
.ds-spc-03-b span:nth-of-type(5) {flex-basis:14.57%; transition-delay:0.2s}
.ds-spc-03-b span:nth-of-type(6) {flex-basis:17.36%; transition-delay:0.5s}

.ds-spc-03-border,
.ds-spc-03:before,
.ds-spc-03:after{background-size:contain; display:block; content:""; position:absolute; top:0;}

/* .ds-spc-03:before {background-image:url('../../pages/p01/img/p01_peoplestory_a-17.png');background-repeat:repeat-x; height:10px; width:100%;} */

.ds-spc-03-border {background-image:url('../../pages/p01/img/p01_peoplestory_a-17.png'); background-repeat:repeat-x; width:100%; height:10px; left:0;}

.ds-spc-03:before,
.ds-spc-03:after {background-image:url('../../pages/p01/img/p01_peoplestory_a-18.png'); background-repeat:repeat-y; width:10px; height:100%;}

.ds-spc-03:before {left:0;}
.ds-spc-03:after {right:0;}

@media all and (min-width:769px) and (max-width:1024px) { /* TABLET */
	.ds-spc-03-a {flex-wrap:wrap;}
	.ds-spc-03-a span{flex:0 0 33%;}
	
	.ds-spc-03-border {height:9px;}
	.ds-spc-03:before,
	.ds-spc-03:after {width:9px;}
}

@media all and (max-width:768px) { /* MOBILE */
	.ds-spc-03-a {flex-wrap:wrap;}
	.ds-spc-03-a span{flex:0 0 49%;}
	
	.ds-spc-03-border {height:8px;}
	.ds-spc-03:before,
	.ds-spc-03:after {width:8px;}
}

.ds-article3 h2 {margin:8% 0 0 0; position:relative;}
.ds-article3 h2 span {width:25rem; display:inline-block; font-size:0;}
.ds-article3 h2 img {width:100%; height:auto;}
.ds-article3 h2:after {display:block; content:""; width:40%; height:0; padding-bottom:17.43%; position:absolute; right:0; top:0; background-image:url('../../pages/p01/img/p01_peoplestory_a-26.png'); background-size:contain; background-position:top right; background-repeat:no-repeat;}

.ds-article3 h2+h3 {margin-top:0;}

.ds-article3 h3 {font-size:1.2em; margin:5% 0 1em 0}
.ds-article3 h3 * {display:block;}
.ds-article3 h3 strong {font-size:3em; line-height:1.5;}
.ds-article3 h3>p {margin:0; position:relative; display:inline-block; padding:0 0.1em;}
.ds-article3 h3>p:after {content:""; display:block; width:100%; position:absolute; bottom:0; left:0; height:0.9em; background:#dddaeb; z-index:-1;}

.ds-spc-05>div:not(.ds-spc-08) {display:flex; align-items:center; gap:2em; }
.ds-spc-05>div~div {margin-top:1em;}
.ds-spc-05 h4 span {display:inline-block; border-style:solid; border-width:2px; line-height:1; padding:0.5em; white-space:nowrap; border-radius:10%;}
.ds-spc-05 p {margin:0; flex:auto;}

.ds-spc-05a span {color:#dc6790; background-color:#fae8ee;}
.ds-spc-05b span {color:#5b5fa9; background-color:#e7e7f3;}
.ds-spc-05c span {color:#47bab2; background-color:#ebf6f5;}
.ds-spc-05d span {color:#3786c8; background-color:#e7edf8;}
.ds-spc-05e span {color:#f49e27; background-color:#fef2e2;}
.ds-spc-05f span {color:#76be61; background-color:#eef6ea;}

@media all and (min-width:769px) and (max-width:1024px) { /* TABLET */
	.ds-article3 h2 span {width:20rem;}
	.ds-article3 h2:after {width:40%;padding-bottom:17.43%;}
	.ds-article3 h3 strong {font-size:2.5em;}
	.ds-article3 h3>p {display:inline;}
	.ds-article3 h3>p:after {display:none;}
	.ds-article3 h3>p:before {content:""; display:inline-block; width:0.8em; height:1.1em; background:#dddaeb; margin-right:1em; vertical-align:middle;}
	.ds-spc-05>div:not(.ds-spc-08) {gap:1.8em;}
	.ds-spc-05 h4 {margin:0;}
	.ds-spc-05 h4 span {padding:0.4em}
}

@media all and (max-width:768px) { /* MOBILE */
	.ds-article3 h2 span {width:14rem;}
	.ds-article3 h2:after {width:40%;padding-bottom:17.43%;}
	.ds-article3 h3 {font-size:1em;}
	.ds-article3 h3 strong {font-size:2.3em;}
	.ds-article3 h3>p {display:inline;}
	.ds-article3 h3>p:after {display:none;}
	.ds-article3 h3>p:before {content:""; display:inline-block; width:0.8em; height:1.1em; background:#dddaeb; margin-right:1em; vertical-align:middle;}
	.ds-spc-05>div:not(.ds-spc-08) {display:block;}
	.ds-spc-05 h4 {margin:1em 0 0.5em 0;}
	.ds-spc-05 h4 span {padding:0.2em 0.5em}
}


.ds-spc-06 {display:flex; justify-content:center; align-items:stretch; gap:1%;}
.ds-spc-06>* {flex:0 0 45%; width:45%;}
/* .ds-spc-06 .ds-ct-img>div {height:100%; } */
.ds-spc-06>*:nth-of-type(2) { transition-delay:0.3s;}
.ds-spc-06>*:nth-of-type(1) .ds-ct-img>div {text-align:right;}
.ds-spc-06>*:nth-of-type(2) .ds-ct-img>div {text-align:left;}

.ds-spc-07 {float:right; width:30%; margin:0 0 0 3%;}
.ds-spc-07-left{float:left; margin:0 5% 0 0;}
.ds-spc-07~.ds-spc-05:after {content:""; display:block; clear:both; width:100%;}

.ds-spc-08 {font-size:3rem; float:right; margin:0 0 1em 1em; width:25%; line-height:1.4; font-weight:normal; word-break:keep-all}
.ds-spc-07 .ds-spc-08 {float:none; width:100%; margin:0;}
.ds-spc-08 span {display:inline-block; width:10em;}
.ds-spc-08 img {height:auto; width:100%;}
.ds-spc-08 p {margin:0;}

@media all and (min-width:769px) and (max-width:1024px) { /* TABLET */
	.ds-spc-06>* {flex:0 0 49%; width:49%; transition-delay:0!important;}
	.ds-spc-07 {width:25%; margin-top:5%}
	.ds-spc-07-left{margin-top:3%;}
	.ds-spc-08 {font-size:2rem; width:30%;}
	.ds-spc-08 span {width:100%;}
}

@media all and (max-width:768px) { /* MOBILE */
	.ds-spc-06>* {flex:0 0 49%; width:49%; transition-delay:0!important;}
	.ds-spc-07 {width:30%; margin-top:5%}
	.ds-spc-07-left{margin-top:3%;}
	.ds-spc-08 {float:none; font-size:1.6rem; width:80%; margin:8% 0 8% auto;}
	.ds-spc-08 span {width:30%;}
}