@charset "utf-8";

.ds-font-spc01 {font-family:UtoBalsamTint;}
.ds-color-spc01 {color:#034cb6;}
.ds-color-spc02 {color:#d8a625;}

.ds-title,
.ds-title>div>div {background-image:url('../../pages/p01/img/p01_culturestory_a-00.jpg');background-position:top center;}

.ds-title {background-size:contain; background-repeat-y:no-repeat; background-repeat-x:repeat;}
.ds-title>div>div {background-size:cover; background-repeat:no-repeat;}

.ds-title>div {
	overflow-y:hidden;
	overflow-x:visible;
	position:relative;
}

.ds-title>div>div {
	height:0;
	padding:0 0 128.525% 0;
	position:relative;
	
}
.ds-title>div>div>div {position:absolute; display:flex; justify-content:center; align-items:flex-start; width:100%; height:100%; left:0; top:0; box-sizing:border-box; padding-top:10%;}

.ds-title h1 {flex:0 0 100%; width:100%;}
.ds-spc-01 {display:block; margin:0 auto; width:45%; padding-left:12%; box-sizing:border-box; position:relative;}
.ds-spc-01 img {display:block; height:auto; transition-duration:3s!important;}
.ds-spc-01-b,
.ds-spc-01-c {position:absolute;}
.ds-spc-01-a {width:100%;}
.ds-spc-01-b {width:35%; top:20%; right:88%;}
.ds-spc-01-c {width:15%; bottom:0%; left:81%;}

@media all and (min-width:769px) and (max-width:1024px) { /* TABLET */
	.ds-title>div>div>div {padding-top:8%;}
	.ds-spc-01 {width:50%;}
}

@media all and (max-width:768px) { /* MOBILE */
	.ds-title>div>div>div {padding-top:5%;}
	.ds-spc-01 {width:63%;padding-left:15%;}
	.ds-spc-01-b {width:30%; right:82%;}
	.ds-spc-01-c {left:81%;}
}

.ds-article>div>*:last-child {margin-bottom:8%;}
.ds-spc-02 {margin:8% 0;}

.ds-article h2 {margin:8% 0 0.5em 0; font-size:1.8em;}
.ds-article h2 small {background:#000; color:#fff; font-size:0.7em; padding:0.5em 5% 0.5em 1em; font-weight:normal; position:relative; line-height:1;box-sizing:border-box; }
.ds-article h2 small:after {content:""; box-sizing:border-box; position:absolute; background:#fff; right:0; top:0; height:100%; width:1em; border-right:0.8em solid transparent; border-bottom:1.1em solid #000; border-top:1.1em solid #000;}

.ds-article h2 div span {display:inline-block; border-color:#034cb6; border-style:solid; box-sizing:border-box; border-width:2px 0; font-weight:normal; line-height:1.5; margin:0.5em 0; padding:0.5em 5% 0.5em 0;}
.ds-article h2 div strong {font-weight:bold;}
.ds-article h2 >span {display:block; font-size:0.7em; font-weight:normal;}

.ds-article h3 {margin:8% 0 1em 0; font-size:1.3em;}
.ds-article h2+h3 {margin-top:0.5em;}

@media all and (min-width:769px) and (max-width:1024px) { /* TABLET */
	.ds-article h2 {font-size:1.75em;}
	.ds-article h2 small:after {border-right:0.8em solid transparent; border-bottom:1.1em solid #000; border-top:1.1em solid #000;}
	
	.ds-article h2 div span {padding-right:3%;}
	.ds-article h3 {font-size:1.2em;}
}

@media all and (max-width:768px) { /* MOBILE */
	.ds-article h2 {font-size:1.6em;}
	.ds-article h2 small:after {border-right:0.8em solid transparent; border-bottom:1.1em solid #000; border-top:1.06em solid #000;}
	
	.ds-article h2 div span {padding-left:0.5em; padding-right:0.5em; width:100%;}
	.ds-article h3 {font-size:1.1em;}
}

@media all and (min-width:769px) { /* PC */
	.ds-spc-left {float:left; margin:0 5% 5% 0; max-width:40%;}
	.ds-spc-left figcaption {text-align:left;}

	.ds-spc-right {float:right; margin:0 0 5% 5%; max-width:40%;}
	.ds-spc-right figcaption {text-align:right;}
	.ds-spc-float-clear:after {display:block; content:""; clear:both; width:100%; height:1px; overflow:hidden;}
}

@media all and (max-width:768px) { /* MOBILE */
	.ds-ct-img .ds-spc-mobile-width70 {max-width:70%;}
	.ds-ct-img figcaption {font-size:0.9em;}
}


.ds-spc-03 {background-image:url('../../pages/p01/img/p01_culturestory_a-06.png'); background-repeat:no-repeat; background-position:bottom 10% right 0; background-size:55% auto; display:flex; justify-content:space-between; align-items:flex-start;}
.ds-spc-03>figure {flex:0 0 40%; margin:0;}

.ds-spc-04 h4 {font-size:2.5em; margin:0;}
.ds-spc-04 h4 span {display:inline-block; border-bottom:3px solid #d8a625; line-height:1.1;font-weight:normal; }
.ds-spc-04 h4 small {font-size:0.4em; display:block; margin:1.5em 0 0 0;}
.ds-spc-04 p {font-size:0.95em;}

.ds-spc-05 {background-image:url('../../pages/p01/img/p01_culturestory_a-12.png'); background-repeat:no-repeat; background-position:bottom 0 right 5%; background-size:auto 80%; }

.ds-spc-06 {display:flex; justify-content:center; align-items:flex-start; gap:5%;}
.ds-spc-06 img {width:100%;}
.ds-spc-06 figure+figure {transition-delay:0.4s;}


@media all and (max-width:768px) { /* MOBILE */
	.ds-spc-03 {background-position:bottom right; background-size:30% auto;}
	
	.ds-spc-04 h4 {font-size:1.8em; margin-top:2em;}
	.ds-spc-04 h4 small {font-size:0.5em;}
	.ds-spc-04 p {font-size:1em;}
	
	.ds-spc-05 {background-position:bottom right; background-size:auto 50%; }
	
	.ds-spc-06 figure {transition-delay:0!important;}
}