.main { } .rentalArea { background: #EEEFF0; padding: 30px 20px; } .rentalArea__heading { text-align: center; } .rentalArea__heading img { max-width: 100%; height: auto; } .rentalArea__heading .pc { display: none; } .rentalList { margin: 15px auto; } .rentalList .rentalList__item{ background: #fff; } .rentalList .rentalList__item:not(:last-child) { margin: 0 0 15px; } .rentalList .rentalList__item img { width: 100%; height: auto; } .no_result { padding: 15px; background: #EDEFF0; } @media screen and (min-width: 641px) { /*.main { width: 885px; }*/ .rentalArea__heading .sp { display: none; } .rentalArea__heading .pc { display: inline; } .rentalArea { padding: 40px 37px; } .rentalList { margin: 0px 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; } .rentalList::after { content: ""; display: block; width: 310px; } .rentalList .rentalList__item { width: 310px; } .rentalList .rentalList__item:last-child{ margin-bottom:15px; } } /*202101追記*/ .rentalList .rentalList__item{ background: #fff; } .rentalList .rentalList__item.pickup{ background-size:100%; } .rentalList .rentalList__item a{ display: block; width: 100%; height: 100%; position: relative; } .rentalList .rentalList__item .icon{ position: absolute; bottom: 10px; right: 15px; width: 22px; } .rentalList .rentalList__item .img-box{ padding: 32px 0 6px; width: 70%; margin-left: auto; margin-right: auto; } .rentalList .rentalList__item .text-box{ padding: 10px 10px 15px; position: relative; } .rentalList .rentalList__item .name-box{ overflow: hidden; height: calc(1.3em * 2); position: relative; line-height: 1.3em; margin-top: 15px; } .rentalList .rentalList__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; } .rentalList .rentalList__item .info-box{ overflow: hidden; height: calc(1.3em * 3); position: relative; line-height: 1.3em; margin-top: 5px; padding-bottom: 18px; } .rentalList .rentalList__item .info-box p{ font-size: 12px; letter-spacing: -0.04em; } .rentalList .rentalList__item .day-box{ margin-top: 12px; } .rentalList .rentalList__item .day-box p{ color:#ADADAD; font-size: 11px; } .rentalList .rentalList__item .rental-box{ padding:10px 10px; } .rentalList .rentalList__item .rental-box .flex{ display: flex; align-items: center; } .rentalList .rentalList__item .rental-box .item-ttl{ font-size: 17px; width: 56%; margin-right: 2%; font-weight: 600;; word-break:keep-all; } .rentalList .rentalList__item .rental-box .item-ttl .sub{ display: block; font-size: 11px; line-height: 1.2; } .rentalList .rentalList__item .rental-box .item-cat{ background: #00276d; font-size: 15px; color:#fff; width: 42%; border-radius: 10px; padding:8px 8px; line-height: 1.5; height: calc(1.5em * 2); text-align: center; margin-bottom: 10px; position: relative; } .rentalList .rentalList__item .rental-box .item-cat p{ position: absolute; width: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); } .rentalList .rentalList__item .rental-box .item-list{ font-size: 16px; width: 50%; margin-right: 2%; } .rentalList .rentalList__item .rental-box .item-list li{ margin-bottom: 10px; border: 2px solid #bfbfbf; padding:3px 3px; line-height: 1.2; height: calc(1.2em * 3); text-align: center; font-size: 10px; font-weight: 600; position: relative; } .rentalList .rentalList__item .rental-box .item-list li.ex{ font-size: 9px; } .rentalList .rentalList__item .rental-box .item-list li.ex2{ line-height: 1.2; height: calc(1.2em * 1); } .rentalList .rentalList__item .rental-box .item-list li .mini{ font-size: 7px; display: block; margin-top: 3px; line-height: 1; } .rentalList .rentalList__item .rental-box .item-list li p{ position: absolute; width: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); } .rentalList .rentalList__item .rental-box .item-list li:last-child{ margin-bottom: 0; } .rentalList .rentalList__item .rental-box .item-pic{ width: 48%; } @media screen and (max-width: 640px) { /*202101追記*/ .spHeader img{ width: 100%; } .rentalList .rentalList__item{ background: #fff; } .rentalList .rentalList__item .text-box{ padding: 16px 16px 25px; position: relative; } .rentalList .rentalList__item .img-box{ padding: 50px 0 6px; } .rentalList .rentalList__item .icon{ position: absolute; bottom: 15px; right: 15px; width: 10%; } .rentalList .rentalList__item .name-box{ overflow: hidden; height: calc(1.8em * 2); position: relative; line-height: 1.8em; margin-top: 15px; } .rentalList .rentalList__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; } .rentalList .rentalList__item .info-box{ overflow: hidden; height: calc(2.0em * 3); position: relative; line-height: 2.0em; margin-top: 10px; padding-bottom: 28px; } .rentalList .rentalList__item .info-box p{ font-size: 4.0vw; } .rentalList .rentalList__item .day-box{ margin-top: 12px; } .rentalList .rentalList__item .day-box p{ color:#ADADAD; font-size: 3.9vw; } .rentalList .rentalList__item .rental-box .item-ttl{ font-size: 4.8vw; width: 56%; margin-right: 2%; font-weight: 600;; } .rentalList .rentalList__item .rental-box .item-cat{ background: #00276d; font-size: 3.9vw; color:#fff; width: 42%; border-radius: 10px; padding:8px 8px; line-height: 1.5; text-align: center; margin-bottom: 10px; } .rentalList .rentalList__item .rental-box .item-list{ font-size: 3.9vw; width: 50%; margin-right: 2%; } .rentalList .rentalList__item .rental-box .item-list li{ margin-bottom: 10px; border: 2px solid #bfbfbf; padding:3px 3px; line-height: 1.2; height: calc(1.2em * 3); text-align: center; font-size: 3.0vw; font-weight: 600; position: relative; } .rentalList .rentalList__item .rental-box .item-ttl .sub{ display: block; font-size: 3.0vw; line-height: 1.2; } .rentalList .rentalList__item .rental-box .item-list li.ex{ font-size: 2.3vw; } .rentalList .rentalList__item .rental-box .item-list li .mini{ font-size: 2.3vw; display: block; margin-top: 3px; line-height: 1; } }