#area20250411{ --e20250411-main-color:#113D97; --e20250411-navi-active:yellow; --e20250411-navi-color:#113D97; --e20250411-navi-color-bd:#0F2674; --e20250411-navi-color-active:#032a78; --e20250411-navi-color-active-bd:#0F2674; } /* ! ---------- リセット等 ---------- ---------- ---------- ---------- */ ._sp { display: none;} .w100p{width: 100%;} @media only screen and (max-width: 768px){ ._pc { display: none; } ._sp { display: block; } } /* メイン */ #area20250411 { width: 1200px; margin: 0 auto 40px auto; font-size:14px;} #area20250411 p, #area20250411 ul, #area20250411 li, #area20250411 div, #area20250411 a { margin: 0; padding: 0; font-size:100%; line-height: inherit; box-sizing: border-box; text-decoration: none;} #area20250411 ul { list-style: none;} #area20250411 table { border-collapse: collapse; border-spacing: 0;} #area20250411 th, #area20250411 td { text-align:left; font-weight: normal;box-sizing: border-box;} /* ! ---------- 共通要素 ---------- ---------- ---------- ---------- */ /* パンくず調整 */ .locationArea a { color: #0077dd; text-decoration:none;} .locationArea a:hover {text-decoration: underline;} /* シェア */ #area20250411 .social { margin: 10px 0 0 0; text-align: right;} #area20250411 .social .social_tw { display: inline-block; width:80px; height:20px; background:url(/contents/nikki/event/20250411/images/social_tw.png) left top no-repeat; text-indent: -9999px; vertical-align: bottom;} #area20250411 .social .social_tw:hover { background-image:url(/contents/nikki/event/20250411/images/social_tw_ov.png);} #area20250411 .social .line-it-button{ vertical-align: bottom; } /* ナビ */ #area20250411 .navi { margin: 10px 0 0 -5px; display: flex;justify-content: space-between;gap:3px;} #area20250411 .navi li {position: relative;display: block;flex:1;background-color: var(--e20250411-navi-color);border-bottom: 2px solid var(--e20250411-navi-color-bd);border-radius: 5px;} #area20250411 .navi li a{color: #fff;height:50px;font-weight: bold;display: flex;justify-content: center;align-items: center;} #area20250411 .navi li a{position:relative: 1.4;padding: 0 20px 0 2px;text-align: center;} #area20250411 .navi li a:before{position:absolute;top:50%;right:10px;display:block;content:'';height:5px;width:5px;border:2px solid #fff;border-left-width:0;border-top-width:0;transform:translate(0,-50%) rotate(-45deg);} #area20250411 .navi li:hover, #area20250411 .navi li.current {background-color: var(--e20250411-navi-color-active);border-bottom: 2px solid var(--e20250411-navi-color-active-bd);} /* リード */ #area20250411 .read { margin: 20px 0 0 0; line-height: 1.6; border:2px solid #e0e0e0; font-size:14px; padding: 15px;} #area20250411 .research { margin: 20px 0 0 0; line-height: 1.6; border:2px solid #003fba; background: #ebf1fd; font-size:14px; padding: 15px;} /* タイトル */ #area20250411 .rankTitle{margin: 20px 0 0 0;background: url(/contents/nikki/event/20250411/images/t_ranking.png) 15px 2px no-repeat;line-height: 1.4;padding: 0 0 8px 60px;font-size:24px;border-bottom: 4px solid var(--e20250411-main-color); color: #555555;} #area20250411 .rankTitleLead{margin-top:15px;font-size:14px;font-weight:500;line-height:1.59;color:#606060;} #area20250411 .rankTitleQuestion{margin: 20px 0 0 0;background: url(/contents/nikki/event/20250411/images/t_question.png) 15px 2px no-repeat;line-height: 1.4;padding: 0 0 8px 60px;font-size:24px;border-bottom: 4px solid var(--e20250411-main-color); color: #555555;} /* SP */ @media only screen and (max-width: 768px){ #area20250411 { width: 100%;} #area20250411 .content { margin: 0 5px 0 5px;} #area20250411 .navi { margin: 5px 0 0 0;} #area20250411 .navi li { } #area20250411 .navi li a{height: 70px; font-size:11px;} #area20250411 .read { margin: 10px 0 0 0;font-size:12px; } #area20250411 .rankTitle {margin: 10px 0 0 0;height: auto;background: url(/contents/nikki/event/20250411/images/sp_t_ranking.png) 5px 10px no-repeat;background-size: 30px 30px;line-height: 1.2;padding: 16px 5px 16px 42px;font-size: 16px;border-bottom: 4px solid var(--e20250411-main-color);} #area20250411 .rankTitleQuestion {margin: 10px 0 0 0;height: auto;background: url(/contents/nikki/event/20250411/images/t_question.png) 5px 10px no-repeat;background-size: 30px 30px;line-height: 1.2;padding: 16px 5px 16px 42px;font-size: 16px;border-bottom: 4px solid var(--e20250411-main-color);} } /* ! ---------- パーツ要素 ---------- ---------- ---------- ---------- */ /* カラム */ #area20250411 .rankList {margin:20px 0 0 0; } #area20250411 .cols2 { } #area20250411 .cols2:after { display: block; clear: both; height: 0; content: ''; } #area20250411 .cols2 .col:nth-child(1){width: 590px;float: left;} #area20250411 .cols2 .col:nth-child(2){width: 590px;float: right;} #area20250411 .cols3 { } #area20250411 .cols3:after { display: block; clear: both; height: 0; content: ''; } #area20250411 .cols3 .col:nth-child(1){width: 386px;float: left;margin: 0 20px 0 0;} #area20250411 .cols3 .col:nth-child(2){width: 386px;float: left;} #area20250411 .cols3 .col:nth-child(3){width: 386px;float: right;} #area20250411 .mt20{margin-top:20px;} /* トップ3 */ #area20250411 ._pc .rank_top {display: block;margin: 0 0 10px 0;position: relative;width: 590px;height: 110px;} #area20250411 ._pc .rank_top-1 {background: url(/contents/nikki/event/20250411/images/btn_123_bg_1b.png) left top no-repeat;} #area20250411 ._pc .rank_top-2 {background: url(/contents/nikki/event/20250411/images/btn_123_bg_2b.png) left top no-repeat;} #area20250411 ._pc .rank_top-3 {background: url(/contents/nikki/event/20250411/images/btn_123_bg_3b.png) left top no-repeat;} #area20250411 ._pc .rank_top .no {position: absolute;top: 50%;left: 0px;width: 55px;text-align: center;color: #fff;line-height: 0;font-size: 12px;} #area20250411 ._pc .rank_top .no b {font-size: 30px;font-weight: bold;} #area20250411 ._pc .rank_top .name {position: absolute;top: 50%;left: 70px;/*color: #004fe1;*/line-height: 0;font-weight: bold;font-size: 20px;} /* #area20250411 ._pc .rank_top:hover .name{text-decoration: underline;} */ #area20250411 ._pc .rank_top .preb { position: absolute; bottom: 3px; right: 5px; width: 110px; text-align: center; color: #fff; font-size:11px; letter-spacing:2px;} #area20250411 ._pc .rank_top .preb b {font-size:14px;} #area20250411 ._sp .rank_top {display: block;margin: 5px 0 5px 0;position: relative;width: 100%;height: auto;padding: 17px 25px 17px 52px;} #area20250411 ._sp .rank_top-1 {border: 2px solid #bc8e00;} #area20250411 ._sp .rank_top-2 {border: 2px solid #808080;} #area20250411 ._sp .rank_top-3 {border: 2px solid #846c5e;} #area20250411 ._sp .rank_top:before {position: absolute;top: 50%;right: 7px;content:'';display:block;height:7px;width:7px;margin-top:-4px;transform:translate(-5px,-1px) rotate(-45deg);} #area20250411 ._sp .rank_top-1:before {border:2px solid #bc8e00;border-left-width:0;border-top-width:0;} #area20250411 ._sp .rank_top-2:before {border:2px solid #808080;border-left-width:0;border-top-width:0;} #area20250411 ._sp .rank_top-3:before {border:2px solid #846c5e;border-left-width:0;border-top-width:0;} #area20250411 ._sp .rank_top .no {position: absolute;top: 50%;left: 0;margin-top: -20px;width: 45px;height: 40px;background: url(/contents/nikki/event/20250411/images/sp_btn_123_1.png) left center no-repeat;background-size: 45px 40px;text-indent: -9999px;} #area20250411 ._sp .rank_top-1 .no { background-image: url(/contents/nikki/event/20250411/images/sp_btn_123_1.png);} #area20250411 ._sp .rank_top-2 .no { background-image: url(/contents/nikki/event/20250411/images/sp_btn_123_2.png);} #area20250411 ._sp .rank_top-3 .no { background-image: url(/contents/nikki/event/20250411/images/sp_btn_123_3.png);} #area20250411 ._sp .rank_top .name { /*color: #004fe1; */line-height: 1.2; font-weight: bold; font-size:15px;} #area20250411 ._sp .rank_top .preb { position: absolute; bottom: -4px; right: 1px; width: 75px; height: 18px; text-align: center; color: #fff; font-size:8px; padding: 5px 0 0 0; line-height: 0.8; background:url(/contents/nikki/event/20250411/images/sp_btn_123_prev.png) left top no-repeat; background-size:75px 18px;} #area20250411 ._sp .rank_top .preb b { font-size:11px;} #area20250411 ._sp .rank_top-1 .preb { background-image:url(/contents/nikki/event/20250411/images/sp_btn_123_prev1.png);} #area20250411 ._sp .rank_top-2 .preb { background-image:url(/contents/nikki/event/20250411/images/sp_btn_123_prev2.png);} #area20250411 ._sp .rank_top-3 .preb { background-image:url(/contents/nikki/event/20250411/images/sp_btn_123_prev3.png);} /* TOP 5 */ #area20250411 .rankListTop5s {} #area20250411 .rankListTop5s .cols { margin: 0 0 0 -20px;} #area20250411 .rankListTop5s .cols:after { display: block; clear: both; height: 0; content: ''; } #area20250411 .rankListTop5s .col { width: 386px; float: left; margin: 0 0 0 20px;} /* TOP 10 */ #area20250411 .rankListTop10s .row{margin-top: 40px;} #area20250411 ._pc .rankListTop10s .rank_top-1 {background: url(/contents/nikki/event/20250411/images/btn_123_bg_1.png) left top no-repeat;} #area20250411 ._pc .rankListTop10s .rank_top-2 {background: url(/contents/nikki/event/20250411/images/btn_123_bg_2.png) left top no-repeat;} #area20250411 ._pc .rankListTop10s .rank_top-3 {background: url(/contents/nikki/event/20250411/images/btn_123_bg_3.png) left top no-repeat;} /* rankQualityList */ #area20250411 .rankQualityList{} #area20250411 .rankQualityList .cols{display:flex;gap:20px;flex-direction:column;} #area20250411 .rankQualityList .col{} /* QuestionList */ #area20250411 .rankQuestionList {} #area20250411 .rankQuestionList .cols { display: flex; justify-content: space-between; flex-wrap: wrap; gap:10px 0;} #area20250411 .rankQuestionList .col { width: 590px; } /* SP */ @media only screen and (max-width: 768px){ #area20250411 .rankList {margin:10px 0 0 0; } #area20250411 .cols2 .col:nth-child(1){width: auto;float: none;} #area20250411 .cols2 .col:nth-child(2){width: auto;float: none;} #area20250411 .rankListTop5s .cols { margin: 0;} #area20250411 .rankListTop5s .col { width: 100%; float: none; margin: 0;} } #area20250411 .sp_rank_open { position: relative; cursor: pointer;} #area20250411 .sp_rank_open:after { content:""; position: absolute; background:url(/contents/nikki/event/20250411/images/sp_icon_open.png) left top no-repeat; background-size:27px 27px; top: 13px; right: 0px; width: 27px; height: 27px;} #area20250411 .sp_rank_open.open:after { background-image:url(/contents/nikki/event/20250411/images/sp_icon_close.png);} #area20250411 .initHide {display: none;} /* Util */ #area20250411 .js-common-height-item{display:flex;justify-content:flex-end;flex-direction:column;} #area20250411 .items{display:flex;gap:20px;flex-direction:column;} @media only screen and (max-width: 768px){ #area20250411 .items{gap:10px;} } /* ! ---------- 表組み要素 ---------- ---------- ---------- ---------- */ #area20250411 .rankTableA { width: 100%; border-left: 1px solid #e1e1e1; border-bottom: 1px solid #e1e1e1;} #area20250411 .rankTableA th { background: var(--e20250411-main-color); color: #fff; padding:14px 5px; text-align: center; font-weight: normal;} #area20250411 .rankTableA.rankTableA-narrrow th { padding:2px 5px;} #area20250411 .rankTableA td { border-bottom: 1px solid #e1e1e1; border-right: 1px solid #e1e1e1; vertical-align: middle; padding:8px 12px;} #area20250411 .rankTableA tr:nth-child(odd) td { background: #f3f3f3;} #area20250411 .rankTableA td a { color: #004fe1; text-decoration: none;} #area20250411 .rankTableA td a:hover { text-decoration: underline;} #area20250411 .rankTableA td.rank { font-size:20px; font-weight: bold; color: #066ada; text-align: center; width: 80px;} #area20250411 .rankTableA td.rank_pre { text-align: center; width: 80px;} #area20250411 .rankTableA th { white-space: nowrap; font-weight: bold; } #area20250411 ._sp .rankTableA {margin-top: 10px;} #area20250411 ._sp .rankTableA td.rank { text-align: center; width: 40px;} #area20250411 ._sp .rankTableA td.rank_pre { text-align: center; width: 40px;} #area20250411 .rankTableB { width: 100%; border-left: 1px solid #e1e1e1; border-bottom: 1px solid #e1e1e1;} #area20250411 .rankTableB th { background: var(--e20250411-main-color); color: #fff; padding:14px 5px; text-align: center; font-weight: normal;} #area20250411 .rankTableB td { border-bottom: 1px solid #e1e1e1; border-right: 1px solid #e1e1e1; vertical-align: middle; padding:6px;} #area20250411 .rankTableB tr:nth-child(odd) td { background: #f3f3f3;} #area20250411 .rankTableB td a { color: #004fe1; text-decoration: none;} #area20250411 .rankTableB td a:hover { text-decoration: underline;} #area20250411 .rankTableB td.rank { width: 80px; font-size:16px; font-weight: bold; color: #3a76ef; text-align: center;} #area20250411 .rankTableB td.rank_pre { width: 80px;text-align: center;} #area20250411 .rankTableB th { white-space: nowrap; font-weight: bold;vertical-align: middle; } #area20250411 ._sp .rankTableB {margin-top: 10px;} #area20250411 ._sp .rankTableB td.rank { text-align: center; width: 40px;} #area20250411 ._sp .rankTableB td.rank_pre { text-align: center; width: 40px;} #area20250411 .rankTableC { width: 100%; border-left: 1px solid #e1e1e1; border-bottom: 1px solid #e1e1e1;} #area20250411 .rankTableC th { background: var(--e20250411-main-color); color: #fff; padding:5px; text-align: center; font-weight: normal;} #area20250411 .rankTableC td { border-bottom: 1px solid #e1e1e1; border-right: 1px solid #e1e1e1; vertical-align: middle; padding:6px;} #area20250411 .rankTableC tr:nth-child(odd) td { background: #f3f3f3;} #area20250411 .rankTableC td a { color: #004fe1; text-decoration: none;} #area20250411 .rankTableC td a:hover { text-decoration: underline;} #area20250411 .rankTableC td.rank { width: 40px; font-size:14px; font-weight: bold; color: var(--e20250411-main-color); text-align: center;} #area20250411 .rankTableC td.rank_pre { width: 40px;text-align: center;} #area20250411 .rankTableC th { white-space: nowrap; font-weight: bold;vertical-align: middle; line-height: 1;} #area20250411 .rankTableTop5 {margin-top: 20px; width: 100%; border-left: 1px solid #e1e1e1; border-bottom: 1px solid #e1e1e1;} #area20250411 .rankTableTop5 th { background: var(--e20250411-main-color); color: #fff; padding:12px 5px; text-align: center; font-weight: normal;} #area20250411 .rankTableTop5 th.color { background: #2756b7;} #area20250411 .rankTableTop5 th.title { padding: 12px 5px; } #area20250411 .rankTableTop5 td { border-bottom: 1px solid #e1e1e1; border-right: 1px solid #e1e1e1; vertical-align: middle; padding:8px 6px;} #area20250411 .rankTableTop5 tr:nth-child(odd) td { background: #f3f3f3;} #area20250411 .rankTableTop5 td a { color: #004fe1; text-decoration: none;} #area20250411 .rankTableTop5 .is-last td{font-weight:bold;} #area20250411 .rankTableTop5 td a:hover { text-decoration: underline;} #area20250411 .rankTableTop5 td.rank { width: 40px; font-size:14px; font-weight: bold; color: var(--e20250411-main-color); text-align: center;} #area20250411 .rankTableTop5 td.rank_pre { width: 40px;text-align: center;} #area20250411 .rankTableTop5 th { white-space: nowrap; font-weight: bold;vertical-align: middle; line-height: 1;} #area20250411 .questionTable {margin-top: 20px; width: 100%; border-left: 1px solid #e1e1e1; border-bottom: 1px solid #e1e1e1;} #area20250411 .questionTable {background: #fbfcfa;} #area20250411 .questionTable th { background: var(--e20250411-main-color); color: #fff; padding:12px 5px; text-align: center; font-weight: normal;} #area20250411 .questionTable td { border-bottom: 1px solid #e1e1e1; border-right: 1px solid #e1e1e1; vertical-align: middle; padding:8px 6px;} #area20250411 .questionTable td.is-right {text-align: right;} #area20250411 .questionTable .is-color10{ background: #e5f2f2;} #area20250411 .questionTable .is-color20{background: #cfe7ef;} #area20250411 .questionTable .is-color30{background: #b8ddf0;} #area20250411 .questionTable .is-color40{background: #a7d5f1;} #area20250411 .questionTable .is-color50{background: #9bcbf2;} #area20250411 .rankQuality{margin-top:20px;width:100%;border-left:1px solid #e1e1e1;border-bottom:1px solid #e1e1e1;} #area20250411 .rankQuality{font-size:14px;line-height:1.4;} #area20250411 .rankQuality th{background:var(--e20250411-main-color);color:#fff;font-weight:bold;padding:18px 12px;} #area20250411 .rankQuality th:nth-child(1){border-bottom:1px solid #546D9F;} #area20250411 .rankQuality tr:nth-child(1) th:nth-child(1){width:480px;} #area20250411 .rankQuality tr:nth-child(1) th{text-align:center;padding:14px 10px;} #area20250411 .rankQuality tr:nth-child(1) th:nth-child(2){background:#BC8E00;} #area20250411 .rankQuality tr:nth-child(1) th:nth-child(3){background:#808080;} #area20250411 .rankQuality tr:nth-child(1) th:nth-child(4){background:#846C5E;} #area20250411 .rankQuality tr:nth-child(2) th{text-align:center;} #area20250411 .rankQuality tr:nth-child(2) td:nth-child(2){color:#BC8E00;} #area20250411 .rankQuality tr:nth-child(2) td:nth-child(3){color:#808080;} #area20250411 .rankQuality tr:nth-child(2) td:nth-child(4){color:#846C5E;} #area20250411 .rankQuality tr:nth-child(2) td:nth-child(2), #area20250411 .rankQuality tr:nth-child(2) td:nth-child(3), #area20250411 .rankQuality tr:nth-child(2) td:nth-child(4){font-weight:bold;font-size:18px;text-align:center;} #area20250411 .rankQuality tr td {width:240px;} #area20250411 .rankQuality td{border-bottom:1px solid #e1e1e1;border-right:1px solid #e1e1e1;vertical-align:middle;text-align:center;} #area20250411 .rankQuality td:nth-child(2){background:#FEFFF6;} #area20250411 .rankQuality td:nth-child(3){background:#FCFEFF;} #area20250411 .rankQuality td:nth-child(4){background:#FFFCFC;} #area20250411 .note { margin: 1em 0;} @media only screen and (max-width: 768px){ #area20250411 .rankQuality { width:640px;} #area20250411 .rankQuality tr td {width:150px;} #area20250411 .rankQuality tr:nth-child(1) th:nth-child(1){width:170px;} #area20250411 .rankQuality th{padding:12px 10px;} } /* フッター部　シェア */ .footer_social { margin: 10px 0; text-align: center;} .footer_social a{ display: inline-block; width:300px; height:60px; line-height: 60px; margin-bottom: 10px; vertical-align: bottom; color: #ffffff; font-weight: bold; text-decoration: none; } .footer_social a img{ position: relative; top: 8px; right: 10px; } .footer_social .fb-like{ background-color:#3A579C; border-bottom: 2px solid #263864; border-radius: 5px;} .footer_social .fb-like:hover{ border-bottom: none; border-top: 2px solid #ffffff; } .footer_social .social_tw{ background-color:#000000; border-bottom: 2px solid #000000; border-radius: 5px;} .footer_social .social_tw:hover { border-bottom: none; border-top: 2px solid #ffffff; } .footer_social .line-button{ background-color:#01b901; border-bottom: 2px solid #019601; border-radius: 5px;} .footer_social .line-button:hover { border-bottom: none; border-top: 2px solid #ffffff; }