.main { } .documentArea { background: #F9F4D4; padding: 30px 20px; } .documentArea__heading { text-align: center; } .documentArea__heading img { max-width: 100%; height: auto; } .documentArea__heading .pc { display: none; } .documentList { margin: 15px auto; } .documentList__item:not(:last-child) { margin: 0 0 15px; } .documentList__item img { width: 100%; height: auto; } .no_result { padding: 15px; background: #EDEFF0; } @media screen and (min-width: 641px) { .main { width: 885px; } .documentArea__heading .sp { display: none; } .documentArea__heading .pc { display: inline; } .documentArea { padding: 40px 37px; } .documentList { margin: 30px auto; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .documentList::after { content: ""; display: block; width: 257px; } .documentList__item { width: 257px; } .documentList__item:last-child{ margin-bottom:15px; } } /*202101追記*/ .documentList.new .documentList__item{ background: #fff; } .documentList.new .documentList__item.pickup{ background: #ffffff url("../img/pickup.png") no-repeat right top; background-size:100%; } .documentList.new .documentList__item a{ display: block; width: 100%; height: 100%; position: relative; } .documentList.new .documentList__item .icon{ position: absolute; bottom: 10px; right: 15px; width: 22px; } .documentList.new .documentList__item .img-box{ padding: 32px 0 6px; width: 70%; margin-left: auto; margin-right: auto; } .documentList.new .documentList__item .text-box{ padding: 10px 10px 15px; position: relative; } .documentList.new .documentList__item .name-box{ overflow: hidden; height: calc(1.3em * 2); position: relative; line-height: 1.3em; margin-top: 15px; } .documentList.new .documentList__item .name-box p{ font-size: 14px; color: #4C4948; /*position: absolute; width: 100%; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);*/ font-weight: 700; } .documentList.new .documentList__item .info-box{ overflow: hidden; height: calc(1.3em * 3); position: relative; line-height: 1.3em; margin-top: 5px; padding-bottom: 18px; } .documentList.new .documentList__item .info-box p{ font-size: 12px; letter-spacing: -0.04em; } .documentList.new .documentList__item .day-box{ margin-top: 12px; } .documentList.new .documentList__item .day-box p{ color:#ADADAD; font-size: 11px; } .taglist{ font-size: 0; white-space:nowrap; } .taglist li{ display: inline-block; margin-right: 1.8%; border-radius: 2px; padding:0.5% 2%; color:#fff; font-size: 12px; text-align: center; font-weight: 700; box-sizing: border-box; } .taglist li:last-child{ margin-right: 0; } .taglist li.medical{ background:#DD6F91; } .taglist li.product{ background:#D19713; } .taglist li.logistics{ background:#B06F2B; } .taglist li.shop{ background:#539435; } .taglist li.financial{ background:#834F9C; } .taglist li.other{ background:#3D97D3; } .taglist li.maintenance{ background:#3D97D3; } .taglist li.brother{ background:#004898; } .taglist li.genre{ background:#7D7D7E; } .taglist li.end{ background:#C9CACA; color: #231815; } @media screen and (max-width: 640px) { /*202101追記*/ .documentList.new .documentList__item{ background: #fff; } .documentList.new .documentList__item .text-box{ padding: 16px 16px 25px; position: relative; } .documentList.new .documentList__item .img-box{ padding: 50px 0 6px; } .documentList.new .documentList__item .icon{ position: absolute; bottom: 15px; right: 15px; width: 10%; } .documentList.new .documentList__item .name-box{ overflow: hidden; height: calc(1.8em * 2); position: relative; line-height: 1.8em; margin-top: 15px; } .documentList.new .documentList__item .name-box p{ font-size: 5.0vw; color: #4C4948; /*position: absolute; width: 100%; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);*/ font-weight: 700; } .documentList.new .documentList__item .info-box{ overflow: hidden; height: calc(2.0em * 3); position: relative; line-height: 2.0em; margin-top: 10px; padding-bottom: 28px; } .documentList.new .documentList__item .info-box p{ font-size: 4.0vw; } .documentList.new .documentList__item .day-box{ margin-top: 12px; } .documentList.new .documentList__item .day-box p{ color:#ADADAD; font-size: 3.9vw; } .taglist li{ display: inline-block; font-size: 4.2vw; } }