/* Component for Responsive design */ /* ============================== Media Queries ============================== */ @media only screen and (max-width: 599px) { /* device-width: 320px ` 599px for Smartphone */ #navcontainer, #footerLink, .configUnit { display: none; } #contentsArea { width: auto; padding: 0 10px; } #contentsArea #sideEnclosingArea, #contentsArea.column #sideEnclosingArea, #contentsArea.column.incListNav #sideEnclosingArea { width: auto; float: none; } #contentsArea.column #sideEnclosingArea article, #contentsArea.column.incListNav #sideEnclosingArea article { width: auto; float: left; } #contentsArea #sideEnclosingArea article { width: 100%; } /* aside */ #sideEnclosingArea aside { clear: both; width: 100%; float: left; margin-top: 20px; } #sideEnclosingArea aside div:not(.imageList) { display: none; } #sideEnclosingArea aside dl.imageList, #sideEnclosingArea aside div.imageList{ background: none; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background-color: #525252; -webkit-box-shadow: 0 2px 3px rgba(0,0,0,.15); -moz-box-shadow: 0 2px 3px rgba(0,0,0,.15); box-shadow: 0 2px 3px rgba(0,0,0,.15); } #sideEnclosingArea aside dl.imageList dt, #sideEnclosingArea aside div.imageList h2{ background: none; width: auto; -webkit-border-radius: 4px 4px 0 0; -moz-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0; background-color: #929292; border: solid 1px #333; border-bottom: solid 1px #757575; background-image: -webkit-linear-gradient(bottom, #525252, #484848 49%, #5e5e5e 51%, #797979); background-image: -moz-linear-gradient(bottom, #525252, #484848 49%, #5e5e5e 51%, #797979); background-image: -o-linear-gradient(bottom, #525252, #484848 49%, #5e5e5e 51%, #797979); background-image: linear-gradient(to top, #525252, #484848 49%, #5e5e5e 51%, #797979); /* SVG as background image (IE9/Chrome/Safari/Opera) */ background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9ImcxNCIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj4KPHN0b3Agc3RvcC1jb2xvcj0iIzc5Nzk3OSIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzVFNUU1RSIgb2Zmc2V0PSIwLjUiLz48c3RvcCBzdG9wLWNvbG9yPSIjNDg0ODQ4IiBvZmZzZXQ9IjAuNSIvPjxzdG9wIHN0b3AtY29sb3I9IiM1MjUyNTIiIG9mZnNldD0iMSIvPgo8L2xpbmVhckdyYWRpZW50Pgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2cxNCkiIC8+Cjwvc3ZnPg==); margin: 0; padding-top: 8px; padding-bottom: 8px; } #sideEnclosingArea aside div.imageList ul { border-top: 1px solid #292929; padding: 4px 5px 0; } #sideEnclosingArea aside dl.imageList dd, #sideEnclosingArea aside div.imageList ul li{ background: none; padding-top: 2px; } #sideEnclosingArea aside dl.imageList dd a, #sideEnclosingArea aside div.imageList ul li a { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background-color: #fff; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.2); background-image: -webkit-linear-gradient(bottom, #fff, #e0e0e0 6%, #fff); background-image: -moz-linear-gradient(bottom, #fff, #e0e0e0 6%, #fff); background-image: -o-linear-gradient(bottom, #fff, #e0e0e0 6%, #fff); background-image: linear-gradient(to top, #fff, #e0e0e0 6%, #fff); } .msie9 #sideEnclosingArea aside dl.imageList dd a, .msie9 #sideEnclosingArea aside div.imageList ul li a { /* IE9 */ background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc3NDQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGRkZGRkYiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNFMkUyRTIiIG9mZnNldD0iMC45OTUiLz48c3RvcCBzdG9wLWNvbG9yPSIjRjJGMkYyIiBvZmZzZXQ9IjEiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnNzQ0KSIgLz4KPC9zdmc+); } #sideEnclosingArea aside dl.imageList dd a span, #sideEnclosingArea aside div.imageList ul li a span { padding-bottom: 8px; } /* #sideEnclosingArea aside dl.asideList01, #sideEnclosingArea aside div.asideList01{ background: none; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background-color: #fff; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.2); border: solid 1px #aaa; } #sideEnclosingArea aside dl.asideList01 dt, #sideEnclosingArea aside div.asideList01 h2{ background: none; -webkit-border-radius: 4px 4px 0 0; -moz-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0; background-color: #929292; background-image: -webkit-linear-gradient(top, #fff, #eaeaea 6%, #fff); background-image: -moz-linear-gradient(top, #fff, #eaeaea 6%, #fff); background-image: -o-linear-gradient(top, #fff, #eaeaea 6%, #fff); background-image: linear-gradient(to bottom, #fff, #eaeaea 6%, #fff); SVG as background image (IE9/Chrome/Safari/Opera) background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc1NTYiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNFQUVBRUEiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNGRUZFRkUiIG9mZnNldD0iMSIvPgo8L2xpbmVhckdyYWRpZW50Pgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2c1NTYpIiAvPgo8L3N2Zz4=); } */ /* #navEnclosingArea */ #navEnclosingArea { clear: both; width: 100%; margin-top: 20px; } #contentsArea #navEnclosingArea nav.listNav { width: auto; background: none; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background-color: #fff; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.2); border: solid 1px #aaa; padding-left: 0px; padding-right: 0px; } #contentsArea #navEnclosingArea nav.listNav dl dd dl { margin-left: 5px; margin-right: 5px; } #contentsArea #navEnclosingArea nav.listNav dl.root, #contentsArea #navEnclosingArea nav.listNav ul, #contentsArea #navEnclosingArea nav.listNav dl dt a, #contentsArea #navEnclosingArea nav.listNav dl dd a, #contentsArea #navEnclosingArea nav.listNav dl dt a:hover, #contentsArea #navEnclosingArea nav.listNav dl dd a:hover, #contentsArea #navEnclosingArea nav.listNav dl dd a.hover, #contentsArea #navEnclosingArea nav.listNav dl dt a span, #contentsArea #navEnclosingArea nav.listNav dl dt a:hover span, #contentsArea #navEnclosingArea nav.listNav dl dl, #contentsArea #navEnclosingArea nav.listNav dl dd a span, #contentsArea #navEnclosingArea nav.listNav dl dd a:hover span { background: none; } #contentsArea #navEnclosingArea nav.listNav dl.root dt, #contentsArea #navEnclosingArea nav.listNav dl.root dd, #contentsArea #navEnclosingArea nav.listNav dl.root dt.root, #contentsArea #navEnclosingArea nav.listNav ul li, #contentsArea #navEnclosingArea nav.listNav dl dl dt, #contentsArea #navEnclosingArea nav.listNav dl dl dd, #contentsArea #navEnclosingArea nav.listNav dl dt a, #contentsArea #navEnclosingArea nav.listNav dl dd a, #contentsArea #navEnclosingArea nav.listNav dl dl dl, #contentsArea #navEnclosingArea nav.listNav dl dl dl dt, #contentsArea #navEnclosingArea nav.listNav dl dl dl dd { width: auto; margin: 0; } #contentsArea #navEnclosingArea nav.listNav dl dt a, #contentsArea #navEnclosingArea nav.listNav dl dd a { width: auto; background: none; -webkit-border-radius: 4px 4px 0 0; -moz-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0; /* SVG as background image (IE9/Chrome/Safari/Opera) */ background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9ImczOTUiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGRkZGRkYiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNFREVERUQiIG9mZnNldD0iMC4wMiIvPjxzdG9wIHN0b3AtY29sb3I9IiNDQkNCQ0IiIG9mZnNldD0iMC44OCIvPjxzdG9wIHN0b3AtY29sb3I9IiM4QThBOEEiIG9mZnNldD0iMSIvPgo8L2xpbmVhckdyYWRpZW50Pgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2czOTUpIiAvPgo8L3N2Zz4=); background-image: -webkit-linear-gradient(bottom, #8a8a8a, #9a9a9a 3%, #afafaf 6%, #c0c0c0 10%, #cbcbcb 14%, #d1d1d1 18%, #ededed 98%, #fff); background-image: -moz-linear-gradient(bottom, #8a8a8a, #9a9a9a 3%, #afafaf 6%, #c0c0c0 10%, #cbcbcb 14%, #d1d1d1 18%, #ededed 98%, #fff); background-image: -o-linear-gradient(bottom, #8a8a8a, #9a9a9a 3%, #afafaf 6%, #c0c0c0 10%, #cbcbcb 14%, #d1d1d1 18%, #ededed 98%, #fff); background-image: linear-gradient(to top, #8a8a8a, #9a9a9a 3%, #afafaf 6%, #c0c0c0 10%, #cbcbcb 14%, #d1d1d1 18%, #ededed 98%, #fff); } #contentsArea #navEnclosingArea nav.listNav dl dl dt a, #contentsArea #navEnclosingArea nav.listNav dl dl dt a:hover, #contentsArea #navEnclosingArea nav.listNav dl dl dt a.hover, { border-radius: 0; } #contentsArea #navEnclosingArea nav.listNav dl dt a:hover, #contentsArea #navEnclosingArea nav.listNav dl dt a.hover, #contentsArea #navEnclosingArea nav.listNav dl dd a:hover { width: auto; background: none; /* SVG as background image (IE9/Chrome/Safari/Opera) */ background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9ImcyMzQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGN0Y3RjciIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNGNUY1RjUiIG9mZnNldD0iMC4wMiIvPjxzdG9wIHN0b3AtY29sb3I9IiNGMUYxRjEiIG9mZnNldD0iMC44OCIvPjxzdG9wIHN0b3AtY29sb3I9IiNCMkIyQjIiIG9mZnNldD0iMSIvPgo8L2xpbmVhckdyYWRpZW50Pgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2cyMzQpIiAvPgo8L3N2Zz4=); background-image: -webkit-linear-gradient(bottom, #a9a9a9, #bbb 3%, #d5d5d5 6%, #e7e7e7 10%, #f3f3f3 14%, #f9f9f9 18%, #f5f5f5 98%, #fff); background-image: -moz-linear-gradient(bottom, #a9a9a9, #bbb 3%, #d5d5d5 6%, #e7e7e7 10%, #f3f3f3 14%, #f9f9f9 18%, #f5f5f5 98%, #fff); background-image: -o-linear-gradient(bottom, #a9a9a9, #bbb 3%, #d5d5d5 6%, #e7e7e7 10%, #f3f3f3 14%, #f9f9f9 18%, #f5f5f5 98%, #fff); background-image: linear-gradient(to top, #a9a9a9, #bbb 3%, #d5d5d5 6%, #e7e7e7 10%, #f3f3f3 14%, #f9f9f9 18%, #f5f5f5 98%, #fff); } #contentsArea #navEnclosingArea nav.listNav dl dt a span, #contentsArea #navEnclosingArea nav.listNav dl dt a:hover span, #contentsArea #navEnclosingArea nav.listNav dl dt a.hover span, #contentsArea #navEnclosingArea nav.listNav dl dd a span, #contentsArea #navEnclosingArea nav.listNav dl dd a:hover span { background: url(/component/c_common/img/bg_local_dl01_top.png) no-repeat 8px 1.0em; } #contentsArea #navEnclosingArea nav.listNav dl dt:after { display:block; float: left; content: url("/component/c_common/img/bg_local_dl03_top_rwd01.gif"); margin-top: -9px; margin-left: -1px; } .msie #contentsArea #navEnclosingArea nav.listNav dl dt:after, .safari #contentsArea #navEnclosingArea nav.listNav dl dt:after { margin-top: -8px; } #contentsArea #navEnclosingArea nav.listNav dl dl dt:after { content: none; } #contentsArea #navEnclosingArea nav.listNav dl dd:before { display:block; float: right; content: url("/component/c_common/img/bg_local_dl03_top_rwd02.gif"); margin-top: -9px; margin-right: -1px; } .msie #contentsArea #navEnclosingArea nav.listNav dl dd:before, .safari #contentsArea #navEnclosingArea nav.listNav dl dd:before { margin-top: -8px; } #contentsArea #navEnclosingArea nav.listNav dl dl dd:before { content: none; } #contentsArea #navEnclosingArea nav.listNav ul li, #contentsArea #navEnclosingArea nav.listNav>dl.root dt, #contentsArea #navEnclosingArea nav.listNav>dl.root dt.root { margin: 0 5px; } #contentsArea #navEnclosingArea nav.listNav>dl.root dd { margin: 0 5px 0 16px; } #contentsArea #navEnclosingArea nav.listNav dl dl dl dd { margin: 0 0 0 16px; } #contentsArea #navEnclosingArea nav.listNav dl dl dt a, #contentsArea #navEnclosingArea nav.listNav dl dl dd a, #contentsArea #navEnclosingArea nav.listNav>dl.root dd a, #contentsArea #navEnclosingArea nav.listNav>dl.root dt.root a { border-radius: 0; } #contentsArea #navEnclosingArea nav.listNav dl.root dt:after, #contentsArea #navEnclosingArea nav.listNav dl.root dd:before { content: none; } /* #contentsArea article */ /* img size */ p.keyvisual img, #contentsArea article p.imageTextCenter01 img, #contentsArea article p.imageTextCenter02 img, #contentsArea article img.fluidImg { max-width: 100%; /* width:100% -> max-width:100%*/ height: auto; /* height:100% -> height:auto*/ } .firefox p.keyvisual img, .firefox #contentsArea article p.imageTextCenter01 img, .firefox #contentsArea article p.imageTextCenter02 img, .firefox #contentsArea article img.fluidImg { width: 100%; height:100%; } #contentsArea #sideEnclosingArea article .unit img #contentsArea #sideEnclosingArea article .imageArea img, #contentsArea #sideEnclosingArea article img.fixImg { width: inherit; height: inherit; } /* h2 */ #contentsArea article h2, #contentsArea.column #sideEnclosingArea article h2, #contentsArea article h2.link, #contentsArea.column #sideEnclosingArea article h2.link, #contentsArea.column #sideEnclosingArea article .size1of2 h2.link, #contentsArea.column #sideEnclosingArea article .size1of3 h2.link { background: none; width: auto; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.2); border: solid 1px #aaa; /* SVG as background image (IE9/Chrome/Safari/Opera) */ background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc1NTYiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNFQUVBRUEiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNGRUZFRkUiIG9mZnNldD0iMSIvPgo8L2xpbmVhckdyYWRpZW50Pgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2c1NTYpIiAvPgo8L3N2Zz4=); background-color: #dedede; background-image: -webkit-linear-gradient(bottom, #fff, #fdfdfd 20%, #fafafa 21%, #eaeaea 96%, #fff); background-image: -moz-linear-gradient(bottom, #fff, #fdfdfd 20%, #fafafa 21%, #eaeaea 96%, #fff); background-image: -o-linear-gradient(bottom, #fff, #fdfdfd 20%, #fafafa 21%, #eaeaea 96%, #fff); background-image: linear-gradient(to top, #fff, #fdfdfd 20%, #fafafa 21%, #eaeaea 96%, #fff); padding-bottom: 8px; } #contentsArea article h2 span, #contentsArea.column #sideEnclosingArea article h2 span { background: none; padding-bottom: 0; padding-right: 4px; } #contentsArea.column #sideEnclosingArea article h2.link, #contentsArea.column #sideEnclosingArea article .size1of2 h2.link, #contentsArea.column #sideEnclosingArea article .size1of3 h2.link { padding-bottom: 0px; } #contentsArea.column #sideEnclosingArea article .size1of3 h2.link a { padding-bottom: 8px; } #contentsArea #sideEnclosingArea article .size1of2 h2.link a, #contentsArea #sideEnclosingArea article .size1of2 h2.link a:hover, #contentsArea #sideEnclosingArea article .size1of2 h2.link a.hover, #contentsArea #sideEnclosingArea article .size1of3 h2.link a, #contentsArea #sideEnclosingArea article .size1of3 h2.link a:hover, #contentsArea #sideEnclosingArea article .size1of3 h2.link a.hover, #contentsArea.column #sideEnclosingArea article .size1of2 h2.link a:hover, #contentsArea.column #sideEnclosingArea article .size1of2 h2.link a.hover, #contentsArea.column #sideEnclosingArea article .size1of3 h2.link a:hover, #contentsArea.column #sideEnclosingArea article .size1of3 h2.link a.hover, { background: none; width: auto; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } #contentsArea #sideEnclosingArea article .size1of2 h2.link a, #contentsArea #sideEnclosingArea article .size1of2 h2.link a:hover, #contentsArea #sideEnclosingArea article .size1of2 h2.link a.hover, #contentsArea #sideEnclosingArea article .size1of3 h2.link a, #contentsArea #sideEnclosingArea article .size1of3 h2.link a:hover, #contentsArea #sideEnclosingArea article .size1of3 h2.link a.hover, #contentsArea.column #sideEnclosingArea article .size1of2 h2.link a, #contentsArea.column #sideEnclosingArea article .size1of2 h2.link a:hover, #contentsArea.column #sideEnclosingArea article .size1of2 h2.link a.hover { padding-bottom: 8px; } #contentsArea.column article h2.link a, #contentsArea.column article .size1of2 h2.link a, #contentsArea.column article .size1of3 h2.link a, #contentsArea #sideEnclosingArea article .size1of2 h2.link a, #contentsArea #sideEnclosingArea article .size1of3 h2.link a, #contentsArea.column #sideEnclosingArea article .size1of2 h2.link a, #contentsArea.column #sideEnclosingArea article .size1of3 h2.link a { background: none; width: auto; /* SVG as background image (IE9/Chrome/Safari/Opera) */ background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc1NTYiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNFQUVBRUEiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNGRUZFRkUiIG9mZnNldD0iMSIvPgo8L2xpbmVhckdyYWRpZW50Pgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2c1NTYpIiAvPgo8L3N2Zz4=); background-color: #dedede; background-image: -webkit-linear-gradient(bottom, #ebebeb, #eaeaea 20%, #ececec 25%, #fff); background-image: -moz-linear-gradient(bottom, #ebebeb, #eaeaea 20%, #ececec 25%, #fff); background-image: -o-linear-gradient(bottom, #ebebeb, #eaeaea 20%, #ececec 25%, #fff); background-image: linear-gradient(to top, #ebebeb, #eaeaea 20%, #ececec 25%, #fff); width: auto; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } #contentsArea.column article h2.link a:hover, #contentsArea.column article .size1of2 h2.link a:hover, #contentsArea.column article .size1of3 h2.link a:hover, #contentsArea #sideEnclosingArea article .size1of2 h2.link a:hover, #contentsArea #sideEnclosingArea article .size1of2 h2.link a.hover, #contentsArea #sideEnclosingArea article .size1of3 h2.link a:hover, #contentsArea #sideEnclosingArea article .size1of3 h2.link a.hover, #contentsArea.column #sideEnclosingArea article .size1of2 h2.link a:hover, #contentsArea.column #sideEnclosingArea article .size1of2 h2.link a.hover, #contentsArea.column #sideEnclosingArea article .size1of3 h2.link a:hover, #contentsArea.column #sideEnclosingArea article .size1of3 h2.link a.hover { background: #fff; /* -webkit-tap-highlight-color */ -webkit-tap-highlight-color:transparent; } #contentsArea.column article h2.link a span, #contentsArea.column article h2.link a:hover span, #contentsArea.column article .size1of2 h2.link a span, #contentsArea.column article .size1of2 h2.link a:hover span, #contentsArea.column article .size1of3 h2.link a span, #contentsArea.column article .size1of3 h2.link a:hover, #contentsArea.column article .size1of3 h2.link a:hover span, #contentsArea #sideEnclosingArea article .size1of2 h2.link a span, #contentsArea #sideEnclosingArea article .size1of2 h2.link a:hover span, #contentsArea #sideEnclosingArea article .size1of2 h2.link a.hover span, #contentsArea #sideEnclosingArea article .size1of3 h2.link a span, #contentsArea #sideEnclosingArea article .size1of3 h2.link a:hover span, #contentsArea #sideEnclosingArea article .size1of3 h2.link a.hover span, #contentsArea.column #sideEnclosingArea article .size1of2 h2.link a span, #contentsArea.column #sideEnclosingArea article .size1of2 h2.link a:hover span, #contentsArea.column #sideEnclosingArea article .size1of2 h2.link a.hover span, #contentsArea.column #sideEnclosingArea article .size1of3 h2.link a span, #contentsArea.column #sideEnclosingArea article .size1of3 h2.link a:hover span, #contentsArea.column #sideEnclosingArea article .size1of3 h2.link a.hover span { background: none; width: auto; background: url(/component/c_common/img/bg_h2_link_rwd.gif) no-repeat 0.5em 1.1em; } /* h2wrapper */ #contentsArea #sideEnclosingArea article .h2wrapper, #contentsArea.column #sideEnclosingArea article .h2wrapper, #contentsArea.column article .h2wrapper, #contentsArea.column article .size2of3 .h2wrapper, #contentsArea.column article div.size1of3 .h2wrapper { background: none; width: auto; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.2); border: solid 1px #aaa; /* SVG as background image (IE9/Chrome/Safari/Opera) */ background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc1NTYiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNFQUVBRUEiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNGRUZFRkUiIG9mZnNldD0iMSIvPgo8L2xpbmVhckdyYWRpZW50Pgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2c1NTYpIiAvPgo8L3N2Zz4=); background-color: #dedede; background-image: -webkit-linear-gradient(bottom, #fff, #fdfdfd 20%, #fafafa 21%, #eaeaea 96%, #fff); background-image: -moz-linear-gradient(bottom, #fff, #fdfdfd 20%, #fafafa 21%, #eaeaea 96%, #fff); background-image: -o-linear-gradient(bottom, #fff, #fdfdfd 20%, #fafafa 21%, #eaeaea 96%, #fff); background-image: linear-gradient(to top, #fff, #fdfdfd 20%, #fafafa 21%, #eaeaea 96%, #fff); padding-bottom: 8px; } #contentsArea #sideEnclosingArea article .h2wrapper .clearfix, #contentsArea.column #sideEnclosingArea article .h2wrapper .clearfix, #contentsArea.column article .h2wrapper .clearfix, #contentsArea.column article .size2of3 .h2wrapper .clearfix, #contentsArea.column article div.size1of3 .h2wrapper .clearfix { padding: 8px 11px 0 10px; background: none;} .msie8 #contentsArea.column #sideEnclosingArea article .h2wrapper .clearfix { padding:9px 11px 0 10px;} #contentsArea #sideEnclosingArea article .h2wrapper .clearfix h2, #contentsArea.column article .h2wrapper .clearfix h2, #contentsArea.column #sideEnclosingArea article .h2wrapper .clearfix h2, #contentsArea.column #sideEnclosingArea article .size1of2 .h2wrapper .clearfix h2, #contentsArea #sideEnclosingArea article .size1of2 .h2wrapper .clearfix h2, #contentsArea.column #sideEnclosingArea article .size1of3 .h2wrapper .clearfix h2, #contentsArea #sideEnclosingArea article .size1of3 .h2wrapper .clearfix h2, #contentsArea.column article .size1of4 .h2wrapper .clearfix h2, #contentsArea.column #sideEnclosingArea article .size1of4 .h2wrapper .clearfix h2 { float: left; width: 100%; background:none; margin:0 -49px 0 0; padding: 1px 0 0 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border: 0; } #contentsArea #sideEnclosingArea article .h2wrapper .clearfix p, #contentsArea.column article .h2wrapper .clearfix p{ float:left; background:none; margin:0; padding:0; width: auto; line-height:1; text-align:right; } #contentsArea article .size1of2, #contentsArea.column article .size1of2, #contentsArea.column #sideEnclosingArea article .size1of2, #contentsArea article .size1of3, #contentsArea article .size2of3, #contentsArea.column article .line .size1of3, #contentsArea.column article .line .size2of3, #contentsArea.column #sideEnclosingArea article .line .size1of3, #contentsArea #sideEnclosingArea article div.aboutMenu .size1of3, #contentsArea.column article div.siteMapBlock01 .size1of3 { width: 100%; } #contentsArea article .size1of2 .imageBox, #contentsArea.column article .line .size1of3 .imageBox { margin-right: 10px; } #contentsArea article .size1of2 .textBox, #contentsArea.column article .line .size1of3 .textBox { width: auto; float: none; } #contentsArea article .line .size1of2 p.textAndImage02 span { margin: 0; } #contentsArea article .line .size1of2 p.textAndImage02 span, #contentsArea article p.textAndImage02 span { text-align: center; } #contentsArea article p.indexpict { text-align: center; } /* pluginLinkBlock */ #contentsArea article div.pluginLinkBlock02, #contentsArea.column article div.pluginLinkBlock02, #contentsArea.column #sideEnclosingArea article div.pluginLinkBlock02, #contentsArea article div.pluginLinkBlock02 .clearfix, #contentsArea.column article div.pluginLinkBlock02 .clearfix, #contentsArea.column #sideEnclosingArea article div.pluginLinkBlock02 .clearfix, #contentsArea article div.pluginLinkBlock03, #contentsArea.column article div.pluginLinkBlock03, #contentsArea.column #sideEnclosingArea article div.pluginLinkBlock03, #contentsArea article div.pluginLinkBlock03 .clearfix, #contentsArea.column article div.pluginLinkBlock03 .clearfix, #contentsArea.column #sideEnclosingArea article div.pluginLinkBlock03 .clearfix { background: none; width: auto; } #contentsArea article div.pluginLinkBlock02, #contentsArea.column article div.pluginLinkBlock02, #contentsArea.column #sideEnclosingArea article div.pluginLinkBlock02, #contentsArea article div.pluginLinkBlock03, #contentsArea.column article div.pluginLinkBlock03, #contentsArea.column #sideEnclosingArea article div.pluginLinkBlock03 { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; border: solid 1px #ccc; } #contentsArea article div.pluginLinkBlock02, #contentsArea.column article div.pluginLinkBlock02, #contentsArea.column #sideEnclosingArea article div.pluginLinkBlock02 { background: #eee; } #contentsArea article div.pluginLinkBlock02 .clearfix p.textBox { width: auto; } /* table */ #contentsArea #sideEnclosingArea article .webks-responsive-table dl { border-top:1px solid #ccc; margin: 10px 0; } #contentsArea #sideEnclosingArea article .webks-responsive-table dl dt { color:#222; font-weight: bold; text-align:left; background:#eee; border-left:1px solid #ccc; border-right:1px solid #ccc; padding:5px 8px; } #contentsArea #sideEnclosingArea article .webks-responsive-table dl dd { border:1px solid #ccc; padding:5px 8px; vertical-align:top; } /* table #contentsArea #sideEnclosingArea article table { width: 100%; display: block; position: relative; } #contentsArea #sideEnclosingArea article table thead { float: left; } #contentsArea #sideEnclosingArea article table thead th { display: block; } #contentsArea #sideEnclosingArea article table tbody { display: block; position: relative; overflow-x: auto; white-space: nowrap; } #contentsArea #sideEnclosingArea article table tbody tr { display: inline-block; } #contentsArea #sideEnclosingArea article table tbody tr th, #contentsArea #sideEnclosingArea article table tbody tr td { display: block; } */ /* table #contentsArea #sideEnclosingArea article table { display: block; position: relative; max-width: 599px; border: none; } #contentsArea #sideEnclosingArea article table thead { display: block; float: left; } #contentsArea #sideEnclosingArea article table tbody { display: block; width: auto; overflow-x: auto; } #contentsArea #sideEnclosingArea article table tbody thead { position: absolute; left: 0; } #contentsArea #sideEnclosingArea article table thead tr { display: block; margin-bottom: 10px; } #contentsArea #sideEnclosingArea article table th { display: block; } #contentsArea #sideEnclosingArea article table tbody tr { display: inline-block; vertical-align: top; width: 100%; margin-bottom: 10px; } #contentsArea #sideEnclosingArea article table td { display: block; } #contentsArea #sideEnclosingArea article table th, #contentsArea #sideEnclosingArea article table td { height: 3.5em; overflow-y: auto; } */ #contentsArea article nav.linerNav, #contentsArea.column article nav.linerNav { background: #f6f6f6; width: auto; -webkit-border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px; background-color: #f6f6f6; -webkit-box-shadow: 0 2px 3px rgba(0,0,0,.2); -moz-box-shadow: 0 2px 3px rgba(0,0,0,.2); box-shadow: 0 2px 3px rgba(0,0,0,.2); border: solid 1px #bdbdbd; /* SVG as background image (IE9/Chrome/Safari/Opera) */ background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc4MzYiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGNkY2RjYiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNGNkY2RjYiIG9mZnNldD0iMC44Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI0ZGRkZGRiIgb2Zmc2V0PSIxIi8+CjwvbGluZWFyR3JhZGllbnQ+CjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzgzNikiIC8+Cjwvc3ZnPg==); } #contentsArea article nav.linerNav ul li, #contentsArea.column article nav.linerNav ul li { white-space: inherit; } #contentsArea article nav .linerFooterNav { text-align: left; } #contentsArea article nav .linerFooterNav li { border-left: none; } /*topListMenu01*/ #contentsArea article .topListMenu01 { width: auto; float: none; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; border: solid 1px #939393; margin: 25px 0 -3px 0; box-shadow: 0 1px 2px rgba(0,0,0,.15), inset 0 0 2px #fff; } #contentsArea article .topListMenu01 a { background: none; } #contentsArea article .topListMenu01 a { background: url(/component/c_common/img/bg_pr_001.png) repeat-y right, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#dfdfdf)); background: url(/component/c_common/img/bg_pr_001.png) repeat-y right, -webkit-linear-gradient(top, #ffffff 0%,#dfdfdf 100%); background: url(/component/c_common/img/bg_pr_001.png) repeat-y right, linear-gradient(to top, #dfdfdf, #fff); width: auto; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; border: solid 1px #fff; min-height: 112px; } .msie9 #contentsArea article .topListMenu01 a { background: url(/component/c_common/img/bg_pr_001.png) repeat-y right, url(/component/c_common/img/bg_pr_002.png) repeat-x 0 0; background-color: #fdfdfd; } #contentsArea article .topListMenu01 a:hover { background: #fff url(/component/c_common/img/bg_pr_001.png) repeat-y right; } #contentsArea article .topListMenu01 a h2, #contentsArea article .topListMenu01 a:hover h2 { background: none; border: none; box-shadow: none; border-radius: none; } #contentsArea article .topListMenu01 img { left: auto; background: #fff; right: 1px; top: 1px; padding: 0 0 0 1px; } /*newsBlock01*/ #contentsArea article div.newsBlock01 table { width: 100%; } #contentsArea article div.newsBlock01 table td, #contentsArea article div.newsBlock01 table th { width: 100%; display: inline-block; float: left; } #contentsArea article div.newsBlock01 table th { border: none; padding-bottom: 0; } }