/* * responsive-overlay.css * ------------------------------------------------------------------ * Goal: make existing fixed-width pages usable on phones WITHOUT * changing the desktop design, colors, or copy. Every rule is * scoped to @media (max-width:768px); rendering above 768px is * left exactly as the original CSS produced it. * IMPORTANT: ASCII-only file. Do NOT re-save in a legacy (Shift_JIS / * EUC) encoding. * Selectors below are auto-derived from the site's own stylesheets. * ------------------------------------------------------------------ */ /* ========================================================= * [BASE OVERLAY CSS] -- paste hand-written overlay rules here. * Keep them above this comment block; the auto-generated section * starts at the @media rule below. * ========================================================= */ /* ---- (paste base overlay CSS above this line) ---- */ @media (max-width:768px){ /* ---- global safety: wide media must never force horizontal scroll ---- */ img, object, embed, video { max-width:100% !important; height:auto !important; } iframe, table { max-width:100% !important; } /* form controls: keep inputs/areas inside the screen */ input, textarea, select { max-width:100% !important; box-sizing:border-box !important; } /* ---- flexslider hero/banner: make slides fluid (they carry JS inline px widths) ---- */ .flexslider, .flex-viewport, .flexslider .slides, .flexslider .slides > li { max-width:100% !important; } .flexslider .slides img { width:100% !important; height:auto !important; } /* ---- fixed-width containers (>=340px) -> fluid, fit viewport incl. margins ---- */ #certification .btnSet01 .btn01, #certification .btnSet02 .btn01, #closemessage, #column-1, #column-2, #confirmation .btnSet01 .btn01, #confirmation .btnSet01 .btn01_blank, #confirmation .btnSet02, #confirmation .formContainer, #contact .cssBtn01, #content, #contents, #contentsContainer, #expansionContainer, #flash_wrap, #flow, #flow .btn01, #flow .inner, #footer, #footer-in, #footer-in ul, #footer_banner, #footer_contents, #guide11 dd, #header, #header h1 a, #headerContainer, #header_index, #header_index h1 a, #hirogari01 #hirogari01-1, #hirogari01 dd, #hirogari02-1, #hirogari02-2, #hirogari03 table, #i02 .introBlock03_1a .nenknTxt, #index .btnSet01 .btn01, #index .container, #info, #info dd, #info dl, #input .btnSet01 .btn01, #itakuhoken, #kaiyaku01 table, #kaiyaku02 table, #kanri_contents.kanri_comp table, #kanyu04 dl, #lifestage, #login .btn01, #main, #main01, #main03, #menu, #n_tab_navi01, #n_tab_navi02, #n_tab_navi03, #nameboshuu, #nav, #navi_index ul, #ouboform, #ouboform dd, #pageright, #pagetop, #quarterly02, #retirement .retirementBox01, #retirement .retirementBox02_1, #retirement .retirementBox02a, #retirement .retirementBox02b, #retirement h2, #retirement1 .contents, #retirement1 .reContainer, #retirement2 .contents, #retirement2 .retire02 .images, #retirement2 .retire03_1_1, #retirement2 .retire03_1_2, #retirement2 .retire03_2_1a, #retirement2 .retire03_2_1a2, #retirement2 .retire03_2_3L, #retirement2 .retire03_2_3R, #retirement2 .retire03_3_1, #send, #shikaku02 table, #sim .btnSet01 .btn01, #sim .btnSet01 .btn05, #simu_contents table, #sliderContainer, #tokuten02-3, #topAr, #topHead, #topHead p, #wrap, #wrapper, #y_tab_navi01, #yasuragi_ntt01, #yasuragi_ntt03, #yasuragi_ntt03 table, #yasuragi_ntt04, #yasuragi_ntt04 table, #yasuragi_ntt06, #yasuragi_ntt06 table, #yasuragi_ntt07, .account_area, .account_area2, .annuityBox01, .annuityBox01 dt, .annuityBox02_2, .annuityBox03, .annuityBox04, .annuityBtnBox, .arrowInner01 .images, .arrowInner03 .txtBox .znck_btn01, .attentionBox, .block01 dl, .block01 dt, .block02_1L, .block02_1R, .block02_2L, .block02_2R, .block02p1 .inner, .block02p2 .inner, .block03 p, .block05 .btn, .block05 .inner, .block05 h2, .camp01, .camp01 dl, .camp01 dt, .camp_banner, .camp_ninni, .camp_ninni .btn01, .camp_ninni h2, .campaignBox02, .campaignContainer, .campaignContainer table, .checklist02 p.note, .checklist_index p.note, .complete_area, .cont01_2, .cont02_3_1, .cont06_img p, .cont07_2, .container, .contentsBg, .contentsBgTop, .contentsBox, .contentsBox_top, .contentsContainer, .courseBox01L, .courseBox01R, .courseBox03 table, .expansionBox02, .expansionBox02_C .expansionBox03_2, .expansionBox03_1, .expansionBox03_2, .flow01 p, .footContainer, .footLinkContainer, .formBox01, .formBox01 .fb_R, .formBox01_2, .formBox01_2 .li002, .formBox02, .formBox02 .fb_R, .formBox03, .formBox03 .fb_R, .formBox04, .formBox05, .formContainer, .formContainer2, .form_area, .fw05, .globalMenuSp .accordion-content .inner, .globalMenuSp .gmspBody, .guideBlock01_1 .btn01, .guideBlock01_1 .contL, .guideBlock01_2 .contL, .headBox, .headContainer, .hiTop_box01A, .hiTop_box01B, .hiTop_box01_1, .hiTop_box01_2, .hiTop_box01_3, .hiTop_box01_4, .hindBox01, .hindBox02, .hindBox04L, .hindBox04L h5, .hirogari03_3, .hirogari03_3 table, .hirogari03_4, .hirogariHead_fix .inner, .hirogari_newBox01, .hirogari_newBox02, .hirogari_newContainer02, .indexBanner, .indexBox02 dl, .indexBox03, .indexContainer, .information, .innerMenu, .inp340, .inp350, .inp400, .inp500, .inp550, .inputS_ZN_TOP, .introBlock01_2L, .introBlock01_2R, .introBlock02_1, .introBlock02_2, .joinBox01R, .lfBox00, .lfBox01, .lfBox01_bb, .lfBox03, .lfBox04, .lfBox05, .lfSim01, .lfSimDl01, .lfSimDl02, .lfSimSubmit01, .lfsubmit01, .lfsubmit02, .life_member, .life_memberTxt, .life_newbox01 p, .life_newbox02, .life_newbox02A, .life_newbox02B, .mailform dd, .mailform dd textarea, .mainTxt, .movieBox01L, .movieBox01R, .movieBtn01, .n_simBox01, .n_simBox02, .ncw, .newContainer01, .news, .newsBox01, .newsBox02, .newsBox03_1, .newsBox03_2, .ninniBox01_1, .ninniBox01_1 .inner, .ninniBox01_1R, .ninniBox01_2, .ninniBox01_2 .inner, .ninniBox01_3, .ninniBox01_3 .images, .ninniBox01_3 p, .ninniBox01_4, .ninniBox01_4 .inner, .ninniBox01_4 .txt, .ninniBox01_4 .txt2, .ninniBox01_4 .txt2 h5, .ninniBox01_5, .ninniBox02 .ac01 h5, .ninniBox02 .ac02 h5, .ninniBox02 .inner, .ninniBox02R, .ninniBox03 .inner, .ninniBox03 table, .ninni_main, .ninni_tab_top, .ninnicontent_main, .paragraph_c2, .paragraph_form, .pdfHelp, .pdfHelp h3, .photo_box .prize_txt, .plannedBlock03_1, .plannedBlock03_2, .qasafety .qaimg table, .secondlifeBlock01_3 .voiceL, .secondlifeBlock03_2L, .secondlifeBlock03_2R, .simBox01L, .simNavi, .simSubTit01, .simSubTit02, .simSubTit03, .slSim01, .submit_btn01, .submit_content dd, .tableSim01, .tarea340, .tarea350, .tarea400, .tarea410, .tarea450, .tarea500, .tarea550, .tarea560, .tarea570, .tarea575, .tarea580, .tarea590, .tarea600, .tarea690, .tarea700, .tb01, .thmbContainer, .thmbContainer h3, .topBlock01, .topBlock02L, .topBlock02L h3, .topBlock02R, .topBlock02R h3, .topBlock02_2L, .topBlock02_2L dl, .topBlock03_1, .topBlock03_2, .topLink01, .topMenu01_1, .topMenu01_2, .topMenu01_3, .topMenu02_1, .topMenu02_2, .topMenu02_3, .topMenu02_4, .topMenu02_5, .unionlistBox01, .unionlistContainer, .voiceL, .voiceR, .w400, .w450, .w500, .w550, .w600, .w650, .w700, .w750, .w760, .wznckBox01, .wznckBox02, .wznckBox03 .images, .wznckContainer, .wznckContainer .inner, .wznckContainer h3, .yasuragi_ntt02, .yasuragi_ntt05, .yellowBox01, .yellowBox02, .yellowBox03, .yellowBox04, body .hirogariFont, footer .footCopy div, h3.share_form, label.error, table.form, table.form2, table.pre_2_form, table.pre_form, table.pre_form2, table.present, ul#attentionarea01, ul.acMenu li.title { width:auto !important; max-width:100% !important; box-sizing:border-box !important; } /* ---- floated columns -> stack into one column ---- */ #banner_navi, #column-1, #column-2, #column-2 #column-21, #column-2 #column-22, #confirmation .btnSet02L, #confirmation .btnSet02R, #contentsContainer, #footer-in p.print, #footer-in ul, #footer-in ul li, #footer_banner li, #guide11 dd, #guide11 dt, #hirogari02-1, #hirogari02-2, #hirogarinavi, #i02 .introBlock03_1a .btn01, #i02 .introBlock03_1a .nenknTxt, #indexnavi, #info dd, #info dt, #leftMenu, #leftMenu2, #main, #main01, #main02, #main03, #menu li a, #n_tab_navi01 li, #n_tab_navi02 li, #nav ul li, #navi li, #navi_btn li, #navi_index li, #ouboform dd, #ouboform dt, #pageright, #qanavi li, #quarterly01, #quarterly02, #retirement .retirementBox02_1, #retirement .retirementBox02_2, #retirement1 .contents, #retirement1 .menu, #retirement1 .reBox02 dt, #retirement1 .reBox03 dt, #retirement2 .note dt, #retirement2 .retire02 .images li, #retirement2 .retire03_1_1L, #retirement2 .retire03_1_1R, #retirement2 .retire03_1_2 dt, #retirement2 .retire03_2_1a, #retirement2 .retire03_2_1a2, #retirement2 .retire03_2_1b, #retirement2 .retire03_2_1b2, #retirement2 .retire03_2_1c, #retirement2 .retire03_2_1c2, #retirement2 .retire03_2_3 .subTit dt, #retirement2 .retire03_2_3L, #retirement2 .retire03_2_3R, #retirement2 .retire03_2_3Tit dt, #retirement2 .retire03_2_4 .subTit dt, #sidenavi, #sidenavi2, #simubtn01, #simubtn02, #site_navi li, #tab_navi li, #tokuten02-2, #tokuten02-3, #topAr dt, #txt_size li, #y_tab_navi01 li, #yasuragi_ntt03 dt, #yasuragi_ntt04 dt, #yasuragi_ntt06, #yasuragi_ntt07, .about01 dt, .aboutImg01, .accordion-title dt, .annuityBox dt, .annuityBox01 dt, .annuityBox02 dt, .annuityBox05_1, .annuityBox05_2, .annuityBtnBox li, .answer dt, .arrowEnd .ninniBox02L, .arrowInner01 .ninniBox02L, .arrowInner02 .ninniBox02L, .arrowInner03 .ninniBox02L, .attentionBox .attentionBox01, .block02_1L, .block02_1R, .block02_1R .txt1, .block02_1R .txt2, .block02_1R .txt3, .block02_2 .txt1, .block02_2 .txt2, .block02_2 .txt3, .block02_2L, .block02_2R, .block03 .btn, .block03 p, .camp01 dt, .cboxPhoto, .checklist01 dt, .cont01_2 dt, .cont02_3 p, .cont02_3_1, .cont02_3_3, .cont02_3_4, .cont04_2 dt, .cont05_2 dt, .cont07_2_1, .cont07_2_2, .contentsContainer, .courseBox01L, .courseBox01R, .course_txtBox01a dt, .expansionBox01 dt, .expansionBox02_1 dt, .expansionBox02_2 dt, .expansionBox02_C .expansionBox03_2, .expansionBox03_1, .expansionBox03_2, .feature_titBox01a dt, .feature_titBox01b dt, .feature_txtBox01a dt, .flowBlock dt, .footLink01, .footLink02, .footLink03, .footer_menu, .formBox01 .fb_L, .formBox01 .fb_R, .formBox01_1, .formBox01_2, .formBox01_2 label, .formBox01_2 li, .formBox02 .fb_L, .formBox02 .fb_R, .formBox02 dt, .formBox03 .fb_L, .formBox03 .fb_R, .formBox03 dt, .formBox04 dt, .formContainer2 .submit_content dt, .foto, .globalMenuSp .gmsp01 li, .globalNavi li, .globalNavi li:last-child, .guideBlock01_1 .contL, .guideBlock01_1 .contR, .guideBlock01_1 .note dt, .guideBlock01_2 .contL, .guideBlock01_2 .contR, .headBox, .hguideBox01L, .hguideBox01R, .hiCont_box01_1, .hiCont_box01_2, .hiCont_box01_3, .hiCont_box01_4, .hiTop_box01_1, .hiTop_box01_2, .hiTop_box01_3, .hiTop_box01_4, .hindBox03 li, .hindBox04L, .hindBox04R, .hirogari03_3, .hirogari03_4, .hirogariHead_fix .inner dt, .indexBanner ul, .indexBox01_1, .indexBox01_2, .indexBox02 dt, .innerMenu li, .introBlock01_1 .inner li, .introBlock01_2L, .introBlock01_2R, .introBlock01_2R .flyer01 dt, .introBlock02_1, .introBlock02_1 dt, .introBlock02_2, .introBlock02_2 dt, .introBlock03_1a .note dt, .introBlock03_1b .note dt, .itemMenu_L, .itemMenu_R, .joinBox01L, .joinBox01R, .lfBox06 li, .lfSimDl01, .lfSimDl01 dt, .lfSimDl02, .lfSimDl02 dt, .lfTable01, .lfTable02, .life_member dt, .life_memberPhoto, .life_memberTxt, .life_newbox02A, .life_newbox02B, .movieBox01L, .movieBox01R, .n_simBox01 dt, .newGuideBox01 dt, .newGuideBox02_1 dt, .newGuideBox02_2 dt, .newGuideBox02_3 dt, .news dt, .newsBox01, .newsBox01 dt, .newsBox02, .newsBox03_1, .ninniBox01_1L, .ninniBox01_1R, .ninniBox01_1R .txt dt, .ninniBox01_4 .txt, .ninniBox02 .txtBox dt, .ninniBox02R, .ninniBox03 dt, .pTit dt, .pagetop, .photo_box li, .plannedBlock02_3 li, .plannedBlock03_1, .plannedBlock03_2, .secondlifeBlock02 .note dt, .secondlifeBlock02_2 .images, .secondlifeBlock02_2 .images2, .secondlifeBlock02_2 .txt, .secondlifeBlock03 .note dt, .secondlifeBlock03_2L, .secondlifeBlock03_2R, .shikakuBox01 dt, .sideMenu, .simBox01L, .simBox01L dt, .simBox01R dt, .simNaviBox dt, .sim_resultBox01, .sim_resultBox01 dt, .step dt, .thmbBox_Other, .thmbBox_Other dt, .thmbBox_PDF, .thmbBox_PDF dt, .thmbBox_PDF02, .thmbBox_PDF02 dt, .thmbBox_PPT, .thmbBox_PPT dt, .thmbBox_XLSX, .thmbBox_XLSX dt, .tit dt, .topBlock02L, .topBlock02R, .topBlock02R .linkL, .topBlock02R .linkR, .topBlock02_1L, .topBlock02_2L dt, .topBlock02_3 li, .topBlock03_1, .topBlock03_2, .voiceL, .voiceL .images, .voiceR, .voiceR .images, .wznckBox03 .images, .wznckBox03 .tit03 dt, .wznckBox03 .txtBox, .zoom, header #txt_size li { float:none !important; width:auto !important; max-width:100% !important; margin-left:0 !important; margin-right:0 !important; } } /* ========================================================= * PER-PAGE FIXES (hand-written -- keep below the generated block * so these rules win the cascade at equal specificity) * ========================================================= */ @media (max-width:768px){ /* -- new/index.html : campaign block ------------------------------ * .camp01 dd is offset with margin-left:440px next to a 420px dt * (no float). Stack them instead. */ .camp01 dd{ margin-left:0 !important; width:auto !important; } /* fixed 690px canvas height leaves the decoration behind the text; * let it grow and keep the artwork covering the block */ .camp_ninni{ height:auto !important; background-size:cover !important; } /* decorative badge is absolutely anchored 45px past the right edge * (by design on desktop); on phones let it flow below the text */ .ninniBox01_1 .images{ position:static !important; margin:10px auto 0 !important; } /* -- wznck/index.html : fixed header -------------------------------- * #headFixd is a position:fixed bar sized for the desktop menu; the * stacked mobile menu grows taller than the screen and would cover * the whole page. Put it back in flow and drop the 230px offset that * compensated for it. */ #headFixd{ position:static !important; margin-top:0 !important; } .wznckContainer{ padding-top:20px !important; } /* anchor-offset trick (-250px margin / +250px padding) compensated * for the fixed header; without it it is just a 250px hole */ .wznckBox03{ margin-top:0 !important; padding-top:0 !important; } /* -- yasuragi/info/safeguard.html : comparison tables ---------------- * cell content sets a ~465px minimum; scroll inside the table instead * of pushing the page wider */ .tbl01, .tbl02, .tbl03{ display:block !important; overflow-x:auto !important; -webkit-overflow-scrolling:touch; } /* -- yasuragi/info/update.html : envelope note box ------------------- * absolutely parked at left:304px beside the two floated columns; * flow it below them on phones (168px art box, keep centered) */ .cont07_2_3{ position:static !important; margin:15px auto 0 !important; } /* -- new/page3 (renraku form) : input-pair rows set a ~424px minimum; * scroll inside the form tables (ncweb pages have no tables, so * #simu_contents scoping cannot leak there) */ #simu_contents table{ display:block !important; overflow-x:auto !important; -webkit-overflow-scrolling:touch; } /* -- new/page3/page3.html : letter block hard-coded inline as * width:750px + margin-left:80px */ div[style*="width:750px"]{ width:auto !important; max-width:100% !important; margin-left:0 !important; margin-right:0 !important; } /* -- quiz/appli, appliNEW : legacy layout tables; nowrap cells refuse * to wrap and force a ~686px minimum */ td[nowrap], th[nowrap]{ white-space:normal !important; } /* size=50/60/72 inputs (350-490px natural) prop the form tables open; * a % width has no min-content contribution, so the tables can shrink. * Any input this wide is too wide for a phone wherever it appears. */ input[size="50"], input[size="60"], input[size="72"]{ width:95% !important; } /* quiz answer cells (.table_left is quiz-only): the surname/given-name * input pair and the cols=40 textarea still add min-content */ td.table_left input[type="text"], td.table_left textarea{ width:90% !important; } } /* -- wznck/index.html : 890x965 px-coordinate infographic ----------- * Text is absolutely positioned over a background sized 100% auto, * so uniform scaling preserves the design exactly. Browsers without * length-division calc() keep the current side-scroll behaviour. */ @supports (transform: scale(calc(100vw / 890px))) { @media (max-width:768px){ .wznckBox02{ width:890px !important; max-width:none !important; /* 100vw/890px is length/length = plain number (CSS Values 4) */ transform: scale(calc(100vw / 890px)); transform-origin: 0 0; /* reclaim the layout height freed by the visual shrink: occupied = 965px*s + 90px -> margin-bottom = 965px*s - (965-90)px */ margin-bottom: calc(965px * (100vw / 890px) - 875px) !important; } /* -- yasuragi/info/update.html : manga-style figure --------------- * speech-bubble texts are absolutely positioned (left:602px etc.) * over the 810x574 dog artwork; the global img cap shrank the image * and left the texts behind. Pin the canvas at 810px and scale it * uniformly, same recipe as .wznckBox02 above. */ .cont07_1{ width:810px !important; max-width:none !important; /* unlike .wznckBox02 this canvas sits inside ~20px side padding, so scale to (100vw - 40px) and keep symmetric margins */ transform: scale(calc((100vw - 40px) / 810px)); transform-origin: 0 0; /* occupied = 574px*s + 40px -> margin-bottom = 574px*s - 534px */ margin-bottom: calc(574px * ((100vw - 40px) / 810px) - 534px) !important; } .cont07_1 img{ width:810px !important; max-width:none !important; } } }