/* culture dna
=============================================== */

/* qa
------------------------------------ */

.qa-q { position:relative; display:inline-block; margin:0 0 1.0em 0; padding:1.3em 2.0em; box-sizing:border-box; border-radius:1000px; background-color:#FED3FF; font-size:150%; line-height:140%; }
.qa-q::before { position:absolute; top:-1.5em; left:-0.5em; z-index:1; content:""; display:block; width:67px; aspect-ratio:134 / 152; background:url(../img/dna/qa_q.png) center center no-repeat; background-size:cover; }
.qa-a::before { display:none; right:-0.5em; background-image:url(../img/work/qa_a.png); }
.qa-a { width:600px; margin:auto; }
.qa-q-hd { width:768px; margin:auto; }

/* -- Media Queries -- */

@media all and (max-width:767px) {

.qa-q { display:block; margin:0 3% 30px 3%; font-size:110%; text-align:center; }
.qa-q::before { top:-1.2em; left:0; width:46px; }
.qa-q-hd { width:auto; }

}

@media all and (max-width:599px) {

.qa-a { width:100%; }

}


/* qa1
------------------------------------ */

#qa1 { margin-bottom:50px; }
#qa1-list { position:relative; aspect-ratio:385 / 454; }
#qa1-list li {position:absolute; background-position:center center; background-repeat:no-repeat; background-size:cover; text-indent:-9999px; }
#qa1-list li:nth-child(1) { background-image:url(../img/dna/q1/a1.png); width:50.9090909090909%; aspect-ratio:784 / 470; top:0%; left:26.4935064935065%; z-index:1; }
#qa1-list li:nth-child(2) { background-image:url(../img/dna/q1/a2.png); width:50.9090909090909%; aspect-ratio:784 / 402; top:18.7224669603524%; left:0%; z-index:2; }
#qa1-list li:nth-child(3) { background-image:url(../img/dna/q1/a3.png); width:32.7272727272727%; aspect-ratio:504 / 342; top:18.7224669603524%; left:66.7922077922078%; z-index:3; }
#qa1-list li:nth-child(4) { background-image:url(../img/dna/q1/a4.png); width:50.9090909090909%; aspect-ratio:784 / 470; top:35.0220264317181%; left:8.57142857142857%; z-index:1; }
#qa1-list li:nth-child(5) { background-image:url(../img/dna/q1/a5.png); width:38.961038961039%; aspect-ratio:600 / 402; top:32.8193832599119%; left:52.7272727272727%; z-index:2; }
#qa1-list li:nth-child(6) { background-image:url(../img/dna/q1/a6.png); width:38.961038961039%; aspect-ratio:600 / 402; top:55.726872246696%; left:37.9220779220779%; z-index:2; }
#qa1-list li:nth-child(7) { background-image:url(../img/dna/q1/a7.png); width:38.961038961039%; aspect-ratio:600 / 402; top:45.3744493392071%; left:58.961038961039%; z-index:3; }
#qa1-list li:nth-child(8) { background-image:url(../img/dna/q1/a8.png); width:32.7272727272727%; aspect-ratio:504 / 342; top:69.8237885462555%; left:16.1038961038961%; z-index:2; }
#qa1-list li:nth-child(9) { background-image:url(../img/dna/q1/a9.png); width:61.5584415584416%; aspect-ratio:948 / 486; top:73.3480176211454%; left:36.6623376623377%; z-index:1; }



/* qa2
------------------------------------ */

#qa2 { margin-bottom:50px; }
#qa2-list { margin:0 4%; padding-bottom:1px; }
@font-face {
font-family: 'ZenAntique-Regular';
src: url('../../font/ZenAntique-Regular-subset.ttf') format('truetype');
font-weight:normal;
}
#qa2-list li { margin:5% 0; font-family:'ZenAntique-Regular', serif; font-size:220%; }
#qa2-list li i.nm { display:inline-block; font-size:70%; position:relative; top:-0.2em; margin-right:0.2em; font-style:normal; }
#qa2-list li:first-child { color:#F944FF; }

/* -- Media Queries -- */

@media all and (max-width:767px) {

#qa2 .qa-a { width:auto; }
#qa2-list { margin:0 6%; }
#qa2-list li { font-size:5.7vw; }

}


/* qa3
------------------------------------ */

#qa3 { margin-bottom:60px; }
#qa3 .qa-a { width:auto; }
#qa3-box { display:flex; align-items:stretch; overflow-x:scroll; }
.qa3-item { width:30em; flex-shrink:0; margin:0 1.0em 1.3em 1.0em; padding:1.25em; box-sizing:border-box; border-radius:7px; border-width:7px; border-style:solid; background-color:#FFFAFE; }
.qa3-item .ttl { margin-bottom:0.5em; font-size:220%; line-height:120%; text-align:center; font-weight:900; }
.qa3-item .txt { margin-bottom:1.0em; padding-bottom:1.0em; border-bottom:#ddd 1px solid; line-height:180%; }
.qa3-item .txt:last-child { margin-bottom:0; padding-bottom:0; border-bottom:none; }

.qa3-item:nth-child(3n) { border-color:#6B05CA; color:#6B05CA; }
.qa3-item:nth-child(3n+1) { border-color:var(--cl-tbsblue); color:var(--cl-tbsblue); }
.qa3-item:nth-child(3n+2) { border-color:#FB7FFF; color:#FB7FFF; }


/* -- Media Queries -- */

@media all and (max-width:1079px) {

.qa3-item { font-size:80%; width:24em; }

}



/* qa4
------------------------------------ */

#qa4 { margin-bottom:30px; }
#qa4-nm { margin-bottom:0.8em; text-align:right; font-size:90%; }
#qa4 .qa-a { width:768px; padding:20px 0 0 0; }
#qa4-list { aspect-ratio:1502 / 1888; background-position:center center; background-repeat:no-repeat; background-size:cover; text-indent:-9999px; background-image:url(../img/dna/q4/graf_pc.png); }

/* -- Media Queries -- */

@media all and (max-width:767px) {

#qa4 .qa-a { width:auto; padding:2% 5% 0 5%; box-sizing:border-box; }

}

@media all and (max-width:599px) {

#qa4-list { aspect-ratio:1504 / 7288; background-image:url(../img/dna/q4/graf_smp.png); }

}