html,#dmdb_top{ height: 100%; } .pickup h2, .news h2, .weibo h2{ margin: 1em 0 .6em; color: #D90000; font-weight: bold; font-size: 1.4em; } .pickup h2{ margin: 1em 1rem .6rem; } .key{ position: relative; } /*.key h1{ position: absolute; bottom: 0; width: 100%; color: #f04020; font: 400 7em/1.2 'Share Tech'; font: 400 13.8vw/1.2 'Share Tech'; }*/ .key div{ position: absolute; bottom: 8px; } .infomation, .weibo{ margin: 0 1em; } /*.info{ position: relative; padding: 8px 8px 12px; background: #f04020 url('bg_.png'); color: white; font: 700 1.5em/1.2 'Noto Sans Japanese'; } .info b{ color: #ffdf20; } .info b, .info span{ white-space: nowrap; display: inline-block; font-weight: inherit; } .info:after{ content: ""; position: absolute; display: block; bottom: -8px; left: 50%; margin-left: -8px; width: 0; height: 0; border-style: solid; border-color: #f04020 transparent transparent transparent; border-width: 8px 8px 0 8px; }*/ .pickup ul{ overflow-x: scroll; -webkit-overflow-scrolling: touch; white-space: nowrap; padding: .4em; } .pickup ul li{ display: inline-block; margin: 0; width: 240px; } .pickup li a{ display: block; border: 1px solid #b8b8b8; } .news .news_in{ line-height: 1.4; max-height: 400px; overflow-y: scroll; -webkit-overflow-scrolling: touch; background: #FFF; border: 1px solid #b8b8b8; } .weibo .weibo_in{ background: #FFF; border: 1px solid #b8b8b8; } .news .news_in::-webkit-scrollbar{ display: none; } @media screen and (min-width: 768px) { .news .news_in{ max-height: 320px; } } .news h3{ margin: .3em 0; padding: 0; background: rgba(32,16,16,.05); /*border-top: 1px solid #bfb7b7;*/ } /*.news h4{ font: 700 1.1em/1.8 sans-serif; margin: .3em .6em .3em; }*/ .news time{ display: inline-block; padding: 0 .6em; border-left:solid 4px #D90000; color: #8f8787; font: 700 1em 'Titillium Web'; } .news p{ margin: .3em .6em .3em; } .news ul{ margin: .3em .6em .3em; } .news li{ margin: .3em 0; padding: .3em; background: rgba(32,16,16,.05); border-radius: 2px; font-size: .85em; } .news p + h3, .news ul + h3{ margin-top: .6em; } .news .em, .news a{ font-weight: 700; } .weibo,.weibo_in{ margin: 0; padding: 0; } @media screen and (min-width: 896px) { .visual{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; background: url('bg_border.png'); background: url('bg_border.svg'); } .key{ -webkit-box-flex: 1; -ms-flex: 1; flex: 1; /*padding: .4em 0 .4em .4em;*/ } /*.key h1{ bottom: 16px; left: 0; height: auto; font-size: 4em; line-height: .8em; background: url('bg_point.png') no-repeat top left; background: url('bg_point.svg') no-repeat top left; } .info:after{ border: 0; }*/ .pickup{ position: relative; margin: 0; width: 40%; max-width: 480px; padding: .4em; } .pickup ul{ position: relative; bottom: 0; overflow-x: auto; overflow-y: auto; height: auto; white-space: wrap; } .pickup ul li{ margin-bottom: .5em; display: block; width: auto; } .infomation{ display: -webkit-box; display: -ms-flexbox; display: flex; } .news, .weibo{ -webkit-box-flex: 1; -ms-flex: 1; flex: 1; margin: .5em; } } @media screen and (max-width: 768px) { .key{ border-bottom: 4px solid #D90000; } }