@charset "UTF-8"; /*-------------------------------------------------- ************************************************** リセット ************************************************** --------------------------------------------------*/ /* 内で html5reset.css を読み込んでます */ /*-------------------------------------------------- ************************************************** デフォルト ************************************************** --------------------------------------------------*/ /* 内で default.css を読み込んでます */ /*-------------------------------------------------- ************************************************** 基本 ************************************************** --------------------------------------------------*/ body { margin: 0px; padding: 0px; background: none repeat scroll 0% 0%; background-attachment: scroll; font-family: "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", 游ゴシック体, "Yu Gothic", YuGothic, メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; line-height: 1.6; letter-spacing: 0.8px; font-size: 16px; font-weight: 400; color: #333; } img { width: 100%; height: auto; } .contents_inner { width: 95%; margin-left: auto; margin-right: auto; } /*-------------------------------------------------- ************************************************** テキスト・フォント ************************************************** --------------------------------------------------*/ em { color: #e58c93; font-weight: normal; font-style: normal; } .red { color: #ff0000; } .blue { color: #0000ff; } .green { color: #008000; } .black { color: #000; } .white { color: #fff; } /*-------------------------------------------------- ************************************************** リンク系（アンカー） ************************************************** --------------------------------------------------*/ a { color: #1111cc; text-decoration: none; transition: all 1s ease; } a:hover { color: #1111cc; 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; } /* フォームのsubmitを解除(iOS) */ input[type="submit"] { -webkit-appearance: none; border-radius: 0; } .link_btn_1 { display: inline-block; padding: 15px 20px; background-color: #00a8ca; text-align: center; font-size: 14px; color: #fff; width: 60%; margin-inline: auto; } .link_btn_1.w-md { max-width: 300px; width: 100%; } .link_btn_1:hover { text-decoration: none; background-color: #007a96; color: #fff; } /*-------------------------------------------------- ************************************************** ヘッダー ************************************************** --------------------------------------------------*/ header { position: fixed; background: #fff; left: 0; top: 0; z-index: 9999; width: 100%; height: 65px; padding: 15px 10px; } header.sub { padding-bottom: 15px; } header #header_logo a { display: inline-block; } header #header_logo img { max-height: 35px; width: auto; } /*-------------------------------------------------- ************************************************** グローバルナビゲーション ************************************************** --------------------------------------------------*/ /* メニューアイコン */ .head_nav #menu-btn-check { display: none; } .head_nav .menu-btn { /*position:fixed;*/ position: absolute; top: 10px; right: 10px; z-index: 90; display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; background-color: #19abe8; } .head_nav .menu-btn span, .head_nav .menu-btn span::before, .head_nav .menu-btn span::after { content: ""; position: absolute; display: block; width: 25px; height: 3px; background-color: #fff; border-radius: 3px; } .head_nav .menu-btn span::before { bottom: 8px; } .head_nav .menu-btn span::after { top: 8px; } /* 閉じるボタン */ .head_nav #menu-btn-check:checked ~ .menu-btn span { background-color: rgba( 255, 255, 255, 0 ); /*メニューオープン時は真ん中の線を透明にする*/ } .head_nav #menu-btn-check:checked ~ .menu-btn span::before { bottom: 0; transform: rotate(45deg); } .head_nav #menu-btn-check:checked ~ .menu-btn span::after { top: 0; transform: rotate(-45deg); } /* 開いた後のメニュー */ .head_nav > div[class^="menu"] { position: fixed; top: -120%; right: 0; z-index: 80; width: 80%; background-color: rgba(25, 171, 232, 0.9); transition: all 0.5s; } .head_nav #menu-btn-check:checked ~ div[class^="menu"] { top: 0; /*メニューを画面内へ*/ } .head_nav > div[class^="menu"] ul.menu { padding: 70px 20px 0; } .head_nav > div[class^="menu"] ul.menu > li { border-bottom: #fff solid 1px; } .head_nav > div[class^="menu"] ul.menu li:last-child { border-bottom: none; } .head_nav > div[class^="menu"] ul.menu li ul { padding-left: 30px; } .head_nav > div[class^="menu"] ul.menu li ul li { border-top: #fff 1px solid; } .head_nav > div[class^="menu"] ul.menu li a { text-decoration: none; position: relative; display: block; width: 100%; padding: 9px 15px 10px 0; font-size: 15px; color: #fff; } .head_nav > div[class^="menu"] ul.menu li a::before { content: ""; position: absolute; top: 16px; right: 11px; width: 7px; height: 7px; border-top: #fff solid 1px; border-right: #fff solid 1px; transform: rotate(45deg); } .head_nav > div[class^="menu"] ul.sub-menu { display: block; } /*-------------------------------------------------- ************************************************** パンくず ************************************************** --------------------------------------------------*/ .breadcrumb { -webkit-overflow-scrolling: touch; white-space: nowrap; overflow: auto; margin-top: 5px; padding: 5px 5%; font-size: 12px; color: #999; } .breadcrumb a { color: #999; } .breadcrumb > span > span { color: #333; } /*-------------------------------------------------- ************************************************** メインコンテンツ ************************************************** --------------------------------------------------*/ .contents_title_1 { text-align: center; } .contents_title_1 span { display: block; } .contents_title_1 .en { font-size: 11px; font-weight: bold; color: #11a0c5; } .contents_title_1 .ja { font-size: 19px; font-weight: bold; color: #333; } /*-------------------------------------------------- ************************************************** サブコンテンツ ************************************************** --------------------------------------------------*/ /* ページャー */ .wp-pagenavi { text-align: center; } /* 下層ページへのリンク */ .sub_page_link { width: 100%; margin: 50px auto 0; } .sub_page_link a { position: relative; display: block; width: 50%; height: 70px; } .sub_page_link a .name { position: absolute; top: 50%; z-index: 3; padding: 0 15px; font-size: 14px; 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: 70px; 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: 30px 0; background-color: rgba(34, 183, 232, 0.4); } #guidance section h2 { font-size: 16px; font-weight: bold; } #guidance section h2 + p { font-size: 14px; } #guidance .contact_box .mail, #guidance .schedule { margin-top: 20px; } #guidance .contact_box .contact_box_inner { width: 100%; padding: 20px 20px; background-color: #fff; } #guidance .contact_box .mail, #guidance .contact_box .tel { text-align: center; } #guidance .contact_box .mail p, #guidance .contact_box .tel > p { font-size: 12px; } #guidance .contact_box .mail a { display: inline-block; margin: 10px auto 0; padding: 10px 90px; background-color: #02a8c6; text-align: center; font-size: 13px; color: #fff; } #guidance .contact_box .mail a:hover { text-decoration: none; background-color: #007a96; color: #fff; } #guidance .contact_box .tel a[href^="tel:"] { padding-left: 23px; background: url(../img/common/icon-tel_1.png) no-repeat left center; background-size: 17px; font-size: 23px; font-weight: bold; color: #333; } #guidance .contact_box .tel div p { font-size: 12px; } #guidance .schedule table { width: 100%; height: auto !important; border: #0aa9c8 2px solid; } #guidance .schedule table th, #guidance .schedule table td { padding: 10px 0; background-color: #fff; border: #0aa9c8 1px solid; text-align: center; font-size: 11px; font-weight: normal; color: #0aa9c8; vertical-align: middle; } #guidance .schedule table th:not(.time) { width: 34px; } #guidance .contact_box .payment .images { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; align-items: center; } #guidance .contact_box .payment .images img.paypay { width: 130px; } #guidance .bg-black-50 { color: #fff; background: rgba(0, 0, 0, 0.45); padding: 8px; } #guidance .payment { margin-top: 8px; } #guidance .note { margin-top: 8px; } /*-------------------------------------------------- ************************************************** フッター ************************************************** --------------------------------------------------*/ footer { padding-top: 60px; } footer .footer_logo img { display: inline-block; max-width: 65%; } footer .footer_site_info > div { text-align: center; font-size: 12px; } footer .footer_site_info .tel { margin-top: 10px; } footer .footer_site_info .tel a { color: #333; } footer .sns li { margin: 0 10px; } footer .sns img { display: inline-block; width: 25px; height: auto; } footer .footer_menu { width: 100%; background-color: #f5f5f5; } footer .footer_menu .menu { padding: 20px 0; text-align: center; } footer .footer_menu .menu li { margin: 10px 0; } 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: 0; z-index: 9999; display: flex; justify-content: center; align-items: center; width: 45px; height: 45px; background-color: #22b7e8; } #pageup a img { width: 50%; } main { padding-top: 65px; }