.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: 901px) { /*.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: 900px) { /*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; } } .head-img-in{ margin-bottom: 0px; } .link-list{ width: 100%; padding-top: 32px; padding-bottom: 22px; margin-bottom: 80px; text-align: center; background:#F5F6F7 ; } .list-ttl{ text-align: center; line-height: 1; margin-bottom: 50px; color: #fff; font-weight: 700; font-size: 23px; padding-top: 10px; padding-bottom: 10px; } .link-list { text-align: center; } .link-list li{ display: inline-block; margin-right: 24px; margin-bottom: 10px; position: relative; } .link-list li a{ padding-left: 12px; font-size: 16px; color: #333; font-weight: 700; } .link-list li .icon{ width: 20px; margin-left: 6px; display: inline-block; vertical-align: middle; margin-top: -3px; line-height: 1; } .link-list li .icon img{ display: block; width: 100%; } @media screen and (max-width: 900px) { .head-img-in{ margin-bottom: 0px; } .link-list{ padding-top: 8.5vw; padding-bottom: 2.6vw; width: 100%; margin-bottom: 18.6vw; } .link-list li{ display:inline-block; margin-right: 3.2vw; margin-left: 3.2vw; margin-bottom:5.3vw; position: relative; } .link-list li a{ font-size: 4.6vw; } .link-list li .icon{ width: 5.3vw; margin-left:1.6vw; display: inline-block; vertical-align: middle; margin-top: -3px; line-height: 1; } } .select-listbox{ padding-bottom: 114px; } .select-listboxsub{ padding-bottom: 80px; } .list-box{ border: 1px solid #767676; } .list-box li{ border-bottom: 1px solid #767676; display: flex; } .list-box li:last-child{ border-bottom: none; } .list-box li:nth-child(2n){ background:#fff; } .list-box li:nth-child(2n+1){ background:#F5F6F7; } .list-box li:first-child{ background:#E6E6E6; font-weight: 700; } .list-box li .box{ width: 20%; padding: 16px 16px; font-size: 16px; line-height: 1.6em; border-right: 1px solid #767676; position: relative; box-sizing: border-box; } .list-box li .box:last-child{ border-right: none; } .list-box.ptn2 li .box:last-child{ width: 40%; } .list-box li .box .item-name{ font-size: 16px; line-height: 1.6em; margin-bottom: 16px; text-align: center; } .list-box li .box .item-name a{ color: #0D2EA1; text-decoration: underline; font-weight: 700; } .list-box li .box .link-btn-sp{ display: none; } .list-box li .box .item-img{ width: 100%; max-width: 160px; margin-left: auto; margin-right: auto; text-align: center; } .list-box li .box .item-img img{ max-width: 100%; height: auto; } .list-box li .box .link-btn-pc{ position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); width: 87%; margin-left: auto; margin-right: auto; } .list-box li .box .link-btn-pc a{ padding: 12px 20px 12px 20px; display: block; background: #0D2EA1; color: #fff; font-weight: 700; position: relative; border-radius: 3px; box-sizing: border-box; } .list-box li .box .link-btn-pc a .icon{ width: 8px; position: absolute; right: 17px; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); } .list-box li .box .link-btn-pc a .icon img{ width: 100%; display: block; } .link-area{ padding-top: 170px; margin-top: -170px; } .link-area.pl{ padding-top: 110px; margin-top: -110px; } @media screen and (max-width: 900px) { .select-listbox{ padding-bottom: 26.6vw; } .select-listboxsub{ padding-bottom: 18.6vw; } .list-box{ border-top: 1px solid #767676; border-left: none; border-right: none; } .list-box li{ border-bottom: 1px solid #767676; display:block; border-left: 1px solid #767676; border-right: 1px solid #767676; } .list-box li:last-child{ border-bottom: none; } .list-box li:first-child{ display: none; } .list-box li .box{ width: 100%; padding: 4.2vw 4.2vw; font-size: 4.2vw; line-height: 1.6em; border-right:0; border-bottom: 1px solid #767676; } .list-box li .box:last-child{ border-bottom: none; } .list-box.ptn2 li .box:last-child{ width: 100%; } .list-box li .box:nth-child(2){ display: none; } .list-box li .box .item-name{ font-size: 4.2vw; line-height: 1.6em; margin-bottom:2.1vw; text-align: center; } .list-box li .box .link-btn-sp{ display: none; } .list-box li .box .sp-flex{ display: flex; justify-content: space-between; align-items: center; } .list-box li .box .item-img{ width: 46.5%; max-width: none; margin-left: 0; margin-right: 0; text-align: center; } .list-box li .box .item-img img{ max-width: 100%; height: auto; } .list-box li .box .link-btn-sp{ width: 50.8%; display: block; text-align: left; } .list-box li .box .link-btn-sp a{ padding: 3.2vw 5.3vw; display: block; background: #0D2EA1; color: #fff; font-weight: 700; position: relative; border-radius: 1vw; box-sizing: border-box; } .list-box li .box .link-btn-sp a .icon{ width: 1.6vw; position: absolute; right: 4vw; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); } .list-box li .box .link-btn-sp a .icon img{ width: 100%; display: block; } .link-area{ padding-top: 32vw; margin-top: -32vw; } .link-area.pl{ padding-top: 22.6vw; margin-top: -22.6vw; } }