@charset "UTF-8"; /*-------------------------------------------------- ************************************************** リセット ************************************************** --------------------------------------------------*/ /* 内で html5reset.css を読み込んでます */ /*-------------------------------------------------- ************************************************** デフォルト ************************************************** --------------------------------------------------*/ /* 内で default.css を読み込んでます */ /*-------------------------------------------------- ************************************************** 基本 ************************************************** --------------------------------------------------*/ :root { --main-color: #00b2ae; /* Main Brand Colors */ --primary-color: #00a8aa; --primary-color-dark: #007a7d; --primary-color-light: #02aaab; --secondary-color: #00a7a8; --accent-color: #22b7b5; --bright-color: #00b4b2; --link-color: #11a0a2; --border-color: #0aa9ab; --darker-color: #007979; /* Text Colors */ --text-primary: #333; --text-white: #fff; --text-black: #000; /* Basic Colors */ --color-red: #ff0000; --color-blue: #0000ff; --color-green: #008000; /* Background Colors */ --bg-white: #fff; --bg-light-gray: #f5f5f5; /* Border Colors */ --border-light: #ddd; } 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: var(--text-primary); } #container { position: relative; background-color: var(--bg-white); } .contents_inner { max-width: 1000px; width: 95%; margin-left: auto; margin-right: auto; } /*-------------------------------------------------- ************************************************** テキスト・フォント ************************************************** --------------------------------------------------*/ em { color: var(--text-primary); font-weight: normal; font-style: normal; } .red { color: var(--color-red); } .blue { color: var(--color-blue); } .green { color: var(--color-green); } .black { color: var(--text-black); } .white { color: var(--text-white); } /*-------------------------------------------------- ************************************************** リンク系（アンカー） ************************************************** --------------------------------------------------*/ a { color: var(--text-primary); text-decoration: none; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } a:hover { color: var(--accent-color); 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; color: var(--text-primary); } .link_btn_1 { display: inline-block; padding: 15px 80px; background-color: var(--primary-color); text-align: center; font-size: 16px; color: var(--text-white); } .link_btn_1:hover { text-decoration: none; background-color: var(--primary-color-dark); color: var(--text-white); } /*-------------------------------------------------- ************************************************** ヘッダー ************************************************** --------------------------------------------------*/ body.sub header { margin-bottom: 60px; } body.sub header > div { border-bottom: var(--border-light) 1px solid; } header #header_logo { margin-left: 40px; } header #header_logo img { max-width: 200px; height: auto; } /*-------------------------------------------------- ************************************************** グローバルナビゲーション ************************************************** --------------------------------------------------*/ .head_nav .menu { display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; position: relative; } .head_nav .menu > li { position: relative; display: inline-block; line-height: 1; text-align: center; font-size: 14px; } .head_nav .menu > li > a { position: relative; display: block; height: 90px; line-height: 90px; padding-left: 24px; } .head_nav .menu a { font-size: 14px; } body.home .menu a { color: var(--text-white); } header.active .head_nav .menu a { color: var(--text-primary); } .head_nav .menu a:hover { text-decoration: none; color: var(--secondary-color); } .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: var(--darker-color); color: var(--text-white) !important; } .head_nav .menu .sub-menu li a:hover { background-color: var(--secondary-color); } .head_nav .menu .reserve { display: grid; place-content: center; color: var(--text-white); background: var(--main-color); margin-left: 24px; padding: 20px 50px; } .head_nav .menu .reserve:hover { color: var(--text-white); background-color: var(--darker-color); } /*-------------------------------------------------- ************************************************** パンくず ************************************************** --------------------------------------------------*/ .breadcrumb { max-width: 1000px; width: 95%; margin: 10px auto 0; } /*-------------------------------------------------- ************************************************** メインコンテンツ ************************************************** --------------------------------------------------*/ .contents_title_1 { text-align: center; } .contents_title_1 span { display: block; } .contents_title_1 .en { font-size: 16px; font-weight: bold; color: var(--link-color); } .contents_title_1 .ja { font-size: 28px; font-weight: bold; } /*-------------------------------------------------- ************************************************** サブコンテンツ ************************************************** --------------------------------------------------*/ /* ページャー */ .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; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); } .sub_page_link a .overlay { position: absolute; left: 0; top: 0; z-index: 2; width: 100%; height: 100%; } .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; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; 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 { width: 100%; height: 100%; padding: 60px 0; } #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 { display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } #guidance .contact_box .tel.no_mail { width: 490px; min-height: 80px; padding: 20px; background-color: var(--bg-white); } #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: var(--primary-color-light); text-align: center; font-size: 16px; color: var(--text-white); } #guidance .contact_box .mail a:hover { text-decoration: none; background-color: var(--primary-color-dark); color: var(--text-white); } #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; margin-right: 30px; } #guidance .schedule { width: 490px; } #guidance .schedule table { width: 100%; border: var(--border-color) 2px solid; } #guidance .schedule table th, #guidance .schedule table td { vertical-align: middle; padding: 15px 0; background-color: var(--bg-white); border: var(--border-color) 1px solid; text-align: center; font-size: 16px; font-weight: normal; color: var(--border-color); } #guidance .schedule table th:not(.time) { width: 45px; } #guidance .note { margin-top: 10px; font-size: 14px; padding: 10px 20px; background-color: var(--bg-white); border: var(--border-color) 2px solid; } #guidance .banner { display: block; width: 80%; margin-inline: auto; padding: 15px 80px; background-color: var(--accent-color); text-align: center; font-size: 16px; color: var(--text-white); } #guidance .banner:hover { text-decoration: none; background-color: var(--primary-color-dark); } /*-------------------------------------------------- ************************************************** フッター ************************************************** --------------------------------------------------*/ footer { padding-top: 60px; } footer .footer_logo img { display: inline-block; max-width: 250px; height: auto; } footer .footer_site_info > div { margin: 0 10px; } footer .footer_menu { width: 100%; background-color: var(--bg-light-gray); } footer .footer_menu .menu { display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 15px 0; } footer .footer_menu .menu li { margin: 0 20px; } footer .footer_menu .menu li a { font-size: 14px; color: var(--text-primary); } footer .footer_menu .menu li a:hover { text-decoration: none; } footer #copyright { width: 100%; padding: 10px 0; background-color: var(--accent-color); } footer #copyright small { font-size: 12px; } /*-------------------------------------------------- ************************************************** その他 (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: var(--accent-color); } .side_btn { position: fixed; display: flex; align-items: center; writing-mode: vertical-rl; bottom: 200px; right: 0; width: 60px; padding-inline: 40px; color: var(--text-white); font-size: 18px; text-align: center; letter-spacing: 1.8px; background-color: var(--link-color); z-index: 10; } .side_btn:hover { text-decoration: none; color: var(--text-white); opacity: 0.7; } /*-------------------------------------------------- 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: var(--bright-color); border: 1px solid var(--bright-color); background: var(--bg-white); font-weight: bold; font-size: 14px; } .pager-area a.page-numbers:hover { color: var(--text-white); background-color: var(--bright-color); border-color: var(--bright-color); } .pager-area .current { padding: 0; background: var(--bright-color); color: var(--text-white); font-size: 14px; } .pager-area .prev, .pager-area .next { border: 1px solid var(--bright-color); color: var(--bright-color); position: relative; font-size: 14px; } .pager-area a.next.page-numbers { margin-right: 0; } .pager-area .dots { background: transparent; border: none; }