@charset "UTF-8"; :root { /* スマートフォン用カラー変数 */ --sp-text-white: #fff; --sp-text-black: #333; --sp-text-gray: #999; --sp-link-color: #1111cc; --sp-accent-pink: #e58c93; --sp-red: #ff0000; --sp-blue: #0000ff; --sp-green: #008000; --sp-black: #000; --sp-bg-light-gray: #f5f5f5; --sp-primary-color: #0aa9ab; --sp-dark-color: #007a7d; --sp-nav-color: #19abb5; --sp-pageup-color: #22b7b5; } /*-------------------------------------------------- ************************************************** リセット ************************************************** --------------------------------------------------*/ /* 内で 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: var(--sp-text-black); } img { width: 100%; height: auto; } .contents_inner { width: 95%; margin-left: auto; margin-right: auto; } /*-------------------------------------------------- ************************************************** テキスト・フォント ************************************************** --------------------------------------------------*/ em { color: var(--sp-accent-pink); font-weight: normal; font-style: normal; } .red { color: var(--sp-red); } .blue { color: var(--sp-blue); } .green { color: var(--sp-green); } .black { color: var(--sp-black); } .white { color: var(--sp-text-white); } /*-------------------------------------------------- ************************************************** リンク系（アンカー） ************************************************** --------------------------------------------------*/ a { color: var(--sp-link-color); 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(--sp-link-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; } /* フォームのsubmitを解除(iOS) */ input[type="submit"] { -webkit-appearance: none; border-radius: 0; } .link_btn_1 { display: inline-block; padding: 15px 60px; background-color: var(--sp-primary-color); text-align: center; font-size: 14px; color: var(--sp-text-white); } .link_btn_1:hover { text-decoration: none; background-color: var(--sp-dark-color); color: var(--sp-text-white); } /*-------------------------------------------------- ************************************************** ヘッダー ************************************************** --------------------------------------------------*/ header { -webkit-box-align: center; align-items: center; position: fixed; background: var(--sp-text-white); left: 0; top: 0; z-index: 9999; width: 100%; padding: 12px 0 12px; } header.sub { padding-bottom: 15px; } header #header_logo { margin-left: 10px; } #header_logo img { max-width: 50%; } /*-------------------------------------------------- ************************************************** グローバルナビゲーション ************************************************** --------------------------------------------------*/ /* メニューアイコン */ .head_nav #menu-btn-check { display: none; } .head_nav .menu-btn { /*position:fixed;*/ position: absolute; top: 14px; right: 10px; z-index: 90; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 40px; height: 40px; background-color: var(--sp-nav-color); } .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: var(--sp-text-white); 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: -100%; 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: var(--sp-text-white) 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: var(--sp-text-white) 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: var(--sp-text-white) !important; } .head_nav > div[class^="menu"] ul.menu li a::before { content: ""; position: absolute; top: 16px; right: 11px; width: 7px; height: 7px; border-top: var(--sp-text-white) solid 1px; border-right: var(--sp-text-white) 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: var(--sp-text-gray); } .breadcrumb a { color: var(--sp-text-gray); } .breadcrumb > span > span { color: var(--sp-text-black); } /*-------------------------------------------------- ************************************************** メインコンテンツ ************************************************** --------------------------------------------------*/ .contents_title_1 { text-align: center; } .contents_title_1 span { display: block; } .contents_title_1 .en { font-size: 11px; font-weight: bold; color: var(--sp-primary-color); } .contents_title_1 .ja { font-size: 19px; font-weight: bold; } /*-------------------------------------------------- ************************************************** サブコンテンツ ************************************************** --------------------------------------------------*/ /* ページャー */ .wp-pagenavi { text-align: center; } /* 下層ページへのリンク */ .sub_page_link { width: 100%; margin: 50px auto 0; } .sub_page_link a { position: relative; display: block; /* width: 50%; */ width: 100%; height: 70px; } .sub_page_link a .name { position: absolute; top: 50%; z-index: 3; padding: 0 15px; font-size: 14px; -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: 70px; 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: 30px 0; } #guidance section h2 { font-size: 16px; font-weight: bold; } #guidance section h2 + p { font-size: 14px; } #guidance .contact_box .mail, #guidance .contact_box .tel, #guidance .schedule { margin-top: 20px; } #guidance .contact_box .tel.no_mail { width: 100%; padding: 20px 20px; background-color: var(--sp-text-white); } #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: var(--sp-primary-color); text-align: center; font-size: 13px; color: var(--sp-text-white); } #guidance .contact_box .mail a:hover { text-decoration: none; background-color: var(--sp-dark-color); color: var(--sp-text-white); } #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: var(--sp-text-black); } #guidance .contact_box .tel div p { font-size: 12px; } #guidance .schedule table { width: 100%; height: auto !important; border: var(--sp-primary-color) 2px solid; } #guidance .schedule table th, #guidance .schedule table td { padding: 10px 0; background-color: var(--sp-text-white); border: var(--sp-primary-color) 1px solid; text-align: center; font-size: 11px; font-weight: normal; color: var(--sp-primary-color); vertical-align: middle; } #guidance .schedule table th:not(.time) { width: 34px; } #guidance .note { margin-top: 10px; font-size: 14px; padding: 6px 10px; background-color: var(--sp-text-white); border: var(--sp-primary-color) 2px solid; text-align: center; } #guidance .banner { display: block; width: 100%; padding: 15px 40px; background-color: var(--sp-primary-color); text-align: center; font-size: 16px; color: var(--sp-text-white); } /*-------------------------------------------------- ************************************************** フッター ************************************************** --------------------------------------------------*/ footer { padding-top: 60px; } footer .footer_logo img { display: inline-block; max-width: 50%; height: auto; } 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: var(--sp-text-black); } footer .sns li { margin: 0 10px; } footer .sns img { display: inline-block; width: 25px; height: auto; } footer .footer_menu { width: 100%; background-color: var(--sp-bg-light-gray); } 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: var(--sp-text-black); } footer .footer_menu .menu li a:hover { text-decoration: none; } footer #copyright { width: 100%; padding: 10px 0; background-color: var(--sp-pageup-color); } footer #copyright small { font-size: 12px; } /*-------------------------------------------------- ************************************************** その他 (PageUpボタン 追従系 jsに関わるcssなど。) ************************************************** --------------------------------------------------*/ #pageup a { position: fixed; right: 0; bottom: 0; z-index: 9999; display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; background-color: var(--sp-dark-color); } #pageup a img { width: 50%; } .side_btn { position: fixed; bottom: 0px; z-index: 10; display: flex; align-items: center; justify-content: center; width: calc(100% - 50px); height: 50px; padding: 5px 20px; font-size: 18px; text-align: center; color: var(--sp-text-white); background-color: var(--sp-pageup-color); } main { padding-top: 65px; }