@charset "UTF-8"; /* CSS Document */ /* 基本-モバイルファースト ======================================================================================================== */ #map_search dt{ background-color: #b3203a; color: #fff; font-weight: bold; padding: 10px 0; } #map_search dt::after{ border-color: #fff; right: 20px; } #map_search dd{ } #map_search .pin{ text-align: left; } #map_search .pin li a{ display: block; } #map_search .pin li a::before{ content: ""; display: inline-block; vertical-align: middle; background-image: url(images/map_pin.svg); background-repeat: no-repeat; background-position: left top; background-size: 100%; color: #fff; font-size: 10px; line-height: 18px; font-weight: bold; text-align: center; width: 14px; height: 20px; box-sizing: border-box; } #map_search .pin li:nth-child(1) a::before{ content: "1"; } #map_search .pin li:nth-child(2) a::before{ content: "2"; } #map_search .pin li:nth-child(3) a::before{ content: "3"; } #map_search .pin li:nth-child(4) a::before{ content: "4"; } #map_search .pin li:nth-child(5) a::before{ content: "5"; } #map_search .pin li:nth-child(6) a::before{ content: "6"; } #map_search .pin li:nth-child(7) a::before{ content: "7"; } #map_search .pin li:nth-child(8) a::before{ content: "8"; } #map_search .pin li a p{ display: inline-block; vertical-align: middle; font-weight: bold; } #map_search .map{ position: relative; } #map_search .map .pin li{ position: absolute; z-index: 100; } #map_search .map .pin li:nth-child(1){ bottom: 6%; left: 72.8%; } #map_search .map .pin li:nth-child(2){ bottom: 19%; left: 53.8%; } #map_search .map .pin li:nth-child(3){ bottom: 47%; left: 74.3%; } #map_search .map .pin li:nth-child(4){ bottom: 54%; left: 74.3%; } #map_search .map .pin li:nth-child(5){ bottom: 82%; left: 49.5%; } #map_search .map .pin li:nth-child(6){ bottom: 59.5%; left: 46.5%; } #map_search .map .pin li:nth-child(7){ bottom: 89.5%; left: 24.5%; } /* #map_search .map .pin li:nth-child(8){ bottom: 89.5%; left: 24.5%; } */ #map_search .map .pin li a p{ display: none; } #map_search .text{ padding: 5vw; } #map_search .text .pin{ display: flex; flex-wrap: wrap; } #map_search .text .pin li{ width: 50%; margin-top: 1em; } #map_search .text .pin li:nth-child(-n+2){ margin-top: 0; } #map_search .text .pin li a p{ margin-left: 5px; } #map_search .text .pin li a p span{ display: none; } #shop_list article{ padding-bottom: 20px; margin-bottom: 20px; border-bottom: solid 1px #ddd; } #shop_list article:last-child{ padding-bottom: 0px; margin-bottom: 0px; border-bottom: none; } #shop_list article .photo{ text-align: center; } #shop_list article .photo img{ width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; } #shop_list article .text{ margin-bottom: 10px; } #shop_list article .text h3{ font-size: 6vw; font-weight: bold; } #shop_list article .text address{ display: flex; align-items: center; } #shop_list article .text address .icon{ line-height: 1; } #shop_list article .text address .icon img{ height: 5vw; margin-right: 5px; } #shop_list article .text address a{ font-size: 5vw; font-weight: bold; text-decoration: underline; } #shop_list article .text .bom ul{ display: flex; } #shop_list article .text .bom li{ display: inline-block; line-height: 1; color: #fff; padding: 5px; margin-right: 10px; } #shop_list article .text .bom li.parking{ background-color: #006699; } #shop_list article .text .bom li.kidsroom{ background-color: #ff6633; } #shop_list article .btn_wrap{ display: flex; justify-content: space-between; } #shop_list article .btn_wrap .btn{ width: 49%; } #shop_list article .btn_wrap .btn a{ display: block; border: solid 1px #999; color: #999; padding: 10px; text-align: center; } /* PCのみ======================================================================================================== */ @media print and (min-width: 751px), screen and (min-width: 751px){ #map_search dt{ font-size: 30px; padding: 20px 0; } #map_search dt::after{ width: 30px; height: 30px; right: 3vw; } #map_search dd{ } #map_search .inner{ display: flex; } #map_search .pin li a::before{ font-size: 20px; line-height: 30px; width: 28px; height: 40px; } #map_search .map{ width: 800px; } #map_search .map .pin li a::before{ transition: all 0.2s ease; } #map_search .map .pin li a:hover::before, #map_search .map .pin li.hover a::before{ transform: scale(1.3); transform-origin: bottom; } #map_search .text{ padding: 3vw; } #map_search .text .pin{ display: block; } #map_search .text .pin li{ width: 100%; font-size: 24px; margin-top: 1em; } #map_search .text .pin li:nth-child(2){ margin-top: 1em; } #map_search .text .pin li a{ } #map_search .text .pin li a:hover, #map_search .text .pin li.hover a{ transform: scale(1.1); color: #b3203a; } #map_search .text .pin li a p{ margin-left: 10px; } #map_search .text .pin li a p span{ display: inline; } #shop_list article{ padding-bottom: 60px; margin-bottom: 60px; display: flex; align-items: center; } #shop_list article .photo{ width: 300px; } #shop_list article .photo img{ width: auto; max-height: 300px; aspect-ratio: inherit; } #shop_list article .text{ margin: 0 20px; flex: 1; } #shop_list article .text h3{ font-size: 30px; } #shop_list article .text address .icon img{ height: 30px; } #shop_list article .text address a{ text-decoration: none; } #shop_list article .text address a{ font-size: 30px; } #shop_list article .text p{ font-size: 16px; } #shop_list article .btn_wrap{ display: block; width: 260px; } #shop_list article .btn_wrap .btn{ width: 100%; margin-top: 20px; } #shop_list article .btn_wrap .btn:first-child{ margin-top: 0px; } #shop_list article .btn_wrap .btn a{ padding: 20px; } #shop_list article .btn_wrap .btn a:hover{ background-color: #999; color: #fff; } }