/* culture work
=============================================== */

/* 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:#CFFFA3; font-size:150%; line-height:140%; }
.qa-a { position:relative; }
.qa-q::before, .qa-a::before { position:absolute; top:-1.5em; z-index:1; content:""; display:block; width:58px; aspect-ratio:116 / 148; background-position:center center; background-repeat:no-repeat; background-size:cover; }
.qa-q::before { left:-0.5em; background-image:url(../img/work/qa_q.png); }
.qa-a::before { display:none; right:-0.5em; background-image:url(../img/work/qa_a.png); }
.qa-q-hd { width:1080px; margin:auto; }

/* -- Media Queries -- */

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

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

}



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

#qa1 { margin:0 auto 120px auto; }
#qa1 .qa-a { width:1080px; margin:auto; height:22em; }

.qa1-btn { position:absolute; padding:10px 15px; border:#000 2px solid; border-radius:6px; box-shadow:2px 2px 4px rgba(0,0,0,0.4); font-weight:700; cursor:pointer; }
@media (hover: hover) { .qa1-btn:hover { filter:brightness(105%); } }
.qa1-btn:after { content:""; clear:both; display:block; }
.qa1-btn .txt { line-height:120%; }
.qa1-btn .btn { display:inline-block; border-radius:1.0em; padding:0.3em 0.8em; line-height:100%; background-color:#fff; border:#000 1px solid; box-shadow:2px 2px 4px rgba(0,0,0,0.2); }
.qa1-btn .btn::after { content:''; display:inline-block; width:0; height:0; margin-left:0.5em; position:relative; top:-0.04em; border-top: 0.4em solid transparent; border-bottom: 0.4em solid transparent; border-left: 0.6em solid #000; font-size:80%; }
#qa1-item1 { width:16em; top:3em; left:0em; background:var(--qa1-grd-gray); }
#qa1-item1 .btn { float:right; margin-top:-1em; }
#qa1-item2 { width:19em; top:4em; left:19em; background:var(--qa1-grd-pink); padding:0.7em 1.1em; }
#qa1-item2 .txt { font-size:180%; }
#qa1-item2 .btn { float:right; margin-top:-3.0em; }
#qa1-item3 { width:19em; top:0em; left:42em; background:var(--qa1-grd-gray); padding:1.5em 1.1em; }
#qa1-item3 .txt { font-size:140%; }
#qa1-item3 .btn {  margin-top:0.5em; }
#qa1-item4 { width:24em; top:12em; left:0em; background:var(--qa1-grd-blue); padding:1.0em 0.8em; }
#qa1-item4 .txt { font-size:140%; }
#qa1-item4 .btn { float:right; margin-top:-2.6em; }
#qa1-item5 { width:21em; top:11em; left:27em; background:var(--qa1-grd-pink); padding:1.0em 0.8em; }
#qa1-item5 .btn { float:right; margin-top:-1.5em; }
#qa1-item6 { width:19em; top:19em; left:19em; background:var(--qa1-grd-gray); padding:0.7em 1.1em; }
#qa1-item6 .btn { float:right; margin-top:-1.0em; }
#qa1-item7 { width:19em; top:14.3em; left:40em; background:var(--qa1-grd-blue); padding:0.7em 1.1em; }
#qa1-item7 .txt { font-size:180%; }
#qa1-item7 .btn { float:right; margin-top:-3.0em; }


/* -- Media Queries -- */

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

#qa1 { margin-bottom:80px; }
#qa1 .qa-a { margin:0 auto; height:auto; }
#qa1 .qa-a:after { content:""; clear:both; display:block; }

#qa1-btn-area { overflow:hidden; }
.qa1-btn { position:relative; padding:0.3em 0.8em!important;  top:0em!important; left:0em!important; font-size:100%!important; }
#qa1-item1 { margin:0 0 1.0em 0; }
#qa1-item2 { float:right; margin:0 10px -0.5em 0!important; padding:0.5em 0.8em!important; z-index:3; }
#qa1-item3 { clear:both; padding:1.5em 0.8em!important; z-index:2; }
#qa1-item4 { margin:-0.4em 0 2.0em 0; padding:0.8em 0.8em!important; }
#qa1-item5 { margin:0 0 2.0em 2.0em; padding:0.8em 0.8em!important; }
#qa1-item6 { margin:0em 0 0 0; padding:0.8em 0.8em!important; }
#qa1-item7 { float:right; margin:0em 10px 10px 0!important; padding:0.5em 0.8em!important; z-index:3; }

}

@media all and (max-width:1079px) {
#qa1 .qa-a { width:60%; }
}
@media all and (max-width:739px) {
#qa1 .qa-a { width:80%; }
}
@media all and (max-width:549px) {
#qa1 .qa-a { width:100%; }
}

/* ---- modal window ---- */

#modal-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0, 0, 0, 0.8); z-index:1999; display:none; }

.qa1-w { position:fixed; z-index:2000; top:0; left:0; width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; display:none;  overflow-y:auto; }

.qa1-w .box { position:relative; max-width:600px; max-height:90vh; overflow-y:auto; line-height:160%; }

.qa1-w .ttl-q { margin-bottom:1.0em; padding-right:2.0em; font-size:120%; color:#4AFF4A; }
.qa1-w .box-body { background-color:#fff; padding:1.5em; box-sizing:border-box; border-radius:1.5em; }
.qa1-w .ttl-a { margin-bottom:0.7em; font-size:140%; text-align:center; }
.qa1-w .txt { padding-bottom:0.5em; margin-bottom:0.5em; border-bottom:#ddd 1px solid; }
.qa1-w .txt:last-child { padding-bottom:0; margin-bottom:0; border-bottom:none; }

.qa1-w-close { position:fixed; top:15px; right:15px; width:20px; height:20px; cursor:pointer; transition:opacity 0.2s; z-index:10; }
.qa1-w-close::before, .qa1-w-close::after { content:''; position:absolute; top:50%; left:0; width:100%; height:2px; background-color:#fff; }
.qa1-w-close::before { transform:rotate(45deg); }
.qa1-w-close::after { transform:rotate(-45deg); }
.qa1-w-close:hover { opacity:0.7; }

/* modal navi */
.qa1-w-nav { display:flex; justify-content:space-between; align-items:center; width:100%; max-width:300px; margin:20px auto 0 auto; }

.qa1-w-prev, .qa1-w-next { width:60px; height:40px; background-color:#fff; border-radius:50%; cursor:pointer; position:relative; transition:opacity 0.2s; }
.qa1-w-prev:hover, .qa1-w-next:hover { opacity:0.8; }
.qa1-w-counter { color:#fff; font-size:16px; font-family:sans-serif; }
.qa1-w-inner { position:relative; margin:5vh auto; padding:1em; width:100%; max-width:600px; box-sizing:border-box;}
.qa1-w-prev::after, .qa1-w-next::after { content:''; position:absolute; top:50%; left:50%; width:26px; height:26px; background-image:url(../img/work/w_arrow.png); background-size:contain; background-repeat:no-repeat; background-position:center; }
.qa1-w-prev::after { transform: translate(-50%, -50%) rotate(180deg); }
.qa1-w-next::after { transform: translate(-50%, -50%); }



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

#qa2 { margin-bottom:80px; }

#qa2-box { display:flex; align-items:stretch; overflow-x:scroll; }
.qa2-item { width:40em; flex-shrink:0; margin:0 1.0em 1.3em 1.0em; padding:2.0em; box-sizing:border-box; border-radius:20px; border:#000 2px solid; box-shadow:4px 4px 0 #000; background:url(../../img/common/bg_spectre.jpg) center center no-repeat; background-size:100% 100%; }
.qa2-item .ttl { margin-bottom:0.5em; font-size:200%; line-height:120%; text-align:center; }
.qa2-item .txt { padding-bottom:2.5em; line-height:180%; }
.qa2-item .txt:last-child { padding-bottom:0; }

/* -- Media Queries -- */

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

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

}



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

#qa3 { margin-bottom:160px; }

#qa3-box { display:flex; flex-direction:column; padding:0.5em; overflow-x:scroll; background:url(../img/work/bg_hogan.png) left top; background-size:26px; }
.qa3-sbox { width:125em; display:flex; flex-wrap:wrap; align-content:flex-start; }
.qa3-item { display:flex; align-items:center; justify-content:center; min-width:0; box-sizing:border-box; padding:1.0em; margin:0.5em; border-radius:0.5em; background:#fff; border:1px solid #000; flex-grow:1; flex-basis:200px; }
.qa3-item p { margin:0; text-align:center; font-size:0.9em; line-height:1.5; overflow-wrap:break-word; text-align:left; }
.qa3-item p strong { display:block; font-size:150%; }
.qa3-item p { margin:0; text-align:center; font-size:0.9em; line-height:1.5; overflow-wrap:break-word; text-align:left; }
.qa3-item p strong { display:block; font-size:150%; }

.qa3-item1 p { font-family:"dotgothic16"; font-size:140%; }
.qa3-item2 { flex: 0 0 14em; }
.qa3-item2 p { font-size:120%; }
.qa3-item3 { background-color:#D5E2FF; }
.qa3-item3 p { font-size:150%; font-weight:700; }
.qa3-item4 { background-color:#3AE8E8; }
.qa3-item4 p { font-size:140%; font-weight:700; }
.qa3-item5 p { font-size:135%; font-weight:700; }
.qa3-item6 { background-color:#EFEFEF; flex: 0 0 24em; }
.qa3-item7 { background-color:#F6C6FF; flex: 0 0 20em; }
.qa3-item7 p { font-size:140%; font-weight:700; }
.qa3-item8 p { font-size:120%; font-weight:700; }
.qa3-item9 { flex: 0 0 26em; }
.qa3-item10 { flex: 0 0 23em; }
.qa3-item10 p { font-size:130%; font-weight:700; }
.qa3-item11 { background-color:#3AE8E8; }
.qa3-item11 p,
.qa3-item12 p,
.qa3-item13 p { font-weight:700; }
.qa3-item13 { background-color:#EFEFEF; }
.qa3-item14 { font-family:"dotgothic16"; font-size:120%; flex: 0 0 16em; padding:1em 0; }
.qa3-item15 { background-color:#EFEFEF; }
.qa3-item15 p { font-size:150%; }
.qa3-item16 { background-color:#3AE8E8; flex: 0 0 30em; }
.qa3-item16 p { font-size:105%; }
.qa3-item17 { flex: 0 0 17em; }
.qa3-item17 p { font-weight:700; }
.qa3-item18 { flex: 0 0 22em; }
.qa3-item18 p { font-family:"dotgothic16"; font-size:140%; }
.qa3-item19 { background-color:#D5E2FF; flex: 0 0 22em; }
.qa3-item20 { background-color:#F6C6FF; flex: 0 0 15em; }
.qa3-item20 p { font-weight:700; }
.qa3-item21 p strong { font-size:120%; }


/* -- Media Queries -- */

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

#qa3 { margin-bottom:100px; }
#qa3-box { font-size:80%; }

}



/* qa4,5
------------------------------------ */

#qa4-5 { padding-bottom:60px; background:url(../img/work/q5/bg_q45.png) left top; }
#qa4-5-wrap { display:flex; justify-content:space-between; flex-wrap:wrap; width:1080px; margin:auto; }
#qa4, #qa5 { width:48%; margin-top:-40px; font-weight:700; }
#qa4-5 .qa-q { display:block; text-align:center; margin-bottom:60px; }

/* qa4 */
#qa4-btn-area { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; }
.qa4-btn { display:flex; justify-content:center; align-items:center; width:13em; height:6em; margin:0.5em; background-color:#fff; border-radius:50%; border:#000 1px solid; line-height:140%; cursor:pointer; /* hover */ transition:transform 0.2s, opacity 0.2s ease-out; }
@media (hover:hover) {
.qa4-btn:hover { transform:translateY(-4px); background-color:#EAFFD7; box-shadow:2px 2px 4px rgba(0,0,0,0.2); }
.qa4-btn:hover::after { display:block; content:"→"; position:relative; right:-0.5em; }
}

/* qa5 */
#qa5-btn-area { position:relative; display:flex; flex-wrap:wrap; padding-top:4px; background:url(../img/work/q5/bg1.png); border-radius:0 6px 6px 6px; border:#000 1px solid; }
#qa5-btn-area::before,
#qa5-btn-area::after { display:block; content:""; position:absolute; z-index:1; top:-18px; box-sizing:border-box; border:#000 1px solid; border-bottom:none; border-radius:6px 6px 0 0; background-position:center, center; background-repeat:no-repeat, repeat; }
#qa5-btn-area::before { z-index:2; left:-1px; width:60px; height:18px; background-image:url(../img/work/q5/t_love1.png), url(../img/work/q5/bg1.png); background-size:auto 15px, auto; }
#qa5-btn-area::after { left:58px; width:40px; height:17px; background-image:url(../img/work/q5/t_love2.png), url(../img/work/q5/bg2.png); background-size:auto 13px, auto; }
.qa5-btn { position:relative; display:flex; justify-content:center; align-items:center; width:50%; padding:1.4em 2.0em 1.4em 1.5em; box-sizing:border-box; background-color:#fff; border:#000 1px solid; border-radius:6px; line-height:120%; cursor:pointer; }
.qa5-btn::after { position:absolute; top:calc(50% -9px); right:10px; display:block; content:""; width:18px; height:18px; background-image:url(../img/work/q5/arrow_w.png); background-position:center center; background-repeat:no-repeat; background-size:100% auto; }
#qa5-item3,
#qa5-item6 { width:100%; }
@media (hover:hover) {
.qa5-btn:hover { background-color:#EAFFD7; }
.qa5-btn:hover::after { background-image:url(../img/work/q5/arrow_b.png); }
}

/* -- Media Queries -- */

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

#qa4-5-wrap { width:auto; }
#qa4, #qa5 { width:100%; }
#qa5 { margin-top:40px; }
#qa4-5 .qa-a::before { top:-5em; }

}

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

.qa4-btn { width:13em; margin:0.5em -1.0em; font-size:85%; }

}