* { margin: 0; padding: 0 } .clear:after { display: block; clear: both; content: ""; visibility: hidden; height: 0 } .clear { zoom: 1 } .fl { float: left } .fr { float: right } .disBlock { display: block } .tcenter { text-align: center } .overAuto { overflow: auto } .disInlineBlock { display: inline-block } .marAuto { margin: 0 auto } .colorRed { color: #f00  !important; font-weight: bold } .width100 { width: 100% } .posAbs { position: absolute } html,body{width: 100%;font-family: "Lato", "Helvetica", "Arial", sans-serif} img { image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; -ms-interpolation-mode: nearest-neighbor; } ul,li{list-style: none} .tableBoxMain { width: 100%; max-width: 1920px; margin: 0 auto; } .tableBoxBanner{ width: 100%; position: relative; margin-bottom: 8px; } .tableBoxBanner img{width: 100%;height: auto} .show-sp{display: none} .bannerCon{ position: absolute; top: 50%; transform: translateY(-50%); color: #fff; text-align: center; width: 100%; } .bannerCon h1{font-size: 28px;line-height: 28px;font-weight: normal;margin-bottom: 5px} .bannerCon p{font-size: 38px;line-height: 38px;font-weight: bold} .tbmc_section{padding: 35px 0 20px 0} .tbmcs_middle{width: 80%;margin:0 auto;max-width: 1200px} .tbmcs_clear{width: 100%} .tbmcs_c_con{ width: calc(50% - 20px); width: -webkit-calc(50% - 20px); width: -moz-calc(50% - 20px); } .marginR15{margin-right: 20px} .marginL15{margin-left: 20px} .tbmcs_c_img{width: 50%;height: auto} .tbmcs_c_con h2{font-size: 32px;line-height: 32px;margin: 5px 0} .tbmcs_c_con h3{font-size: 20px;line-height: 20px;margin-bottom: 12px} .orSpan{display: inline-block;font-size: 18px;background: #f26a52;color: #fff;margin: 8px 0} .cpmmon_p{ font-size: 18px; line-height: 28px; color: #000; width: calc(100% - 20px); width: -webkit-calc(100% - 20px); width: -moz-calc(100% - 20px); } .cpmmon_p_02{font-size: 18px;line-height: 28px} .marginB10{margin-bottom: 10px} .bg_gray{background: #f6f6f6} .cpmmon_a{font-size: 14px;line-height: 14px;color: #309ae8;text-decoration: none;margin-top: 10px;font-weight: bold;text-decoration: underline} .tbmc_s2 .tbmcs_c_con h2{margin: 5px 0 10px 0} .tbmc_s2 .tbmcs_c_img{margin-top: 10px} .tbmc_s3 .tbmcs_c_con h2{margin: 20px 0} .tbmc_s3 .tbmcs_c_con{ width: calc(40% - 20px); width: -webkit-calc(40% - 20px); width: -moz-calc(40% - 20px); margin-top: 50px; } .tbmc_s3 .tbmcs_c_img{width: 60%;height: auto} .tbmc_s4 .tbmcs_m_con{width: 80%;margin: 0 auto} .tbmc_s4 .tbmcs_m_con h2{ height: 40px; line-height: 40px; background: url(https://p3-ofp.static.pub/ShareResource/JPResource/JP-Images/content-page/diversity-Inclusion/news-icon.png) no-repeat; background-size: auto 100%; text-indent: 50px; font-size: 26px;line-height: 40px;margin-bottom: 20px; } .tbmc_s4 .tbmcs_m_con img.tbmcs_m_c_img{ width: 100%; height: auto; margin-bottom: 15px; } .toNews{text-decoration: none;color: #fff;font-size:16px;height: 36px;line-height:36px;padding:0 20px;border-radius: 3px;background: #2f4a9e;text-align: center;display: inline-block} .toNews img{width: 8px;margin-left: 5px;position: relative;top: 1px} .tbmc_s5 h2{font-size: 32px;line-height: 32px;margin: 15px 0 30px 0;text-align: center} .tbmc_s5 .bold_p{font-size: 20px;line-height: 20px;margin: 10px 0;text-align: center} .tbmc_s5 .bold_p a{font-weight: bold;color: #294d96} .tbmc_section.tbmc_s5{padding: 35px 0 50px 0} .ViewMoreBtn{ color: #fff; background-color: rgba(0, 0, 0, .8); border: 1px solid; border-color: #fff; padding: 10px 20px; height: auto; float: none; font-size: 16px; line-height: 16px; border-radius: 4px; text-decoration: none; display: inline-block; margin: 20px auto 0 auto; } .ViewMoreBtn:focus,.ViewMoreBtn:hover{background: #fff;color: #000} @media screen and (max-width: 760px) { .show-pc{display: none} .show-sp{display: block} .bannerCon h1{font-size: 20px;line-height: 20px} .bannerCon p{font-size: 24px;line-height: 24px} .tbmcs_c_img{float: initial;width: 100%} .tbmcs_c_con{float: initial;width: 100%;margin-right: 0} .tbmcs_middle{ width: calc(100% - 20px); width: -webkit-calc(100% - 20px); width: -moz-calc(100% - 20px); } .tbmc_section{padding: 15px 0} .tbmcs_c_con h2{font-size: 22px;line-height: 22px;text-align: center;margin: 15px 0 5px 0} .tbmcs_c_con h3 { font-size: 16px; line-height: 16px; margin-bottom: 6px; text-align: center; margin-bottom: 15px; } .orSpan{margin: 0 0 5px 0;font-size: 14px} .cpmmon_p{width: 100%;font-size: 14px;line-height: 20px} .cpmmon_p_02{width: 100%;font-size: 14px;line-height: 20px} .marginL15{margin-left: 0} .tbmc_s2 .tbmcs_c_con h2{margin: 15px 0} .marginR15{margin-right: 0} .tbmc_s3 .tbmcs_c_img{width: 100%} .tbmc_s3 .tbmcs_c_con{width: 100%;margin-top: 0} .tbmc_s3 .tbmcs_c_con h2{margin: 15px 0} .tbmc_s4 .tbmcs_m_con h2{height: 24px;line-height: 24px;text-indent: 34px;font-size: 22px;margin: 5px auto 15px auto;width: 254px} .tbmc_s4 .tbmcs_m_con{width: 90%} .toNews { color: #fff; font-size: 14px; height: 30px; line-height: 30px; padding: 0 15px; border-radius: 3px; background: #2f4a9e; text-align: center; float: initial; margin: 0 auto; display: block; width: 90px; } .tbmc_section.tbmc_s5{padding: 25px 0} .tbmc_s5 h2{font-size: 22px;line-height: 22px;margin: 0 0 15px 0} .tbmc_s5 .bold_p{font-size: 14px;line-height: 14px;margin: 8px 0} } @media screen and (min-width: 761px) and (max-width: 1000px) { .bannerCon h1{font-size: 20px;line-height: 20px} .bannerCon p{font-size: 28px;line-height: 28px} .tbmc_section{padding: 20px 0} .tbmcs_middle{width: 96%} .tbmcs_c_con h2{font-size: 26px;line-height: 26px} .tbmcs_c_con h3{font-size: 16px;line-height: 16px;margin-bottom: 8px} .orSpan{font-size: 14px;margin: 5px 0} .cpmmon_p,.cpmmon_p_02{font-size: 14px;line-height: 20px} .cpmmon_a{font-size: 12px;line-height: 14px} .tbmc_s3 .tbmcs_c_con{margin-top: 10px} .tbmc_s5 h2{font-size: 26px;line-height: 28px;margin: 10px 0 20px 0} .tbmc_s5 .bold_p{font-size: 16px;line-height: 16px} }