/* newemployee2023 find =============================================== */ /* fd-qt -------------------------------- */ .fd-qt #con-body { background:url(../img/find/question/bg.png) top center no-repeat; background-size:100% auto; } @keyframes fade-in { 0% { opacity:0; transform:scale(0.98); filter:blur(1.5rem); } 100% { opacity:1; transform:scale(1.0); filter:blur(0); } } /* ---- Media Queries ---- */ @media all and (max-width: 979px) { .fd-qt #con-body { background:url(../img/find/question/bg_smp.png); top center no-repeat; background-size:100% auto; } } /* fd-qt fd-box -------------------------------- */ #fd-box { /*margin-top:90px;*/ position:relative; width:100%; height:0; padding-top:53.59375%; } #fd-box-inner { position:absolute; left:0; top:0; width:100%; height:100%; } /* ---- Media Queries ---- */ @media all and (max-width: 979px) { #fd-box { /*margin-top:80px;*/ padding-top:180.152671755725%; } } /* fd-qt start -------------------------------- */ #fd-st { position:absolute; z-index:2; left:0; top:0; width:100%; height:100%; } #fd-st-inner { position:relative; width:100%; height:100%; } #fd-st-bg { position:absolute; z-index:2; left:0; top:0; width:100%; height:100%; background: radial-gradient(circle, rgba(255,255,255,0.75) 50%, rgba(255,255,255,0.2) 100%); } #fd-st .obj { position:absolute; } #fd-st .w1 { display:block; position:relative; width:100%; height:0; } #fd-st .w2 { position:absolute; display:block; left:0; top:0; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:cover; text-indent:-9999px; } #fd-st-logo { z-index:5; left:30.625%; top:25.6559766763848%; width:37.5520833333333%; /* for animation */ opacity:0; animation: fade-in 1s 0s forwards; } #fd-st-txt { z-index:4; left:30.625%; top:43.3430515063168%; width:38.8020833333333%; /* for animation */ opacity:0; animation: fade-in 1s 0s forwards; } #fd-st-btn { z-index:3; left:41.9270833333333%; top:58.7949465500486%; width:16.3541666666667%; /* for animation */ opacity:0; animation: fade-in 1s 0s forwards; } #fd-st-btn a { /* hover */ transition:transform 0.2s, opacity 0.2s ease-out; } @media (hover: hover) { #fd-st-btn a:hover { transform:translateY(-4px); opacity:0.5;} } #fd-st-logo .w1 { padding-top:26.5967588179218%; } #fd-st-txt .w1 { padding-top:14.7982062780269%; } #fd-st-btn .w1 { padding-top:41.6135881104034%; } #fd-st-logo .w2 { background-image:url(../img/find/question/start_logo.png); } #fd-st-txt .w2 { background-image:url(../img/find/question/start_txt.png); } #fd-st-btn .w2 { background-image:url(../img/find/question/start_btn.png); } /* ---- Media Queries ---- */ @media all and (max-width: 979px) { #fd-st-logo { left:5.08905852417303%; top:9.92090395480226%; width:89.821882951654%; } #fd-st-txt { left:4.32569974554707%; top:20.4802259887006%; width:90.5852417302799%; } #fd-st-btn { left:25.1908396946565%; top:40.2542372881356%; width:51.6539440203562%; } #fd-st-btn a { /* hover */ transition:transform 0.2s, opacity 0.2s ease-out; } @media (hover: hover) { #fd-st-btn a:hover { transform:translateY(-4px); opacity:0.5;} } #fd-st-txt .w1 { padding-top:32.6454033771107%; } #fd-st-txt .w2 { background-image:url(../img/find/question/start_txt_smp.png); } } /* fd-qt question -------------------------------- */ #fd-q { position:absolute; z-index:1; left:0; top:0; width:100%; height:100%; /* */ display:none; } #fd-q-inner { position:relative; width:100%; height:100%; } #fd-q-logo { position:absolute; z-index:2; left:0; top:12.47035957240039%; width:23.125%; } #fd-q-logo h1 { position:relative; width:100%; height:0; padding-top:26.3513513513513%; } #fd-q-logo h1 span { position:absolute; display:block; left:0; top:0; width:100%; height:100%; background:url(../img/find/question/q-ttl.png) center center no-repeat; background-size:cover; text-indent:-9999px; } #fd-q-win { position:absolute; z-index:1; left:21.40625%; top:22.533527696793%; width:57.1875%; text-align:center; } #fd-q-win .w1 { position:relative; width:100%; height:0; padding-top:50.3642987249545%; } #fd-q-win .w2 { position:absolute; display:block; left:0; top:0; width:100%; height:100%; background-color:rgba(255,255,255,0.8); border-radius:1.0vw; } #fd-q-ttl { position:absolute; top:11.5732368896926%; left:0; width:100%; height:7.95660036166365%; } #fd-q-ttl h2 { width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:auto 100%; text-indent:-9999px; } .q-ttl1 { background-image:url(../img/find/question/q1-ttl.png); } .q-ttl2 { background-image:url(../img/find/question/q2-ttl.png); } .q-ttl3 { background-image:url(../img/find/question/q3-ttl.png); } .q-ttl4 { background-image:url(../img/find/question/q4-ttl.png); } .q-ttl5 { background-image:url(../img/find/question/q5-ttl.png); } .q-ttl6 { background-image:url(../img/find/question/q6-ttl.png); } #fd-q-q { position:absolute; top:26.0397830018083%; left:0; width:100%; height:9.40325497287523%; } #fd-q-q > p { width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:auto 100%; text-indent:-9999px; } .q1 { background-image:url(../img/find/question/q1-q.png); } .q2 { background-image:url(../img/find/question/q2-q.png); } .q3 { background-image:url(../img/find/question/q3-q.png); } .q4 { background-image:url(../img/find/question/q4-q.png); } .q5 { background-image:url(../img/find/question/q5-q.png); } .q6 { background-image:url(../img/find/question/q6-q.png); } #fd-q-button { position:absolute; top:43.3996383363472%; left:0; width:100%; height:14.2857142857143%; } #fd-q-button > button { display:block; width:46%; height:100%; margin:0 auto 3% auto; padding:0; border:0; border-radius:1000px; background-position:center center; background-repeat:no-repeat; background-size:auto 44.3%; text-indent:-9999px; cursor: pointer; } @media (hover: hover) { #fd-q-button > button:hover { background-color:#FF00FF; } } .a1-1 { background-image:url(../img/find/question/q1-a1.png); background-color:#969DAD; } .a1-2 { background-image:url(../img/find/question/q1-a2.png); background-color:#969DAD; } .a2-1 { background-image:url(../img/find/question/q2-a1.png); background-color:#969DAD; } .a2-2 { background-image:url(../img/find/question/q2-a2.png); background-color:#969DAD; } .a3-1 { background-image:url(../img/find/question/q3-a1.png); background-color:#969DAD; } .a3-2 { background-image:url(../img/find/question/q3-a2.png); background-color:#969DAD; } .a4-1 { background-image:url(../img/find/question/q4-a1.png); background-color:#969DAD; } .a4-2 { background-image:url(../img/find/question/q4-a2.png); background-color:#969DAD; } .a5-1 { background-image:url(../img/find/question/q5-a1.png); background-color:#969DAD; } .a5-2 { background-image:url(../img/find/question/q5-a2.png); background-color:#969DAD; } .a6-1 { background-image:url(../img/find/question/q6-a1.png); background-color:#969DAD; } .a6-2 { background-image:url(../img/find/question/q6-a2.png); background-color:#969DAD; } #fd-q-dot { position:absolute; top:87.1609403254973%; left:0; width:100%; height:4%; } #fd-q-dot li { display:inline-block; margin:0 0.5em; color:#969DAD; font-size:13px; cursor:default; } #fd-q-dot li.active { color:#FF00FF; } /* ---- Media Queries ---- */ @media all and (max-width: 979px) { #fd-q-logo { left:0; top:9.824858757%; width:50.89%; } #fd-q-win { left:4.58%; top:12.4858757%; width:90.7839697656%; } #fd-q-win .w1 { padding-top:93.557422969%; } #fd-q-ttl { top:15.2694610778443%; height:6.58682634730539%; } #fd-q-q { top:26.3473053892216%; height:7.18562874251497%; } #fd-q-button { top:42.5149700598802%; height:11.6766467065868%; } #fd-q-button > button { width:68%; margin:0 auto 5.38922155688623% auto; } #fd-q-dot { top:82.3353293413174%; height:4%; } #fd-q-dot li { font-size:2.5vw; } } /* fd-list -------------------------------- */ .fd-list #mainttl { width:100%; padding:100px 0 60px 0; background:url(../img/find/list/hd_bg.png) center top repeat-x; background-size:auto 100%; text-align:center; } .fd-list #mainttl h1 { display:block; width:771px; height:45px; margin:auto; background:url(../img/find/list/hd_t.png) center center no-repeat; background-size:cover; text-indent:-9999px; } #sort { width:930px; margin:60px auto 40px auto; } #sort-ttl { padding-bottom:1.0em; color:#606570; font-weight:bold; } #sort-btn { /* for space */ font-size:0; } #sort-btn label { display:inline-block; width:18.4%; margin:0 1.9% 1.9% 0; padding:0.8em 0; box-sizing:border-box; text-align:center; font-weight:bold; color:#D2D7E3; border:#D2D7E3 1px solid; border-radius:1000px; /* for space */ font-size:1rem; } @media (hover: hover) { #sort-btn label:hover { color:#fff; border:none; background-color:#FF00FF; cursor:pointer; } } #sort-btn label.current { color:#fff; border:none; background-color:#FF00FF; } #sort-btn label:nth-child(5) { margin:0 0 1.9% 0; } #sort-btn label input { display:none; } #fd-list-tmb { width:980px; margin:0 auto 30px auto; /* for space */ font-size:0; } #fd-list-tmb li { display:inline-block; width:23.5%; margin:0 1.9% 1.9% 0; vertical-align:top; /* for space */ font-size:1rem; } #fd-list-tmb li:nth-child(4n) { margin-right:0; } #fd-list-tmb li .w1 { position:relative; width:100%; height:0; padding-top:100%; } #fd-list-tmb li .w2 { position:absolute; display:block; left:0; top:0; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:cover; text-indent:-9999px; /* hover */ transition:transform 0.2s ease-out; } @media (hover: hover) { #fd-list-tmb li .w1:hover .w2 { transform: scale(1.05); } } #fd-list-tmb li.focus .w2::before { position:absolute; display:block; content:""; z-index:2; width:45%; height:45%; background:url(../img/find/list/focus.png) left top no-repeat; background-size:cover; } #fd-list-oga .w2 { background-image:url(../img/find/list/tmb_oga.jpg); } #fd-list-yoko .w2 { background-image:url(../img/find/list/tmb_yoko.jpg); } #fd-list-rin .w2 { background-image:url(../img/find/list/tmb_rin.jpg); } #fd-list-take .w2 { background-image:url(../img/find/list/tmb_take.jpg); } #fd-list-hei .w2 { background-image:url(../img/find/list/tmb_hei.jpg); } #fd-list-sae .w2 { background-image:url(../img/find/list/tmb_sae.jpg); } #fd-list-aya .w2 { background-image:url(../img/find/list/tmb_aya.jpg); } #fd-list-nabe .w2 { background-image:url(../img/find/list/tmb_nabe.jpg); } #fd-list-ibu .w2 { background-image:url(../img/find/list/tmb_ibu.jpg); } #fd-list-kame .w2 { background-image:url(../img/find/list/tmb_kame.jpg); } #fd-list-nana .w2 { background-image:url(../img/find/list/tmb_nana.jpg); } #fd-list-kyoko .w2 { background-image:url(../img/find/list/tmb_kyoko.jpg); } #fd-list-chris .w2 { background-image:url(../img/find/list/tmb_chris.jpg); } #fd-list-kanta .w2 { background-image:url(../img/find/list/tmb_kanta.jpg); } #fd-list-kuro .w2 { background-image:url(../img/find/list/tmb_kuro.jpg); } #fd-list-tatsuhiko .w2 { background-image:url(../img/find/list/tmb_tatsuhiko.jpg); } .fd-btn-area { text-align:center; margin-bottom:30px; font-size:120%; } .fd-btn { margin:auto; } .fd-btn .btnin { position:relative; display:block; width:100%; height:100%; border-radius:1000px; padding:1.0em 0; box-sizing:border-box; line-height:120%; color:#fff; font-weight:bold; text-decoration:none; } @media (hover: hover) { .fd-btn .btnin:hover { opacity:0.7; } } .fd-btn .btnin::before { position:absolute; top:50%; content:""; display:inline-block; margin:-0.45em 0 0 0; width:0.9em; height:0.9em; background:url(../img/find/list/arrow.png) center center no-repeat; background-size:auto 100%; } #fd-btn-list-top .fd-btn { width:18em; } #fd-btn-list-top .btnin { background-color:#D2D7E3; padding-left:1.0em; } #fd-btn-list-top .btnin::before { left:1.5em; transform:rotate(180deg); } #fd-btn-list-people .fd-btn { width:18em; } #fd-btn-list-people .btnin { background-color:#5A88FF; padding-right:1.0em; } #fd-btn-list-people .btnin::before { right:1.5em; } /* ---- Media Queries ---- */ @media all and (max-width: 979px) { .fd-list #mainttl { padding:70px 0 30px 0; } .fd-list #mainttl h1 { width:343px; height:20px; } #sort { width:92%; margin:5% 4%; } #sort-ttl { font-size:90%; } #sort-btn label { width:31.5%; margin:0 2.4% 2.4% 0; font-size:0.85rem; } #sort-btn label:nth-child(5) { margin:0 2.4% 2.4% 0; } #sort-btn label:nth-child(3n) { margin:0 0 2.4% 0; } #fd-list-tmb { width:92%; margin:0 4% 4% 4%; } #fd-list-tmb li { width:48%; margin:0 3.9% 3.9% 0; } #fd-list-tmb li:nth-child(2n) { margin-right:0; } .fd-btn-area { margin-bottom:20px; font-size:100%; } } @media all and (max-width: 349px) { .fd-list #mainttl h1 { width:300px; height:18px; } .fd-btn-area { margin-bottom:15px; font-size:90%; } } /* fd-dtl -------------------------------- */ #rs-header { width:100%; padding:47px 0 54px 0; text-align:center; /* for 2025 new */ padding-top:120px; } #rs-header p { display:block; width:601px; height:49px; margin:auto; background:url(../img/find/result/ttl.png) center center no-repeat; background-size:cover; text-indent:-9999px; } @keyframes hero-fade { 0% { opacity:0; filter: blur(1.5rem); } 100% { opacity:1; filter: blur(0); } } #rs-hero { position:relative; width:100%; height:0; padding-top:42.86458333%; /* for animation */ opacity:0; animation: hero-fade 1.0s forwards; } #rs-hero p { position:absolute; display:block; left:0; top:0; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:cover; text-indent:-9999px; } .rs-aya #rs-hero p { background-image:url(../img/find/result/p_aya_pc.jpg); } .rs-chris #rs-hero p { background-image:url(../img/find/result/p_chris_pc.jpg); } .rs-hei #rs-hero p { background-image:url(../img/find/result/p_hei_pc.jpg); } .rs-ibu #rs-hero p { background-image:url(../img/find/result/p_ibu_pc.jpg); } .rs-kame #rs-hero p { background-image:url(../img/find/result/p_kame_pc.jpg); } .rs-kanta #rs-hero p { background-image:url(../img/find/result/p_kanta_pc.jpg); } .rs-kuro #rs-hero p { background-image:url(../img/find/result/p_kuro_pc.jpg); } .rs-kyoko #rs-hero p { background-image:url(../img/find/result/p_kyoko_pc.jpg); } .rs-nabe #rs-hero p { background-image:url(../img/find/result/p_nabe_pc.jpg); } .rs-nana #rs-hero p { background-image:url(../img/find/result/p_nana_pc.jpg); } .rs-oga #rs-hero p { background-image:url(../img/find/result/p_oga_pc.jpg); } .rs-rin #rs-hero p { background-image:url(../img/find/result/p_rin_pc.jpg); } .rs-sae #rs-hero p { background-image:url(../img/find/result/p_sae_pc.jpg); } .rs-take #rs-hero p { background-image:url(../img/find/result/p_take_pc.jpg); } .rs-tatsuhiko #rs-hero p { background-image:url(../img/find/result/p_tatsuhiko_pc.jpg); } .rs-yoko #rs-hero p { background-image:url(../img/find/result/p_yoko_pc.jpg); } #more { position:relative; z-index:2; top:-52px; } #more-t { display:block; width:389px; height:21px; margin:0 auto 30px auto; background-position:center center; background-repeat:no-repeat; background-size:100% auto; text-indent:-9999px; } .more-txt-m #more-t { background-image:url(../img/find/result/more_him.png); } .more-txt-f #more-t { background-image:url(../img/find/result/more_her.png); } #more-a1, #more-a2, #more-a3 { display:block; width:47px; height:17px; margin:0 auto 15px auto; background:url(../img/find/result/more_arrow.png) center center no-repeat; background-size:cover; text-indent:-9999px; } #rs-main:after {content:"";clear:both;display:block;} #rs-main-l { float:left; width:30%; } #rs-name-box { opacity:0; transition: opacity 0.5s; width:30%; height:100%; display:flex; justify-content:center; align-items:center; } #rs-name-box.fixed { position:fixed; top:0; left:5%; z-index:10; } #rs-name { position:relative; width:100%; height:0; padding-top:21%; margin-bottom:2.0em; } #rs-name h1 { position:absolute; display:block; left:0; top:0; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:cover; text-indent:-9999px; } .rs-aya #rs-name h1 { background-image:url(../img/find/result/name_aya.png); } .rs-chris #rs-name h1 { background-image:url(../img/find/result/name_chris.png); } .rs-hei #rs-name h1 { background-image:url(../img/find/result/name_hei.png); } .rs-ibu #rs-name h1 { background-image:url(../img/find/result/name_ibu.png); } .rs-kame #rs-name h1 { background-image:url(../img/find/result/name_kame.png); } .rs-kanta #rs-name h1 { background-image:url(../img/find/result/name_kanta.png); } .rs-kuro #rs-name h1 { background-image:url(../img/find/result/name_kuro.png); } .rs-kyoko #rs-name h1 { background-image:url(../img/find/result/name_kyoko.png); } .rs-nabe #rs-name h1 { background-image:url(../img/find/result/name_nabe.png); } .rs-nana #rs-name h1 { background-image:url(../img/find/result/name_nana.png); } .rs-oga #rs-name h1 { background-image:url(../img/find/result/name_oga.png); } .rs-rin #rs-name h1 { background-image:url(../img/find/result/name_rin.png); } .rs-sae #rs-name h1 { background-image:url(../img/find/result/name_sae.png); } .rs-take #rs-name h1 { background-image:url(../img/find/result/name_take.png); } .rs-tatsuhiko #rs-name h1 { background-image:url(../img/find/result/name_tatsuhiko.png); } .rs-yoko #rs-name h1 { background-image:url(../img/find/result/name_yoko.png); } #rs-department { margin-bottom:2.0em; padding:0.5em; box-sizing:border-box; border-radius:1000px; background-color:#D9D9D9; color:#000; font-weight:bold; text-align:center; } #rs-hash { /* for space */ font-size:0; } #rs-hash li { display:inline-block; margin:0 4.9% 0.7em 0; font-weight:bold; vertical-align:top; line-height:160%; /* for space */ font-size:1.1rem; } #rs-hash li .marker { background:linear-gradient(transparent 19%, #00FFFF 20%, #00FFFF 80%, transparent 81%); display:inline; } #rs-main-r { float:right; width:50%; margin-right:10%; line-height:180%; } #rs-qa dt { margin-bottom:1.0em; font-size:120%; font-weight:bold; } #rs-qa dd { margin-bottom:3.0em; } .rs-qa-q { display:inline-block; margin:0 10px 0 0; vertical-align:bottom; width:100px; height:29px; background-position:center center; background-repeat:no-repeat; background-size:100% auto; text-indent:-9999px; } .rs-qa-q1 { background-image:url(../img/find/result/q_ttl1.png); } .rs-qa-q2 { background-image:url(../img/find/result/q_ttl2.png); } .rs-qa-q3 { background-image:url(../img/find/result/q_ttl3.png); } .rs-qa-q4 { background-image:url(../img/find/result/q_ttl4.png); } .rs-qa-q5 { background-image:url(../img/find/result/q_ttl5.png); } .rs-qa-q6 { background-image:url(../img/find/result/q_ttl6.png); } .rs-qa-q7 { background-image:url(../img/find/result/q_ttl7.png); } #fd-btn-list-rs-people .fd-btn { width:22em; } #fd-btn-list-rs-people .btnin { background-color:#969DAD; padding-right:1.0em; } #fd-btn-list-rs-people .btnin::before { right:1.5em; } #fd-btn-list-retry { padding-right:4em; } #fd-btn-list-retry .fd-btn { width:18em; } #fd-btn-list-retry .btnin { background-color:#D2D7E3; padding-left:1.0em; } #fd-btn-list-retry .btnin::before{ left:1.5em; transform:rotate(180deg); } /* ---- Media Queries ---- */ @media all and (max-width: 979px) { #rs-header { padding:21px 0 22px 0; /* for 2025 new */ padding-top:80px; } #rs-header p { width:331px; height:27px; } #rs-hero { padding-top:128.555%; } .rs-aya #rs-hero p { background-image:url(../img/find/result/p_aya_sp.jpg); } .rs-chris #rs-hero p { background-image:url(../img/find/result/p_chris_sp.jpg); } .rs-hei #rs-hero p { background-image:url(../img/find/result/p_hei_sp.jpg); } .rs-ibu #rs-hero p { background-image:url(../img/find/result/p_ibu_sp.jpg); } .rs-kame #rs-hero p { background-image:url(../img/find/result/p_kame_sp.jpg); } .rs-kanta #rs-hero p { background-image:url(../img/find/result/p_kanta_sp.jpg); } .rs-kuro #rs-hero p { background-image:url(../img/find/result/p_kuro_sp.jpg); } .rs-kyoko #rs-hero p { background-image:url(../img/find/result/p_kyoko_sp.jpg); } .rs-nabe #rs-hero p { background-image:url(../img/find/result/p_nabe_sp.jpg); } .rs-nana #rs-hero p { background-image:url(../img/find/result/p_nana_sp.jpg); } .rs-oga #rs-hero p { background-image:url(../img/find/result/p_oga_sp.jpg); } .rs-rin #rs-hero p { background-image:url(../img/find/result/p_rin_sp.jpg); } .rs-sae #rs-hero p { background-image:url(../img/find/result/p_sae_sp.jpg); } .rs-take #rs-hero p { background-image:url(../img/find/result/p_take_sp.jpg); } .rs-tatsuhiko #rs-hero p { background-image:url(../img/find/result/p_tatsuhiko_sp.jpg); } .rs-yoko #rs-hero p { background-image:url(../img/find/result/p_yoko_sp.jpg); } #more { position:relative; top:auto; margin:30px 0 20px 0; } #more-t { width:288px; height:15px; margin:0 auto 20px auto; } #more-a1, #more-a2 { width:30px; height:11px; margin:0 auto 10px auto; } #more-a3 { display:none; } #rs-main-l { float:none; width:90%; margin:0 5% 40px 5%; } #rs-name-box { opacity:1; position:static; top:auto; left:auto; width:100%; height:auto; display:block; } #rs-name { display:none; } #rs-department { margin-bottom:1.0em; } #rs-hash li { margin:0 4.9% 0.4em 0;/* for space */ font-size:1rem; } #rs-main-r { float:none; width:90%; margin:0 5%; font-size:90%; } .rs-qa-q { display:block; margin:0 auto 10px auto; width:80px; height:23px; } #rs-qa dt { text-align:center; } } @media all and (max-width: 349px) { #rs-header p { width:300px; height:24px; } } /*eof*/