@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; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; 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 60px; background-color:#00a8ca; text-align:center; font-size:14px; color:#fff; } .link_btn_1:hover{ text-decoration:none; background-color:#007a96; color:#fff; } /*-------------------------------------------------- ************************************************** ヘッダー ************************************************** --------------------------------------------------*/ header{ -webkit-box-align:center; align-items:center; padding:10px 0 0; } header.sub{ padding-bottom:15px; } header #header_logo{ width:60%; margin-left:10px; } /*-------------------------------------------------- ************************************************** グローバルナビゲーション ************************************************** --------------------------------------------------*/ /* メニューアイコン */ .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: #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:-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:#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:14px 15px 15px 0; font-size:17px; color:#fff !important; } .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:16px; -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 > div{ 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(imgs/other/pc/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{ width:100%; } #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; } #guidance .schedule table th:not(.time){ width:34px; } /*-------------------------------------------------- ************************************************** フッター ************************************************** --------------------------------------------------*/ 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:#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{ width:100%; padding:10px 0; } 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:45px; height:45px; background-color:#22b7e8; } #pageup a img{ width:50%; } header{ position: fixed; background: #FFF; left: 0; top: 0; z-index: 9999; width: 100%; padding: 12px 0 3px; } #header_logo img { max-height: 43px; width: auto; } main { padding-top: 65px }