@charset "UTF-8"; .main { } .caseList { padding: 15px; background: #EDEFF0; } .caseList__item { margin: 0 0 15px; } .caseList__item img { width: 100%; height: auto; } .no_result { } /*展示会バナー修正用に追記*/ .modal-content .detailClose { bottom: 15px; right: 15px; } /*イベント用追記*/ .seminer-box .main-img img{ width: 100%; } .seminer-box .main-img{ margin-top: 20px; margin-bottom: 20px; } .link-list{ text-align: center; font-size: 0; } .link-list li{ width: 100%; max-width: none; display: inline-block; border-right:none; padding-top: 5%; margin-bottom: 12%; } .link-list li:last-child{ border-right:none; margin-bottom: 5%; } .link-list li .list-img{ width: 70%; max-width: 196px; margin-left: auto; margin-right: auto; margin-bottom: 30px; } .link-list li .list-img img,.link-list li .list-btn img{ max-width: 100%; } .link-list li .list-txt{ font-size: 12px; line-height: 1.5; margin-bottom: 20px; } .link-list li .list-btn{ width: 76%; max-width: 216px; margin-left: auto; margin-right: auto; } } /*202101追記*/ .caseList.new .caseList__item{ background: #fff; } .caseList.new .caseList__item a{ display: block; width: 100%; height: 100%; } .caseList.new .caseList__item .text-box{ padding: 10px 10px 15px; position: relative; } .caseList.new .caseList__item .icon{ position: absolute; bottom: 15px; right: 15px; width: 22px; } .caseList.new .caseList__item .name-box{ overflow: hidden; height: calc(1.3em * 2); position: relative; line-height: 1.3em; margin-top: 15px; margin-bottom: 5px; } .caseList.new .caseList__item .name-box p{ font-size: 13px; /*position: absolute; width: 100%; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);*/ font-weight: 700; } .caseList.new .caseList__item.medical .name-box p{ color:#DD6F91; } .caseList.new .caseList__item.product .name-box p{ color:#D19811; } .caseList.new .caseList__item.logistics .name-box p{ color:#B06F2B; } .caseList.new .caseList__item.shop .name-box p{ color:#539435; } .caseList.new .caseList__item.financial .name-box p{ color:#834F9C; } .caseList.new .caseList__item.maintenance .name-box p{ color:#3D97D3; } .caseList.new .caseList__item.other .name-box p{ color:#5AB9D9; } .caseList.new .caseList__item .info-box{ overflow: hidden; height: calc(1.3em * 2.9); position: relative; line-height: 1.3em; /*margin-top: 5px;*/ } .caseList.new .caseList__item .info-box p{ font-size: 12px; color: #4C4948; } .caseList.new .caseList__item .cat-box{ margin-top: 12px; height: calc(1.3em * 2); line-height: 1.3em; } .caseList.new .caseList__item .cat-box p{ color:#ADADAD; font-size: 11px; } .caseList.new .caseList__item .cat-box p::before{ content: "● "; } .caseList.new .caseList__item.medical .cat-box p::before{ color:#DD6F91; } .caseList.new .caseList__item.product .cat-box p::before{ color:#D19811; } .caseList.new .caseList__item.logistics .cat-box p::before{ color:#B06F2B; } .caseList.new .caseList__item.shop .cat-box p::before{ color:#539435; } .caseList.new .caseList__item.financial .cat-box p::before{ color:#834F9C; } .caseList.new .caseList__item.maintenance .cat-box p::before{ color:#3D97D3; } .caseList.new .caseList__item.other .cat-box p::before{ color:#5AB9D9; } .caseList.new .caseList__item .day-box{ margin-top: 12px; } .caseList.new .caseList__item .day-box p{ color:#ADADAD; font-size: 11px; } .taglist{ font-size: 0; } .taglist li{ display: inline-block; width: 49%; margin-right: 1.5%; border-radius: 3px; padding:3px 0px; color:#fff; font-size: 11px; 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.maintenance{ background:#3D97D3; width: 60%; } .taglist li.other{ background:#5AB9D9; } .taglist li.brother{ background:#004898; } .taglist li.genre{ background:#7D7D7E; } .taglist li.end{ background:#C9CACA; color: #231815; } @media screen and (max-width: 640px) { /*202101追記*/ .caseList.new .caseList__item{ background: #fff; } .caseList.new .caseList__item .text-box{ padding: 16px 16px 25px; position: relative; } .caseList.new .caseList__item .icon{ position: absolute; bottom: 15px; right: 15px; width: 10%; } .caseList.new .caseList__item .name-box{ overflow: hidden; height: calc(1.8em * 2); position: relative; line-height: 1.8em; margin-top: 15px; margin-bottom: 5px; } .caseList.new .caseList__item .name-box p{ font-size: 5.0vw; /*position: absolute; width: 100%; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);*/ font-weight: 700; } .caseList.new .caseList__item .info-box{ overflow: hidden; height: calc(2.0em * 2.9); position: relative; line-height: 2.0em; /*margin-top: 5px;*/ } .caseList.new .caseList__item .info-box p{ font-size: 4.4vw; font-size: 4.4vw; } .caseList.new .caseList__item .cat-box{ margin-top: 12px; height: calc(1.8em * 2); line-height: 1.8em; } .caseList.new .caseList__item .cat-box p{ color:#ADADAD; font-size: 3.9vw; } .caseList.new .caseList__item .day-box{ margin-top: 12px; } .caseList.new .caseList__item .day-box p{ color:#ADADAD; font-size: 3.9vw; } .taglist{ font-size: 0; } .taglist li{ display: inline-block; width: 49%; margin-right: 1.5%; border-radius: 3px; padding:3px 5px; color:#fff; font-size: 5.0vw; text-align: center; font-weight: 700; box-sizing: border-box; } } @media screen and (min-width: 641px) { .caseList { padding: 30px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-sizing: border-box; box-sizing: border-box; } .caseList__item { width: 209px; background:#fff; } .caseList::after { content: ""; display: block; width: 209px; } }