@charset "UTF-8"; /*-------------------------------------------------- ************************************************** リセット ************************************************** --------------------------------------------------*/ /* 内で html5reset.css を読み込んでます */ /*-------------------------------------------------- ************************************************** デフォルト ************************************************** --------------------------------------------------*/ /* 内で default.css を読み込んでます */ /*-------------------------------------------------- ************************************************** 基本 ************************************************** --------------------------------------------------*/ body { margin: 0px; padding: 0px; background: none repeat scroll 0% 0%; background-attachment: scroll; font-family: Arial, "Hiragino Sans", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif; /* ゴシック */ line-height: 1.6; letter-spacing: 0.8px; font-size: 14px; font-weight: 400; color: #333; } #container { position: relative; background-color: #fff; } .contents_inner { max-width: 1000px; width: 95%; margin-left: auto; margin-right: auto; } /*-------------------------------------------------- ************************************************** テキスト・フォント ************************************************** --------------------------------------------------*/ em { color: #333; font-weight: normal; font-style: normal; } .red { color: #ff0000; } .blue { color: #0000ff; } .green { color: #008000; } .black { color: #000; } .white { color: #fff; } /*-------------------------------------------------- ************************************************** リンク系（アンカー） ************************************************** --------------------------------------------------*/ a { color: #333; text-decoration: none; transition: all 1s ease; } a:hover { color: #22b7e8; text-decoration: underline; } a img { display: block; transition: 0.5s; } a img:hover { opacity: 0.7; transition: 0.5s; } /* -- CSSで画像を整形していたら -- */ a.opa:hover { -ms-filter: "alpha( opacity=70 )"; filter: alpha(opacity=70); opacity: 0.7; } /* -- 電話リンク無効 -- */ /* a[href^="tel:"] { pointer-events: none; } */ .link_btn_1 { display: inline-block; padding: 15px 80px; background-color: #00a8ca; text-align: center; font-size: 16px; color: #fff; } .link_btn_1.w-md { width: 360px; } .link_btn_1:hover { text-decoration: none; background-color: #007a96; color: #fff; } /*-------------------------------------------------- ************************************************** ヘッダー ************************************************** --------------------------------------------------*/ body.sub header { margin-bottom: 60px; } body.sub header > div { border-bottom: #ddd 1px solid; } header #header_logo { margin-left: 40px; } header #header_logo img { max-width: clamp(220px, 10vw, 300px); height: auto; } header { position: fixed; left: 0; top: 0; z-index: 1000; width: 100%; transition: background-color 0.3s ease, box-shadow 0.3s ease; height: 90px; display: flex; align-items: center; justify-content: space-between; } .header_inner { align-items: center; justify-content: space-between; display: flex; width: 100%; } header.is-scrolled { background-color: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } /*-------------------------------------------------- ************************************************** グローバルナビゲーション ************************************************** --------------------------------------------------*/ .head_nav { margin-right: 40px; } .head_nav .menu { display: flex; flex-direction: row; justify-content: flex-end; align-items: center; gap: 24px; } .head_nav .menu > li { display: inline-block; text-align: center; } .head_nav .menu > li > a { display: block; font-size: 14px; } body.home .menu a { color: #fff; } body.home header.is-scrolled .menu a { color: #333; } /* header.active .head_nav .menu a { color: #333; } */ .head_nav .menu a:hover { text-decoration: none; color: #00a7ce; } body.home header.is-scrolled .menu a:hover { color: #00a7ce; } .head_nav .menu .sub-menu { position: absolute; top: 90px; left: 16px; z-index: 10; display: none; min-width: 240px; width: 100%; padding: 0; } .head_nav .menu .sub-menu li { position: relative; display: block; margin: 0; padding: 0; line-height: 1.5; text-align: left; } .head_nav .menu .sub-menu li a { position: relative; display: block; height: auto; line-height: 1.6; margin: 0; padding: 10px 25px; background-color: #007997; color: #fff !important; } .head_nav .menu .sub-menu li a:hover { background-color: #00a7ce; } /*-------------------------------------------------- ************************************************** パンくず ************************************************** --------------------------------------------------*/ .breadcrumb { max-width: 1000px; width: 95%; margin: 10px auto 0; } .breadcrumb a { color: #999; } /*-------------------------------------------------- ************************************************** メインコンテンツ ************************************************** --------------------------------------------------*/ .contents_title_1 { text-align: center; } .contents_title_1 span { display: block; } .contents_title_1 .en { font-size: 16px; font-weight: bold; color: #11a0c5; } .contents_title_1 .ja { font-size: 28px; font-weight: bold; color: #333; } /*-------------------------------------------------- ************************************************** サブコンテンツ ************************************************** --------------------------------------------------*/ /* ページャー */ .wp-pagenavi { text-align: center; } /* 下層ページへのリンク */ .sub_page_link { width: 100%; margin: 120px auto 0; } .sub_page_link a { position: relative; display: block; width: 100%; height: 150px; } .sub_page_link a .name { position: absolute; top: 50%; z-index: 3; padding: 0 30px; font-size: 16px; font-weight: bold; transform: translateY(-50%); color: #fff; } .sub_page_link a .overlay { position: absolute; left: 0; top: 0; z-index: 2; width: 100%; height: 100%; background: -moz-linear-gradient(left, #004558, transparent); background: -webkit-linear-gradient(left, #004558, transparent); background: linear-gradient(to right, #004558, transparent); } .sub_page_link a .image_box { position: relative; z-index: 1; display: block; width: 100%; height: 150px; overflow: hidden; } .sub_page_link a .image_box .image { position: relative; z-index: 2; display: block; width: 100%; height: 100% !important; overflow: hidden; transition: all 0.5s ease; } .sub_page_link a:hover .image_box .image { opacity: 1; transform: scale(1.2, 1.2); } /* 診察のご案内 */ #guidance { width: 100%; margin: 0; } #guidance section { padding: 60px 0; background-color: rgba(34, 183, 232, 0.4); } #guidance section h2 { font-size: 16px; font-weight: bold; } #guidance section h2 + p { font-size: 16px; } #guidance .contact_box, #guidance .schedule { margin-top: 50px; } #guidance .contact_box .contact_box_inner { width: 490px; min-height: 80px; padding: 0 20px; background-color: #fff; display: flex; justify-content: center; } #guidance .contact_box .mail { margin-bottom: 10px; } #guidance .contact_box .mail p, #guidance .contact_box .tel > p { margin-right: 35px; font-size: 16px; } #guidance .contact_box .mail a { display: block; width: 280px; padding: 15px 0; background-color: #02a8c6; text-align: center; font-size: 16px; color: #fff; } #guidance .contact_box .mail a:hover { text-decoration: none; background-color: #007a96; color: #fff; } #guidance .contact_box .tel { margin-top: auto; } #guidance .contact_box .tel.no_mail { margin-top: 0; } #guidance .contact_box .tel a[href^="tel:"] { padding-left: 21px; background: url(../img/common/icon-tel_1.png) no-repeat left center; background-size: 17px; font-size: 28px; } #guidance .contact_box .tel div p { font-size: 14px; } #guidance .contact_box .payment { margin-top: 20px; } #guidance .contact_box .payment .images { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; align-items: normal; } #guidance .contact_box .payment .images img { height: 41px; } #guidance .schedule { width: 490px; } #guidance .schedule table { width: 100%; border: #0aa9c8 2px solid; } #guidance .schedule table th, #guidance .schedule table td { vertical-align: middle; padding: 15px 0; background-color: #fff; border: #0aa9c8 1px solid; text-align: center; font-size: 16px; font-weight: normal; color: #0aa9c8; } #guidance .schedule table th:not(.time) { width: 45px; } #guidance .bg-black-50 { color: #fff; background: rgba(0, 0, 0, 0.45); padding: 12px; } #guidance .note { margin-top: 8px; } .staff_description { font-size: 16px; } /*-------------------------------------------------- ************************************************** フッター ************************************************** --------------------------------------------------*/ footer { padding-top: 60px; } footer .footer_logo img { display: inline-block; max-width: 300px; } footer .footer_site_info > div { margin: 0 10px; } footer .sns li { margin: 0 10px; } footer .sns img { display: inline-block; width: 40px; height: auto; } footer .footer_menu { width: 100%; background-color: #f5f5f5; } footer .footer_menu .menu { display: flex; flex-direction: row; justify-content: center; padding: 15px 0; } footer .footer_menu .menu li { margin: 0 20px; } footer .footer_menu .menu li a { font-size: 14px; color: #333; } footer .footer_menu .menu li a:hover { text-decoration: none; } footer #copyright { margin-top: 20px; padding: 10px 0; background-color: #22b7e8; } footer #copyright small { font-size: 12px; color: #fff; } /*-------------------------------------------------- ************************************************** その他 (PageUpボタン 追従系 jsに関わるcssなど。) ************************************************** --------------------------------------------------*/ #pageup a { position: fixed; right: 0; bottom: 100px; z-index: 9999; display: flex; justify-content: center; align-items: center; width: 60px; height: 60px; background-color: #22b7e8; } /*-------------------------------------------------- 2024.02追加 - ページネーション --------------------------------------------------*/ .pager-area { text-align: center; margin: 0 auto; } .pager-area .page-numbers { display: inline-block; margin-right: 5px; padding: 0; width: 36px; height: 36px; text-align: center; line-height: 36px; border-radius: 50%; color: #00b1ff; border: 1px solid #00b1ff; background: #fff; font-weight: bold; font-size: 14px; } .pager-area a.page-numbers:hover { color: #fff; background-color: #00b1ff; border-color: #00b1ff; } .pager-area .current { padding: 0; background: #00b1ff; color: #ffffff; font-size: 14px; } .pager-area .prev, .pager-area .next { border: 1px solid #00b1ff; color: #00b1ff; position: relative; font-size: 14px; } .pager-area a.next.page-numbers { margin-right: 0; } .pager-area .dots { background: transparent; border: none; }