/* 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; } }   /* area_rail */ #nav_ui_place { display: grid; grid-template-columns: 1fr 1fr; height: 60px; border-top-left-radius: 1rem; border-top-right-radius: 1rem; } #nav_ui_place button { border-radius:0; min-height:36px; font-size: clamp(0.625rem, calc(0.625rem + 0.6vw), 1.25rem); line-height: 3; padding: 0; border:1px solid #ccc; } #nav_ui_place button[data-tub="current"] { border:none; } #nav_ui_place input, #nav_ui_place select { padding: 0.8em 1em; } #mod_ui_area:before, #mod_ui_rail:before { content: ""; display: inline-block; width: 1em; height: 1em; margin-right: 0.33em; background-size: 1em; } #mod_ui_area:before { background-image: url(/customdir/img/icon/area.svg); } #mod_ui_area[data-tab="current"]:before { background-image: url(/customdir/img/icon/area-selected.svg); } #mod_ui_rail:before { background-image: url(/customdir/img/icon/rail.svg); } #mod_ui_rail[data-tab="current"]:before { background-image: url(/customdir/img/icon/rail-selected.svg); } @media screen and (max-width:767.99px) { #nav_ui_place { height: auto; } #wrap_ui_a input, #wrap_ui_a select { padding: 0.25em 0.5em; } } #nav_ui_place button, #nav_ui_place button:focus { outline:none; box-shadow: none; } #mod_ui_area { color: var(--color-secondary); background-color: white; font-weight: bold; border-top-left-radius: 1rem !important; } #mod_ui_rail { color: var(--color-tertiary-headline-bg); background-color: white; font-weight: bold; border-top-right-radius: 1rem !important; } #mod_ui_area[data-tab=current] { background-color: var(--color-secondary); color: white; border:none; } #mod_ui_rail[data-tab=current] { background-color: var(--color-tertiary-headline-bg); color: white; border:none; } @media screen and (max-width:767.99px) { #wrap_ui_a { margin-top: 2rem; } } /* 場所で探す エリア */ #wrap_ui_area { display: grid; grid-template-columns: 200px auto 240px; grid-template-rows: 1fr 1fr; grid-gap: 10px; padding: 2rem; } @media screen and (max-width: 767.99px) { #wrap_ui_area { grid-template-columns: 1fr 2fr; grid-gap: 4px; padding: 0.875rem; } } #wrap_ui_area_inputs { /* エリア入力囲み */ grid-column:1/3; grid-row:1/2; } #wrap_ui_pref_area { /* エリア・都道府県 */ grid-column:1/2; grid-row:1/2; } #wrap_ui_city { /* エリア・市区町村 */ grid-column:2/3; grid-row:1/2; } #ui_keyword { /* エリア・フリーワード */ grid-column:1/3; grid-row:2/3; } #btn_2_list_f_area { /* エリア・リストボタン */ grid-column:3/4; grid-row:1/2; } #btn_2_map_f_area { /* エリア・地図ボタン */ grid-column:3/4; grid-row:2/3; } /* --------------------------------------------------------------------- */ /* 場所で探す 路線 */ #wrap_ui_rail { display: grid; grid-template-columns: 7em 1fr 1fr 240px; grid-template-rows: 1fr 1fr; grid-gap:10px; padding: 2rem; } #w_ui_pref_rail { /* 路線駅・都道府県 */ grid-column:1/2; grid-row:1/2; } #w_ui_rail { /* 路線駅・路線 */ grid-column:2/3; grid-row:1/2; } #w_ui_station { /* 路線駅・駅 */ grid-column:3/4; grid-row:1/2; } #ui_keyword_rail { /* 路線駅・フリーワード */ grid-column:1/4; grid-row:2/3; } #btn_2_list_f_rail { /* 路線駅・リストボタン */ grid-column:4/5; grid-row:1/2; } #btn_2_map_f_rail { /* 路線駅・地図ボタン */ grid-column:4/5; grid-row:2/3; } @media screen and (max-width:767.99px) { #wrap_ui_rail { grid-gap:4px; padding: 0.875rem; grid-template-columns: 1fr 2fr; grid-template-rows: 1fr 1fr 1fr; } #w_ui_rail { /* 路線駅・路線 */ grid-column:2/3; grid-row:1/2; } #w_ui_station { /* 路線駅・駅 */ grid-column:1/3; grid-row:2/3; } #ui_keyword_rail { /* 路線駅・フリーワード */ grid-column:1/3; grid-row:3/4; } #btn_2_map_f_rail, #btn_2_list_f_rail { grid-column:1/2; grid-row:3/4; display: none; } } /* 現在地（未使用確認後に廃止） */ /* #current_place { margin-bottom: 0; padding: 0 0.75rem; min-height: 36px; line-height: 36px; box-sizing: border-box; } #current_place span { display: inline-block; } #about, #ui_lat { margin-right: 1em; } */ #btn_2_map_f_area:disabled, #btn_2_map_f_rail:disabled { background-color: #9e9e9e; } /* 注目のキーワード */ /* #wrap_ui_area, #wrap_ui_rail { padding: 2rem 2rem 0.875rem; } #hot_keywords { padding: 0 2rem 2rem; } #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) { #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; } } */   /* top.css */ /* 全体レイアウト配色 */ footer, .sitefooter { border-top: none; background-color: white; } footer .widget ul, .siteFooter .widget ul { background-color: var(--color-primary-bg); } /* ロゴ・キャッチコピー */ #site-header h1 a, #site-header h1 img { display: inline-block; vertical-align: middle; } /* 共通UI配色 */ a.btn.btn_link, button.btn.btn_send, button.btn.btn_send:hover, button.btn.btn_send:active, .wrap_bottom_items button.btn, .wrap_bottom_items button.btn:hover, .wrap_bottom_items button.btn:active { border: none; background-color: var(--color-accent); color: #fff; font-weight: bold; outline: none; } .fix-bottom { background-color: rgba(var(--color-accent-rgba)) !important; } button.btn[data-toggle] { border-width: 0px; border-color: transparent; border-radius: 1rem; font-weight: normal; margin: 0 0.25rem; padding:0.25rem 0.75rem; color: var(--color-mono-dark); } @media screen and (max-width:767.99px) { button.btn[data-toggle] { margin: 0 0.125rem; } } button.btn[data-toggle]:focus, button.btn[data-toggle]:hover, button.btn[data-toggle]:active { outline: none !important; box-shadow: none !important; color: var(--color-mono-dark) !important; background-color: transparent !important; } p.include_buttons { padding-top: 0.33rem; } @media screen and (max-width:767.99px) { p.include_buttons { padding-left: 0.125rem; padding-right: 0.125rem; } } /* 背景色 */ #wrap_ui_a_b { position: relative; background-color: var(--color-primary-bg); } #wrap_ui_another { background-color: var(--color-secondary-bg); padding-bottom: 2.5rem; } #wrap_footer_another_navs { background-color: var(--color-primary-bg) !important; } footer, .siteFooter { background-color: var(--color-primary) !important; } footer div.copySection { color: white; padding-bottom: 72px; } /* 個別UI配色 */ /* 見出し装飾 */ #wrap_ui_another h2:before { content: "■"; font-size:0.875rem; display: inline-block; color: var(--color-accent); margin-right: 0.25em; position: relative; top: -2px; } /* 日時で探す */ /* 場所で探す */ /* 条件で探す */ /* 診療科目で探す */ /* 症状で探す */ #wrap_body_map button.btn { background-color: white; color: var(--color-primary-text); font-weight: bold; } #wrap_body_map button.btn:hover, #wrap_body_map button.btn:focus, #wrap_body_map button.btn:active { background-color: white; border-color: transparent; box-shadow: none; } #page_top { display: none; } header nav li { min-width: 10em; } summary { cursor: pointer; } /* PC・タブレット向け設定 */ .full-width { /* margin: 0 calc(50% - 50vw);*/ padding: 0 calc(50vw - 50%); } .container-width { max-width: 1140px; } /* #footer_links_pref { background-image: url(/customdir/img/bg_area.png); background-size: contain; background-repeat: no-repeat; background-position: center; } */ /* スマホ向け設定 */ @media screen and (max-width: 767.99px) { #wrap_ui_a_b:after { display: none; } } /* 共通CSS引用ここまで */ /* 以下トップページ専用 */ .siteHeader { height: 72px; } .siteContent { padding-top: 0; } .site-body { padding-top: 0; } .siteContent div.widget { display: none; } .fix-bottom { display:block; position: fixed; bottom:0; left:0; width:100%; height: 72px; padding:15px 0; z-index: 1000; background-color: #cccccc80; } #wrap_ui { display: block; margin: 0 auto; max-width: 1000px; } #wrap_ui h2 { padding-left: 0; } #wrap_ui_a_b { grid-row:1/2; padding-top: 2rem; padding-bottom: 2rem; } #wrap_ui_date, #wrap_ui_a { border-radius: 1rem; } /* #wrap_ui_a_b #wrap_ui_date { margin-bottom: 2rem; } */ #wrap_ui_a { max-width: 1000px; margin: 2rem auto 0; } @media screen and (max-width:767.99px) { #wrap_ui_a { margin: 1rem auto 0; } #wrap_ui_a_b { padding: 1.13rem calc(50vw - 47%); } } #wrap_ui_d { grid-row:1/2; /* grid-column:2/3;*/ } #wrap_contents_nav { grid-row:2/3; /* grid-column:1/3;*/ } #wrap_ui_c { grid-row:3/4; /* grid-column:1/3;*/ } /* 場所で探す全体 */ #wrap_ui_a { position: relative; z-index:999; background-color: white; } /* --------------------------------------------------------------------- */ .ui_group_place button { border:1px solid #999; } #wrap_ui_feel { display: grid; grid-template-columns: 1fr 1fr; grid-gap:0.6rem; } /* .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; } #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; } */ h2 { padding-left:1.1em; font-size: 20px; font-weight: bold; margin-bottom:0; } img.icon { width: 1em; } 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:"－"; } /* UI group A */ /* UI group B */ #wrap_ui_date { margin-bottom: 1rem; } #wrap_ui_a { margin-top: 1rem; } @media screen and (max-width:767.99px) { #wrap_ui_date { margin-bottom: 1rem; } #wrap_ui_a { margin-top: 1rem; } } #wrap_ui_b:after { content: ""; display: block; clear: both; } /* UI group C */ #wrap_ui_c h2 span { font-weight: normal; } #wrap_body_map { position: relative; padding-top: 100%; } #wrap_body_map img { position: absolute; top:0; left:0; display: block; z-index: 1; } #wrap_body_map button { position: absolute; display: inline-block; z-index: 2; transform: translate(-50%, -50%); border: 1px solid #ccc; } #to_headface { top:10%; left: 30%; } #to_mouthroat { top:10%; left: 70%; } #to_upperbody { top:40%; left: 20%; } #to_lowerbody { top:70%; left: 25%; } #to_fullbody { top:70%; left: 75%; } #to_mental { top:40%; left: 80%; } #wrap_body_map button { font-size: 0.95rem; width: 7em; } #wrap_feel_groups { position: relative; height: 100%; overflow-y: auto; } #wrap_feel_groups_inner { position: absolute; width: 100%; } #wrap_feel_groups_inner details { display: block; width: 100%; } div[data-role="go_results"] button { border:1px solid #666; } div[data-role="go_results"] button[disabled] { border:1px solid #999; } #toggle_feeltype { position: relative; } .toggle_label { display: inline-block; position: absolute; right:0.5rem; top:0.4rem; width: 3rem; height: 1.5rem; background: #ccc; border-radius: 1rem; transition: 0.4s; box-sizing: border-box; } .toggle_label:after { content: ""; position: absolute; z-index: 2; right: 1.6rem; top: 0.15rem; width: 1.25rem; height: 1.25rem; border-radius: 100%; background: #fff; box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); transition: 0.4s; } /* wrap_other */ #wrap_other_filter { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000; display: grid; justify-items: center; align-items: center; background-color: rgba(153,153,153,0.5); } #wrap_other_filter_inner { position: relative; width: 90vmin; height: 90vmin; overflow-y: scroll; background-color: #fff; } #wrap_other_filter_inner h3 { font-size: 0.774rem; } #close_filter_ui { position: absolute; right:0.5rem; top:0.5rem; z-index: 10001; background-color: #fff; cursor:pointer; } #wrap_filter_card, #wrap_filter_specialty { padding: 0 0.75rem; } /* UI基本設定 */ h2 { border-top-width:0; border-top-color:transparent; border-bottom-width:0; border-bottom-color:transparent; } button, select, input[type=submit], input[type=date], input[type=time], input[type=datetime-local] { min-width:36px; min-height:36px; } button.btn[disabled] { border-width: 0; } /* select UI */ .wrap_select, .wrap_date { position: relative; } .wrap_select select { margin-bottom: 0; appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor:pointer; background-image: url(/customdir/img/icon/down.svg); background-size: 0.75rem; background-repeat: no-repeat; background-position: calc(100% - 1em) center; } .wrap_select i, .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); } .wrap_select i { top:0.875rem; right:0.875rem; } .wrap_date i { top:0.7rem; right:0.6rem; } details button, .include_buttons button, .include_buttons input[type=submit] { margin:4px; } /* チェックボックス表示ボタン */ .btn.checkbox-ui { border:none !important; } .btn.checkbox-ui:before { content:""; display: inline-block; margin-right: 0.5em; vertical-align: middle; width: 1em; height: 1em; margin-top: -4px; border-radius: 0.25em; background-color: var(--color-mono-blight); } .btn.checkbox-ui[data-toggle=on]:before { background-color: var(--color-secondary); background-image: url(/customdir/img/icon/check.svg); background-position: center center; background-repeat: no-repeat; background-size: 0.625rem; } button.btn.checkbox-ui, button.btn.checkbox-ui:focus, button.btn.checkbox-ui:hover, button.btn.checkbox-ui:active { outline: none; } /* 共通アコーディオンUI　スマホのみ */ @media screen and (max-width: 767.99px) { div[data-sp_visible="off"] { height: 2rem; overflow-y: hidden; } div[data-sp_visible] > h2 { font-size: 0.875rem; position: relative; cursor:pointer; } div[data-sp_visible] > h2:after { position: absolute; top:0.625rem; right:0.75rem; font-size: 1rem; } div[data-sp_visible] > h2[data-sp_toggle="off"]:after { content: url(/customdir/img/icon/down.svg); width: 0.75em; position: absolute; right: 0; top: 0.375em; } div[data-sp_visible] > h2[data-sp_toggle="on"]:after { content: url(/customdir/img/icon/down.svg); width: 0.75em; position: absolute; right: 0; top: 0.375em; transform: rotate(180deg); } } /* コンテンツ領域 */ #wrap_top_contents { padding-top: 2.3125rem; } #wrap_top_contents h2 { border-bottom:0.1rem solid var(--color-kk-light-blue); padding-bottom: 0; margin-bottom: 1.66rem; } #wrap_top_contents h2 i { font-style: normal; color:var(--color-kk-dark-blue); } @media screen and (max-width: 767.99px) { #wrap_top_contents h2 { font-size: 1rem; margin-left: 1rem; margin-right: 1rem; } #about_site { margin-left: 1rem; margin-right: 1rem; } #wrap_top_contents #about_site h2 { margin-left: 0; margin-right: 0; } } #about_site p:last-child { margin-bottom: 0; } @media screen and (max-width:767.99px) { #wrap_ui_date { margin-bottom: 0; } #current_place { font-size: 0.875rem; } div.widget.widget_block { margin:0; } .wrap_sp_2columns { display: grid; grid-template-columns: 1fr 1fr; } .siteHeader { height: 14vmin; max-height: 72px; } .siteFooter { display:none; } .container { padding-left:0.125rem; padding-right:0.125rem; } #wrap_ui { grid-template-columns: 1fr; grid-template-rows: auto auto auto auto; } #wrap_ui_a_b { grid-row:1/2; grid-column:1/2; } #wrap_ui_c { grid-row:2/3; grid-column:1/2; } #wrap_ui_d { grid-row:3/4; grid-column:1/2; } #wrap_contents_nav { grid-row:4/5; grid-column:1/2; } .entry-body .container { padding-bottom: 0; } #wrap_ui_feel { display: block; } #wrap_feel_groups { position: static; height: 100%; overflow-y:visible; } #wrap_feel_groups_inner { position:relative; } /* 日時を選択 */ /* #wrap_2_dates { position: static; left:0; padding-top: 0; display: grid; grid-template-columns: 1fr 1fr 1fr; } #wrap_2_dates > div, #wrap_2_dates > button { display: block; width: 100%; } */ .wrap_bottom_items, .status_user_inputs { display: block; } .sm-hide { display:none; } .columns-2 { grid-template-columns: 1fr; max-width:auto; } .columns_2.sm_columns_1 { grid-template-columns: 1fr; } .wrap_search_items { display: grid; grid-template-columns: 33% 67%; justify-items: center; align-items: center; } .wrap_search_items .item_1st img { max-height:49vmin; } .wrap_search_items .item_1st, .wrap_search_items .item_2nd { height:50vmin; } .row_summary .item_2nd button { width: calc(100% - 0.75rem); margin: 0.5rem; } #wrap_pickup_doctors, #wrap_clinic_news { display:block; } /* 送信ボタン・スマホ */ .wrap_bottom_items button.btn { font-size: 0.875rem; border-radius: 0.875rem; } } @media screen and (max-width:767.99px) { /* アコーディオンUI　スマホのみ */ #wrap_ui_another { padding-top: 1rem; } #wrap_ui_toggles { margin: 0 1rem; padding: 1rem; border-radius: 1rem; background-color: white; box-shadow: 0 0 0.5rem #ccc; } #wrap_ui_toggles > div { border:1px solid #ccc; border-radius: 0.5rem; margin-bottom: 0.25rem; } #wrap_ui_toggles > div > h2:before { top: 0; } #wrap_ui_toggles > div:last-of-type { margin-bottom: 0; } } #status i {color:#999;} #d_hm, .cointainer input, .cointainer button, .cointainer select, .cointainer textarea {display:inline-block;} /* メイン末尾　お問い合わせボタン */ #link_contact_main_bottom { position: relative; margin-top:3.25rem; margin-bottom:3.25rem; padding: 0.5em 3em; border-radius: 1.5em; font-size:1rem; font-weight: bold; border:0.125rem solid var(--color-accent); background-color: transparent; color: var(--color-accent); } #link_contact_main_bottom:after { content: url(/customdir/img/icon/link-pink.svg); width: 0.75em; position: absolute; right:0.75em; top:50%; margin-top:-0.75em; }  /* pickup_clinics */ #wrap_pickup_clinics_premium, #wrap_pickup_clinics_silver { padding-left: 1rem; padding-right: 1rem; } #wrap_pickup_clinics_silver { margin-bottom: 2.5rem; } a.link_pickup_clinic, a.link_pickup_clinic_2025 { position: relative; /* display: block;*/ /* width: 100%; border-bottom:1px solid var(--color-mono-blight); padding: 0.5rem 2.5rem 0.5rem 1.5rem; margin: 0; color:#333; font-size:1.13rem; */ } #wrap_pickup_clinics_premium a.link_pickup_clinic:first-of-type { border-top:1px solid var(--color-mono-blight); } a.link_pickup_clinic em, a.link_pickup_clinic i { font-style: normal; font-weight: normal; } a.link_pickup_clinic em { color: var(--color-mono-middle); } a.link_pickup_clinic_2025:before { content:""; width: 0.0625rem; height: 100%; position: absolute; left: 0; top:0; background-color: #808080; } a.link_pickup_clinic_2025:after { content:""; width: 0.0625rem; height: 100%; position: absolute; right: 0; top:0; background-color: #808080; } #wrap_pickup_clinics a.link_pickup_clinic_2025.premium span.header_text { background-color: var(--color-premium-bg); background-image: url(/customdir/img/premium_bg.png); } #wrap_pickup_clinics a.link_pickup_clinic_2025.silver span.header_text { background: linear-gradient(to bottom, var(--color-silver-bg-gradient-start) 0%, var(--color-silver-bg-gradient-end) 100%); } #wrap_pickup_clinics a.link_pickup_clinic_2025.premium:before, #wrap_pickup_clinics a.link_pickup_clinic_2025.premium:after { background: linear-gradient(to bottom, var(--color-premium-gradient-start) 0%, var(--color-premium-gradient-end) 100%); } #wrap_pickup_clinics a.link_pickup_clinic_2025.silver:before, #wrap_pickup_clinics a.link_pickup_clinic_2025.silver:after { background: linear-gradient(to bottom, var(--color-silver-gradient-start) 0%, var(--color-silver-gradient-end) 100%); } /* a.link_pickup_clinic_2025:after { content: url(/customdir/img/icon/link-gray.svg); width: 0.75em; position: absolute; right:1em; top:50%; margin-top:-0.75em; } */ @media screen and (max-width: 767.99px) { a.link_pickup_clinic { padding-right: 3rem; font-size: 0.875rem; } a.link_pickup_clinic em { display: block; font-size: 0.75rem; } #wrap_pickup_clinics_premium, #wrap_pickup_clinics_silver { padding-left: 0; padding-right: 0; } } /* 2025version */ /* 4列2行 */ #wrap_pickup_clinics.rev20250220 { display: flex; column-gap:1rem; row-gap:1rem; flex-wrap: wrap; padding-left: 0; padding-right: 0; } .link_pickup_clinic_2025 { display: grid; grid-template-columns:1fr 1fr; grid-template-rows:auto 1fr; grid-column-gap: 0.5rem; /* grid-row-gap: 0.5rem;*/ width: calc(25% - 0.75rem); box-shadow: 0.0625rem 0.0625rem 0.25rem var(--color-mono-blight); } .link_pickup_clinic_2025 span { display: block; } .link_pickup_clinic_2025 span.header_text { grid-row:1; grid-column:1/3; padding: 0.25rem 0.5rem 0.5rem; } .link_pickup_clinic_2025 span.wrap_img { grid-row:2; grid-column:1; aspect-ratio: 4 / 6;/* 高さは主に右側の数値を調節 */ } .link_pickup_clinic_2025 span.wrap_specs { grid-row:2; grid-column:2; padding-top: 0.25rem; font-size:0.75rem; } .link_pickup_clinic_2025 span.wrap_specs i { display: block; text-align: right; font-style: normal; } .link_pickup_clinic_2025 span.wrap_img img { width: 100%; height: 100%; max-width: none; } /* 2列4行 */ @media screen and (min-width: 768px) and (max-width: 991.99px) { #wrap_pickup_clinics.rev20250220 { column-gap:2rem; } .link_pickup_clinic_2025 { grid-column-gap: 0.75rem; grid-row-gap: 0.5rem; width: calc(50% - 1rem); } .link_pickup_clinic_2025 span.wrap_specs i { padding-top: 1em; } } /* 1列＋スライダー */ @media screen and (max-width: 767.99px) { #wrap_pickup_clinics.rev20250220 { column-gap:0; flex-wrap: nowrap; align-items: stretch; padding-bottom: 0.25rem; margin-bottom: 2.3125rem; /* padding-left: 1rem; padding-right: 1rem; overflow-x: auto !important; overflow-y: clip; padding-top: 0.125rem; */ } .swiper-wrapper { overflow: visible; } .swiper-container { overflow: hidden; } .swiper-slide { width: 80%; height: auto !important; } .swiper-pagination, .swiper-button-prev, .swiper-button-next, .swiper-scrollbar { display: none; } /* #wrap_pickup_clinics.rev20250220::-webkit-scrollbar { background-color: white; width: 16.75%; height: 0.375rem; border-radius: 0.1875rem; } #wrap_pickup_clinics.rev20250220::-webkit-scrollbar-thumb { background-color: var(--color-mono-blight); border-radius: 0.1875rem; } */ /* .link_pickup_clinic_2025 { grid-column-gap: 1rem; grid-row-gap: 0.5rem; width: 90%; } .link_pickup_clinic_2025:first-of-type { margin-left: 5%; } .link_pickup_clinic_2025:last-of-type { margin-right: 5%; } */ .link_pickup_clinic_2025 span.header_text, .link_pickup_clinic_2025 span.wrap_specs { font-size:1rem; } .link_pickup_clinic_2025 span.wrap_specs i { padding-top: 1em; } }  /* クリニックお知らせ・更新 */ #wrap_clinic_news { margin-bottom: 2.5rem; } a.link_clinic_news { position: relative; display: block; width: 100%; border-bottom:1px solid var(--color-mono-blight); padding: 0.5rem 1rem; margin: 0; color:#333; font-size:1.13rem; } a.link_clinic_news:first-of-type { border-top:1px solid var(--color-mono-blight); } a.link_clinic_news em, a.link_clinic_news i { font-style: normal; font-weight: normal; } a.link_clinic_news em { color: var(--color-mono-middle); } a.link_clinic_news:after { content: url(/customdir/img/icon/link-gray.svg); width: 0.75em; position: absolute; right:1em; top:50%; margin-top:-0.75em; } @media screen and (max-width: 767.99px) { a.link_clinic_news { padding-right: 3rem; font-size: 0.875rem; } a.link_clinic_news em { display: block; font-size: 0.75rem; } }