/* date UI */ input[type='date'], input[type='time'] { appearance: none; } input[type='date'] { aspect-ratio: 144/36; } input[type='time'] { aspect-ratio: 128/36; } input[type='date']::-webkit-calendar-picker-indicator { position: absolute; z-index: 2; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; } input[type='date']::-webkit-inner-spin-button { -webkit-appearance: none; } input[type='date']::-webkit-clear-button { -webkit-appearance: none; } input[type='date'] { position: relative; } /* firefox用 */ input[type='date']::-moz-calendar-picker-indicator { -moz-appearance: none; /* position: absolute; z-index: 2; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; */ } input[type='date']::-moz-inner-spin-button { -moz-appearance: none; } input[type='date']::-moz-clear-button { -moz-appearance: none; } #wrap_ui_date { display: grid; grid-template-columns: 33.5% 66.5%; max-width:1000px; height: 60px; margin: 0 auto 2.5rem;/* 40px */ border-radius: 1rem; position: relative; background-color: white; border-top-left-radius: 1rem; border-bottom-left-radius: 1rem; } #wrap_ui_date h2 { line-height: 60px; padding: 0; font-size: clamp(0.625rem, calc(0.625rem + 0.6vw), 1.25rem); font-weight: bold; margin-bottom:0; border-top:none; border-bottom:none; text-align: center; background-color:var(--color-kk-dark-blue); color: #fff; border-top-left-radius: 1rem; border-bottom-left-radius: 1rem; } #wrap_ui_another #wrap_ui_date h2:before { content: ""; display: none; } #wrap_ui_date h2 img, #nav_ui_place button img { margin-right:0.33em; } #wrap_ui_date button { height: 2.25rem; font-size: clamp(10px, calc(10px + 1vw), 1rem); } #wrap_2_dates { display: flex; align-items: center; } #wrap_2_dates div.wrap_date, #wrap_2_dates button { width: 9rem; text-align: left; margin-left: 1.125rem; } #wrap_2_dates div.wrap_time { display: inline-block; width: 8rem; margin-left: 1.125rem; } #wrap_2_dates input { display: block; width: 100%; height: 2.25rem; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 1em; margin-bottom: 0; line-height: 2.25rem; border: 1px solid #ccc; border-radius: 0.25rem; box-sizing: border-box; color:#666; background-color: transparent; text-align: center; font-size: clamp(0.625rem, calc(0.625rem + 0.5vw), 1.125rem); } #wrap_2_dates input:disabled { opacity: 0.66; } #wrap_2_dates button { padding-left: 0; padding-right: 0; margin: 0 0 0 1.125rem; font-weight: normal; } #wrap_2_dates input::-webkit-calendar-picker-indicator { display: none; } input[type=date], input[type=time], input[type=datetime-local] { min-width:36px; min-height:36px; } #wrap_2_dates div.wrap_date { position: relative; display: flex; } div.wrap_date i { position: absolute; z-index: -1; width: 0.5rem; height: 0.5rem; border-right: 0.1rem solid #999; border-bottom: 0.1rem solid #999; transform: rotate(45deg); } div.wrap_date i { top:0.7rem; right:0.6rem; } #ui_d_ymd { background-image: url(/customdir/img/icon/date.svg); background-size: 1em; background-position: 0.5em center; background-repeat: no-repeat; } #ui_d_hm { background-image: url(/customdir/img/icon/time.svg); background-size: 1em; background-position: 0.5em center; background-repeat: no-repeat; } @media screen and (max-width:639.99px) { #ui_d_ymd, #ui_d_hm { background-image: none; } #wrap_2_dates input { padding-left: 0; } } @media screen and (max-width:767.99px) { #wrap_ui_a_b { padding: 1.13rem calc(50vw - 47%); } #wrap_ui_date { display: block; margin-bottom: 0.875rem; height: auto; border-radius: 0.875rem; } #wrap_ui #wrap_ui_date h2 { line-height: 1; text-align: left; padding: 1em; border-top-left-radius: 0.875rem; border-top-right-radius: 0.875rem; border-bottom-left-radius: 0; } #wrap_2_dates { line-height: 1.5; padding-left:0.75em; position: static; left:0; display: flex; padding: 0.875rem; } #wrap_2_dates div.wrap_date:first-child { margin-left: 0; } #wrap_2_dates input { font-size: 1rem; } }   /* UI without date */ #wrap_ui_another h2 { color: var(--color-mono-text2); } /* feels UI */ #wrap_ui_c h2 { padding-left: 0; font-weight: bold; margin-bottom: 0; border-top:none; border-bottom:none; } #feels_header_notice { font-size:0.774rem; font-weight: normal; margin-left: 1em; } @media screen and (max-width:767.99px) { #feels_header_notice { display: none; } } .wrap_feel_category { display: grid; grid-template-columns: 207px 1fr; background-color: white; } .wrap_feel_category h3 { background-color: white; color: var(--color-mono-dark); font-size: 1rem; font-weight: normal; margin-top: 0; margin-bottom: 0; padding: 1.33rem 1rem; border-bottom:1px solid var(--color-kk-light-indigo); border-radius: 0; } .wrap_feel_category h3:after { content: none; } .wrap_feel_category h3 img { margin-right: 0.33em; } .wrap_feel_category > div { padding-top: 0.75rem; padding-bottom: 0.75rem; border-bottom:1px solid var(--color-mono-blight); } .wrap_feel_category:first-of-type h3 { border-top:1px solid var(--color-kk-light-indigo); } .wrap_feel_category:first-of-type > div { border-top:1px solid var(--color-mono-blight); } /* 末尾のチェックボックス（OR検索スイッチ） */ #wrap_toggle_feeltype { margin-top: 3.125rem; margin-bottom: 0; text-align: center; } #toggle_feeltype.btn.checkbox-ui { width: 100%; border: 1px solid var(--color-accent) !important; border-radius: 0; margin: 0; padding: 1em; /* background-color: white;*/ font-size: clamp(0.625rem, calc(0.625rem + 1vw), 1.13rem); } #toggle_feeltype.btn[data-toggle].checkbox-ui { background-color: white !important; } #toggle_feeltype.btn[data-toggle].checkbox-ui:hover { background-color: white !important; border-color:var(--color-accent-hover) !important; } #toggle_feeltype.btn.checkbox-ui[data-toggle=on]:before { background-color: var(--color-accent); } #wrap_toggle_feeltype small { display: block; text-align: left; } @media screen and (max-width:767.99px) { #wrap_ui_c { padding-left: 0.875rem; padding-right: 0.875rem; } .wrap_feel_category { display: block; } .wrap_feel_category h3 { font-size: 0.875rem; padding: 0.875rem 0; border-bottom:1px solid var(--color-mono-blight); } .wrap_feel_category > div { padding-left: 0.125rem; padding-right: 0.125rem; border-bottom:1px solid var(--color-kk-light-indigo); } .wrap_feel_category button { position: relative; /* left: -1rem;*/ text-indent: -1rem; text-align: left; } #wrap_close_feel { padding: 1.33rem; text-align: center; } #wrap_close_feel button { color: var(--color-kk-light-indigo); background-color: white; border:1px solid var(--color-kk-light-indigo); border-radius: 2rem; font-weight: bold; padding: 1rem; } }   /* filters UI */ /* カードブランド選択（専門医選択は未公開） */ #wrap_ui_e { display: grid; grid-template-columns: 207px 1fr; width: 100%; } #wrap_ui_e h2 { padding-left: 0; font-weight: bold; margin-bottom: 0; border-top:none; border-bottom:none; } #wrap_ui_f h2 span { font-weight: normal; } #wrap_ui_e h3 { padding-left: 1.1em; font-size: 0.875rem; font-weight: bold; margin-bottom: 0; border-top:none; border-bottom:none; } #wrap_ui_e h3 span, #wrap_ui_e h2 span { font-weight: normal; } #wrap_ui_e h3:after { display: none; } @media screen and (max-width:767.99px) { #wrap_ui_e { display: block; padding-left: 0.875rem; padding-right: 0.875rem; } #wrap_ui_e span { display: none; } #wrap_ui_e button { position: relative; /* left: -1rem;*/ text-indent: -1rem; text-align: left; } } #wrap_filter_card { padding-left: 0; } /* 特長　胃カメラ対応など */ #wrap_ui_f { display: grid; grid-template-columns: 207px 1fr; width: 100%; padding-top: 1.375rem; } #wrap_ui_f h2 { padding-left: 0; font-weight: bold; margin-bottom: 0; border-top:none; border-bottom:none; } #wrap_ui_f h2 span { font-weight: normal; } @media screen and (max-width:767.99px) { #wrap_ui_f { display: block; padding-left: 0.875rem; padding-right: 0.875rem; padding-top: 0; } #wrap_ui_f button { position: relative; /* left: -1rem;*/ text-indent: -1rem; text-align: left; } } /* 特長ピックアップ */ #wrap_ui_d { display: grid; grid-template-columns: 207px 1fr; width: 100%; } #wrap_ui_d h2 { padding-left: 0; font-weight: bold; margin-bottom: 0; border-top:none; border-bottom:none; } #wrap_ui_d h2 span { font-weight: normal; } @media screen and (max-width:767.99px) { #wrap_ui_d { display: block; padding-left: 0.875rem; padding-right: 0.875rem; } .wrap_sp_2columns { display: grid; grid-template-columns: 1fr 1fr; } #wrap_ui_d button { position: relative; /* left: -1rem;*/ text-indent: -1rem; text-align: left; } }   /* specs UI */ #wrap_ui_b h2 { padding-left: 0; font-weight: bold; margin-bottom: 0; border-top:none; border-bottom:none; } .wrap_spec_category { display: grid; grid-template-columns: 207px 1fr; background-color: white; } .wrap_spec_category h3 { background-color: white; color: var(--color-mono-dark); font-size: 1rem; font-weight: normal; margin-top: 0; margin-bottom: 0; padding: 1.33rem 1rem; border-bottom:1px solid var(--color-kk-light-indigo); border-radius: 0; } .wrap_spec_category h3:after { content: none; } .wrap_spec_category h3 img { margin-right: 0.33em; } .wrap_spec_category > div { padding-top: 0.75rem; padding-bottom: 0.75rem; border-bottom:1px solid var(--color-mono-blight); } .wrap_spec_category:first-of-type h3 { border-top:1px solid var(--color-kk-light-indigo); } .wrap_spec_category:first-of-type > div { border-top:1px solid var(--color-mono-blight); } @media screen and (max-width:767.99px) { #wrap_ui_b { padding-left: 0.875rem; padding-right: 0.875rem; } .wrap_spec_category { display: block; } .wrap_spec_category h3 { font-size: 0.875rem; padding: 0.875rem 0; border-bottom:1px solid var(--color-mono-blight); } .wrap_spec_category > div { padding-left: 0.125rem; padding-right: 0.125rem; border-bottom:1px solid var(--color-kk-light-indigo); } .wrap_spec_category button { position: relative; /* left: -1rem;*/ text-indent: -1rem; text-align: left; } #wrap_close_spec { padding: 1.33rem; text-align: center; } #wrap_close_spec button { color: var(--color-kk-light-indigo); background-color: white; border:1px solid var(--color-kk-light-indigo); border-radius: 2rem; font-weight: bold; padding: 1rem; } }   /* fixed bottom submit UI */ .fix-bottom { display:block; position: fixed; bottom:0; left:0; height: 72px; margin-left: 0; margin-right: 0; padding:15px 0; z-index: 1000; will-change: opacity, transform; } .action_ui_logout { display: grid; grid-template-columns: 1fr 1fr; column-gap: 0.5rem; } .action_ui_login { display: grid; grid-template-columns: 1fr 1fr; column-gap: 0.5rem; } #search_clinic_form { width:100%; max-width: 34em; margin: 0 auto; padding: 0 0.625rem; } @media screen and (max-width:767.99px) { #search_clinic_form { max-width: auto; } } #search_clinic_form, .wrap_bottom_items, .action_ui_login, .action_ui_logout { height: 100%; } .action_ui_logout button { width: 100%; } .action_ui_login button { font-size: 0.774rem; } /* 送信ボタン */ button.btn.btn_send, .wrap_bottom_items button.btn { position: relative; border: none; } button.btn.btn_send img, .wrap_bottom_items button.btn img { position: absolute; right: 0.75rem; top: 50%; margin-top:-0.5em; } #wrap_ui_area button.btn.btn_send, #wrap_ui_rail button.btn.btn_send { border-radius: 1.5em; font-size: 1.25rem; } .wrap_bottom_items button.btn { font-size: 1.25rem; /* border-radius: 1.25rem;*/ } #jump_2_search_ui:after { content: url(/customdir/img/icon/link-white.svg); width: 0.75em; position: absolute; right: 0.75em; top: 50%; margin-top: -0.75em; } #btn_2_list:disabled, #btn_2_map:disabled { background-color: #9e9e9e; } /* 送信ボタン・スマホ */ @media screen and (max-width:767.99px) { .wrap_bottom_items button.btn { font-size: 0.875rem; border-radius: 100vw; } } /* ページの先頭に戻るボタン */ /* #page_top, #page_top_sp { display: none; } @media screen and (max-width:767.99px) { */ #wrap_bottom_items > div, .wrap_bottom_items > div { grid-template-columns: 1fr 1fr 2.75rem; } #page_top_sp { display: block; padding: 0.5rem; border: 1px solid var(--color-mono-blight); border-radius: 0.875rem; background-color: white; outline: none; box-shadow: none; } #page_top_sp img { width: 0.75rem; } #page_top_sp:focus { outline: none; box-shadow: none; } /* } */ /* その他共通UI */ details { position: relative; border:0.0625rem solid #6c757d; border-radius: 0.25rem; padding: .375rem .75rem; } summary { position: relative; display: block; padding: .375rem 0; } summary:after { position: absolute; top:0.375rem; right:0.75rem; content:"＋"; font-size: 1rem; } details[open] summary:after { content:"－"; } .fix-bottom { opacity:1; animation: fadein_scroll linear; animation-timeline: scroll(root y); animation-range: 0 72px; } /* スマホ向け設定 */ @media screen and (max-width:767.99px) { .wrap_bottom_items, .status_user_inputs { display: block; } .fix-bottom { /* opacity:1 !important; /* 常に表示 */ bottom:0; animation: fadein_opacity linear; animation-timeline: scroll(root y); animation-range: 0 72px; } } @media screen and (max-width:499.99px) { .fix-bottom { width: 100%; } } @keyframes fadein_scroll { from { /* bottom:-72px; */ transform:translateY(72px); } to { /* bottom:0; */ transform:translateY(0px); } } @keyframes fadein_opacity { from { opacity:0; } to { opacity:1; } } /* フリーワード関連 */ #wrap_ui_another > #wrap_ui_keyword { margin-top: 2.5rem; } #wrap_ui_another > #wrap_ui_keyword #hot_keywords { padding: 0 1rem 2rem; } @media screen and (max-width: 767.99px) { #wrap_ui_another > #wrap_ui_keyword { margin-top: 1.25rem; } #wrap_ui_another > #wrap_ui_keyword, #wrap_ui_another > #wrap_ui_keyword #hot_keywords { padding-bottom: 0; } } #hot_keywords { display: none; } #hot_keywords span.hotword { color: var(--color-primary-text); text-decoration: underline; margin-right: 1em; cursor: pointer; } #hot_keywords span.hotword:first-of-type { margin-left: 1em; } @media screen and (max-width: 767.99px) { #wrap_ui_area { grid-template-columns: 1fr 2fr; grid-gap: 4px; padding: 0.875rem; } #hot_keywords { padding: 0 0.875rem 0.875rem; } #hot_keywords span.hotword { display: inline-block; box-sizing: border-box; min-width: 3rem; min-height: 3rem; margin: 0; padding: 0.5em; } #hot_keywords span.hotword:first-of-type { margin-left: 0; padding-left: 1em; } }   /* mapview */ .list_only {display:none;} .pager_ui .current {border:none} .section.page-header { display: none; } .section.siteContent { padding-top: 0; } /* 検索UI */ #wrap_ui_another { padding-top:var(--blank-50px); } #wrap_ui_date { margin-bottom: 0; } #wrap_ui_a { margin-bottom: 2.5rem; } @media screen and (max-width:767.99px) { #wrap_ui_a { margin-left: 1rem; margin-right: 1rem; box-shadow: 0 0 0.5rem #ccc; width: calc(100% - 2rem); margin-bottom: 1.25rem; } #wrap_list_bottom { /* margin-bottom:var(--blank-20px);*/ margin-bottom: 0; } #wrap_ui_another { padding-top:var(--blank-20px); } } /* ページ見出し */ .without_top h1 { font-size: 1rem; margin-top: 1.25rem; padding: 0; } @media screen and (max-width:767.99px) { .without_top h1 { margin-top: 0; } } .without_top h1 i { font-style: normal; margin: 0; color: var(--color-primary-text); } /* 検索UI見出し */ #wrap_ui h2 { margin-top: 0; } #wrap_ui_toggles h2 { background-color: transparent; } .without_top #wrap_ui_date h2 { color: white; } @media screen and (max-width: 767.99px) { .without_top #wrap_ui_toggles h2 { margin-top: 0; padding-bottom: 0.4375rem; background-color: white; } } /* 地図で検索　ページレイアウト */ #wrap_map_info { padding: 0; padding-top:2.5rem; background-color: var(--color-primary-bg); } @media screen and (max-width:999.99px) { #wrap_map_info { padding-top:0; padding-bottom: 1rem; } } #wrap_map_info_inner { display:grid; grid-template-columns: 60% 40%; padding: 0; width:100%; background-color: white; border-radius: 1.25rem; } #wrap_map_info { padding-bottom:var(--blank-50px); } #wrap_ui_another { padding-top:var(--blank-50px); } @media screen and (max-width:767.99px) { #wrap_ui_a { margin-left: 1rem; margin-right: 1rem; box-shadow: 0 0 0.5rem #ccc; width: calc(100% - 2rem); } #wrap_map_info { padding-bottom:var(--blank-20px); } #wrap_ui_another { padding-top:var(--blank-20px); } } h2#search_result_info { text-align: center; padding: 0; margin:0 0 1.5rem; font-size:clamp(0.625rem, calc(0.625rem + 0.25vw), 1rem); color:var(--color-mono-dark); font-weight: normal; background-color: transparent; } @media screen and (max-width:767.99px) { #search_result_info { padding:0; margin-top: 0.5rem; margin-bottom: 0.5rem; } } #select_pin_info { /* padding-left: 1.25rem;*/ width: 100%; } @media screen and (min-width:768px) { #select_pin_info { width: 100%; /* max-width:368px;*/ } } /* 再検索ボタン */ #wrap_reload_button { margin-bottom:1rem; text-align: center; min-height: 40px; } #wrap_reload_button button { position: relative; width:100%; padding: 0.75em 0; border: none; font-size:clamp(1.125rem, calc(1.125rem + 0.25vw), 1.25rem); border-radius: 1.5em; } @media screen and (max-width:767.99px) { #wrap_reload_button { margin-bottom:0.25rem; } } /* クリニックリスト（地図） */ i.clinic_open_status { display: inline-block; text-align: center; width: 6.3em; border-radius: 0.25em; font-size:clamp(0.625rem, calc(0.625rem + 0.25vw), 0.75rem); } i.open { color: white; background-color:var(--color-clinic-headline-text); border:1px solid var(--color-clinic-headline-text); } i.hurry { color: var(--color-clinic-headline-text); background-color: white; border:1px solid var(--color-clinic-headline-text); } i.today, i.break { color: var(--color-mono-dark); background-color: white; border:1px solid var(--color-mono-dark); } i.close, i.rest, i.unknown { color: var(--color-mono-icon-end); background-color: white; border:1px solid var(--color-mono-icon-end); } h3.unknown { color: var(--color-mono-icon-end); } .clinic_map_item { position: relative; padding:1rem 0; border-top: 1px solid var(--color-mono-blight); } .clinic_map_item a { position: relative; display: grid; padding-right: 2rem; grid-template-columns: 5rem 1fr; justify-items: center; align-items: center; font-size:clamp(0.625rem, calc(0.625rem + 0.25vw), 1rem); } .clinic_map_item a span { display: block; } @media screen and (min-width: 768px) and (max-width: 999.99px) { .clinic_map_item a { display: block; } .clinic_map_item a h3, .clinic_map_item a span { display: inline; } } .clinic_map_item a:has(i:empty) { display: block; grid-template-columns: 1fr; } .clinic_map_item a span:has(i:empty) { display: none; } .clinic_map_item h3 { text-align: left; width: 100%; } .clinic_map_item a:after { content:url(/customdir/img/icon/link-gray.svg); width: 0.75rem; position: absolute; right:1.25rem; top:50%; margin-top:-0.5em; } @media screen and (max-width: 767.99px) { .clinic_map_item { grid-template-columns: 1fr 4.5em; padding-top: 0; padding-bottom: 0.25rem; } .clinic_map_item:before { margin-bottom: 0.25rem !important; } } .clinic_map_item h3 { font-size:1rem; border-bottom: none; margin-top: 0; margin-bottom: 0; padding: 0; background-color: transparent; color: var(--color-mono-dark); } .clinic_map_item h3:after { display: none; } @media screen and (max-width: 767.99px) { .clinic_map_item h3, #select_pin_info .clinic_map_item h3 { margin-top: 0; padding: 0; font-size: 1rem; } #select_pin_info .clinic_map_item a:has(i:empty) h3 { padding: 0; margin-top: 0.5rem; margin-bottom: 0.25rem; } } .clinic_map_item i { width: 4rem; margin: 0.5rem; font-size:0.875rem; font-style: normal; font-weight: normal; } @media screen and (min-width: 768px) and (max-width: 999.99px) { .clinic_map_item i { margin: 0 0 0.25rem; } } /* 地図 */ #map_loading { display: inline-block; position: absolute; top:-590px; left:-590px; margin-top: 50%; margin-left: 50%; width: 1180px; height: 1180px; max-width: none; opacity: 0.01; } #wrap_map_canvas { position: relative; overflow: hidden; } #wrap_map_canvas, #map_canvas { width: 100%; height: 80vmin; } #map_canvas { background-color: var(--color-map-canvas-bg); background-image: url('/wp-content/themes/sugucli-d1.1/assets/img/loading_map.png'); background-size: contain; background-repeat: no-repeat; background-position: center center; } /* @media screen and (max-width: 767.99px) { #map_canvas { background-size: auto; } }*/ #map_info { padding-left: 1rem; padding-right: 1rem; height: 80vmin; overflow-y: scroll; } /* 地図上のズームボタンレイヤーを優先 */ #map_canvas button[aria-label="ズームイン"], #map_canvas button[aria-label="ズームアウト"] { z-index:2000; } @media screen and (max-width:767.99px) { #wrap_map_info_inner { display: block; margin: 0; margin-left: calc(50%); transform: translateX(-50%); padding-bottom: 0; padding-left: 0.25rem; padding-right: 0.25rem; background-color: transparent; } #map_canvas, #map_info { margin-left: 1rem; margin-right: 1rem; width: calc(100% - 2rem); } #map_info { height: auto; overflow-y: visible; background-color: white; border-bottom-left-radius: 0.75rem; border-bottom-right-radius: 0.75rem; padding-bottom: var(--blank-20px); padding-top: 1rem; } #wrap_ui_date { padding-bottom: 0; margin-bottom:0; } } /* ふきだし */ .info_window_inner * { vertical-align: middle; } .info_window_inner b, .info_window_inner i, .info_window_inner a { display:inline-block; } .info_window_inner b { font-size: clamp(0.875rem, calc(0.875rem + 0.3vw), 1.25rem); } .info_window_inner i { font-size: clamp(0.625rem, calc(0.625rem + 0.1vw), 0.875rem); } .info_window_inner a { font-size: clamp(0.75rem, calc(0.75rem + 0.2vw), 1rem); text-decoration: underline; } /* プレミアム表示 */ .clinic_map_item h3 { font-size: clamp(1rem, calc(1rem + 0.25vw), 1.0625rem); } .clinic_list_item h3:after { content: ''; border-bottom: 0 solid transparent; } .clinic_map_item[data-sort="second"] h3 { font-size: clamp(1.0625rem, calc(1.0625rem + 0.25vw), 1.125rem); } .clinic_map_item[data-sort="primal"] h3 { font-size: clamp(1.125rem, calc(1.125rem + 0.25vw), 1.1875rem); } .clinic_map_item[data-sort="second"] { padding-top: 0; border-top:0px solid transparent; } .clinic_map_item[data-sort="primal"] { padding-top: 0; border-top:0px solid transparent; background-color: var(--color-premium-bg); background-image: url(/customdir/img/premium_bg.png); } .clinic_map_item[data-sort="second"]:before, .clinic_map_item[data-sort="primal"]:before { content:""; display: block; width: 100%; height: clamp(0.375rem, calc(0.375rem + 0.25vw), 0.625rem); margin-bottom:1rem; } .clinic_map_item[data-sort="second"]:before { background: linear-gradient(to right, var(--color-silver-gradient-start) 0%, var(--color-silver-gradient-end) 100%); } .clinic_map_item[data-sort="primal"]:before { background: linear-gradient(to right, var(--color-premium-gradient-start) 0%, var(--color-premium-gradient-end) 100%); } /* @media screen and (max-width: 767.99px) { .clinic_map_item[data-sort="second"]:before, .clinic_map_item[data-sort="primal"]:before { height: 0.375rem; } } */ /* スマホ版ページング表示 */ @media screen and (max-width:767.99px) { .clinic_map_item { display: none; } .clinic_map_item[data-sp-page="1"] { display: block; } #wrap_pager_ui { padding-top: 0; padding-bottom: 0; margin-top: 0.5rem; margin-bottom: 0.5rem; } #wrap_pager_ui button.current, #wrap_pager_ui button[disabled] { border:1px solid transparent; } } @media screen and (min-width:768px) { .clinic_map_item { display: block !important; } } /* #page_L img { transform: rotate(180deg); } */ /* ページングナビ */ .pager_ui a, .pager_ui button { display: inline-block; text-align: center; text-decoration: none; margin-left: 0.125rem; margin-right: 0.125rem; padding: 0; width:1.75rem; height: 1.75rem; line-height: 1.75rem; border-radius: 0.375rem; color:var(--color-secondary-nav); border:1px solid var(--color-secondary-nav); background-color: white; } .pager_ui a:first-child, .pager_ui button:first-child { margin-left: 0; } .pager_ui a:last-child, .pager_ui button:last-child { margin-right: 0; } .pager_ui a.current, .pager_ui a:hover, .pager_ui a:active, .pager_ui button.current, .pager_ui button:hover { color:white; background-color:var(--color-secondary-nav); border:1px solid var(--color-secondary-nav); } .pager_ui button#page_L:disabled:hover, .pager_ui button#page_R:disabled:hover, .pager_ui button#page_LL:disabled:hover, .pager_ui button#page_RR:disabled:hover { color:var(--color-secondary-nav); background-color: white; } .pager_ui a.pager_l, .pager_ui a.pager_r, .pager_ui button#page_L, .pager_ui button#page_R, .pager_ui a.pager_ll, .pager_ui a.pager_rr, .pager_ui button#page_LL, .pager_ui button#page_RR { width: 1.5rem; min-width: auto; } .pager_ui a.pager_l img, .pager_ui a.pager_r img, .pager_ui button.pager_l img, .pager_ui button.pager_r img, .pager_ui a.pager_ll img, .pager_ui a.pager_rr img, .pager_ui button.pager_ll img, .pager_ui button.pager_rr img { display: block; margin: 0 auto; width: auto; height: 0.75rem; } .pager_ui a.pager_ll img, .pager_ui button.pager_ll img { padding-right: 0.125rem; } .pager_ui a.pager_rr img, .pager_ui button.pager_rr img { padding-left: 0.125rem; } .pager_ui .btn[disabled] { opacity: 1; } /* 検索UI見出し */ .without_top #wrap_ui_date h2 { color: white; } @media screen and (max-width: 767.99px) { .without_top #wrap_ui_toggles h2 { margin-top: 0; padding-bottom: 0.4375rem; background-color: white; } }