@charset "UTF-8"; /* CSS Document */ /* 基本-モバイルファースト ======================================================================================================== */ #detail_header{ margin-bottom: 20px; } #detail_header .title h3{ font-size: 6vw; font-weight: bold; } #detail_header .title .bom{ margin-bottom: 10px; } #detail_header .title .bom ul{ display: flex; } #detail_header .title .bom li{ display: inline-block; line-height: 1; color: #fff; padding: 5px; margin-right: 10px; } #detail_header .title .bom li.parking{ background-color: #006699; } #detail_header .title .bom li.kidsroom{ background-color: #ff6633; } #detail_header .mail{ text-align: right; } #detail_header .mail a{ display: block; color: #16376e; font-weight: bold; } #detail_header .mail a::before{ content: ""; display: inline-block; vertical-align: middle; background-image: url(images/icon-mail.svg); background-repeat: no-repeat; background-position: left top; background-size: 100%; width: 30px; height: 21px; margin-right: 5px; } #cath_copy{ font-weight: bold; margin-bottom: 20px; } #information .main_photo{ background-color: #eee; text-align: center; margin-bottom: 10px; } #information .photo_list{ display: flex; justify-content: space-between; margin-bottom: 10px; } #information .photo_list li{ width: 49%; } #information .text address{ display: flex; align-items: center; } #information .text address .icon{ line-height: 1; } #information .text address .icon img{ height: 5vw; margin-right: 5px; } #information .text address a{ font-size: 5vw; font-weight: bold; text-decoration: underline; } #information .info_menu{ margin-top: 10px; display: flex; flex-wrap: wrap; justify-content: space-between; } #information .info_menu li{ width: 49%; margin-top: 2%; } #information .info_menu li a{ display: block; color: #fff; background-color: #e88d9e; text-align: center; padding: 10px 0; } #information .info_menu li:nth-child(1) a{ background-color: #e88d9e; } #information .info_menu li:nth-child(2) a{ background-color: #b08ecd; } #information .info_menu li:nth-child(3) a{ background-color: #82babb; } #information .info_menu li:nth-child(4) a{ background-color: #e6a490; } #information .info_menu li a::before{ border-color: #fff; } #staff_comment .photo{ float: left; margin-right: 10px; margin-bottom: 10px; } #staff_comment .photo img{ max-width: 150px; max-height: 150px; } #staff_comment .text .name{ text-align: right; margin-top: 10px; } #access iframe{ vertical-align: top; } #access .carnavi{ background-color: #5eaccd; color: #fff; padding: 10px; text-align: center; } #access .carnavi dt{ display: inline-block; line-height: 1; padding: 5px; margin-bottom: 5px; border: solid 1px #fff; } #access .carnavi dd{ display: block; font-weight: bold; } #recommend{ border: none !important; border-bottom: none !important; margin-bottom: 20px; } #recommend_inner{ display: flex; flex-wrap: wrap; justify-content: space-between; } #recommend .koma{ width: 49%; height: auto; } #recommend .koma .komaIn{ width: auto; margin: 10px 10px 20px; } #recommend .koma .komaIn .detail_link{ width: 100%; left: 0; bottom: 5px; } #recommend .koma .komaIn .detail_link a{ bottom: inherit; display: block; background-color: #183964; color: #fff; line-height: 1; margin: 0 5px; padding: 5px; border-radius: 5px; text-align: center; } #recommend .koma .komaIn .detail_link a::before{ content: "\304F\308F\3057\304F\898B\308B"; display: block; } #recommend .koma .komaIn .detail_link a img{ display: none; } #search_btn_box ul{ } #search_btn_box li{ margin-bottom: 10px; } #search_btn_box li:last-child{ margin-bottom: 0; } #search_btn_box li a{ display: flex; align-items: center; background-color: #eee; } #search_btn_box li a p{ flex: 1; font-weight: bold; text-align: center; } #search_btn_box li a::after{ content: ""; display: block; background-repeat: no-repeat; background-position: left top; width: 150px; height: 100px; } #search_btn_box li.btn_new a::after{ background-image: url(images/search_btn-new.jpg); background-image: -webkit-image-set(url(images/search_btn-new.jpg) 1x, url(images/search_btn-new@2x.jpg) 2x); } #search_btn_box li.btn_pricedown a::after{ background-image: url(images/search_btn-new.jpg); background-image: -webkit-image-set(url(images/search_btn-pricedown.jpg) 1x, url(images/search_btn-pricedown@2x.jpg) 2x); } #search_btn_box li.btn_station a::after{ background-image: url(images/search_btn-new.jpg); background-image: -webkit-image-set(url(images/search_btn-station.jpg) 1x, url(images/search_btn-station@2x.jpg) 2x); } #search_btn_box li.btn_reform a::after{ background-image: url(images/search_btn-new.jpg); background-image: -webkit-image-set(url(images/search_btn-reform.jpg) 1x, url(images/search_btn-reform@2x.jpg) 2x); } #voice{ background-color: #eff7fa; padding-top: 5vw; padding-bottom: 5vw; position: relative; } #voice::before{ content: ""; display: block; background-image: url(images/voice_copy.png); background-image: -webkit-image-set(url(images/voice_copy.png) 1x, url(images/voice_copy@2x.png) 2x); background-repeat: no-repeat; background-position: left top; background-size: 100%; width: 100px; height: 57px; position: absolute; right: 5vw; top: -40px; } #voice .sub_title::after{ background-color: #5eaccd; } #voice .sub_title + p{ text-align: center; } /* PCのみ======================================================================================================== */ @media print and (min-width: 751px), screen and (min-width: 751px){ #detail_header{ margin-bottom: 40px; display: flex; justify-content: space-between; align-items: center; } #detail_header .title{ display: flex; align-items: center; } #detail_header .title h3{ font-size: 30px; margin-right: 1em; } #detail_header .title .bom{ margin-bottom: 0px; } #detail_header .mail a{ font: 16px; } #cath_copy{ font-size: 18px; margin-bottom: 40px; } #information{ display: flex; justify-content: space-between; align-items: flex-start; } #information .main_photo{ width: 40%; max-width: 900px; margin-bottom: 0px; } #information .main_photo img{ width: 100%; } #information .main_photo.vertical img{ width: 66.66%; } #information .text { width: 55%; } #information .photo_list{ justify-content: flex-start; margin-bottom: 20px; } #information .photo_list li{ width: auto; margin-bottom: 0px; margin-right: 20px; } #information .photo_list li:last-child{ margin-right: 0; } #information .text p{ font-size: 16px; } #information .text address .icon img{ height: 40px; } #information .text address a{ text-decoration: none; } #information .text address a{ font-size: 40px; } #information .info_menu{ justify-content: flex-start; } #information .info_menu li{ width: 24%; margin-top: 0; margin-right: 1.333%; } #information .info_menu li:last-child{ margin-right: 0; } #staff_comment .photo{ margin-right: 40px; } #staff_comment .photo img{ max-width: 240px; max-height: 240px; } #staff_comment .text{ font-size: 16px; } #access iframe{ height: 500px; } #access .carnavi{ padding: 20px; display: flex; justify-content: center; align-items: center; } #access .carnavi dt{ font-size: 20px; margin-right: 1em; } #access .carnavi dd{ font-size: 30px; } #recommend{ margin-bottom: 80px; } #recommend_inner{ } #recommend .koma{ width: 15%; } #recommend .koma .komaIn{ margin: 10px 10px 30px; } #recommend .koma .komaIn .detail_link{ bottom: 10px; } #recommend .koma .komaIn .detail_link a{ margin: 0 10px; /* padding: 0 10px; */ } /* #recommend .koma:nth-child(n+5){ display: none; visibility: hidden; } */ #search_btn_box ul{ display: flex; justify-content: space-between; } #search_btn_box li{ margin-bottom: 0; width: 24%; } #voice::before{ width: 197px; height: 112px; right: 28%; top: -30px; } }