/* Theme Name: animal Theme URI: Author: Author URI: Description: Version: 1.0 License: License URI: Tags: Text Domain: */ @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; } .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; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; 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; color:#333; } .link_btn_1{ display:inline-block; padding:15px 80px; background-color:#00a8ca; text-align:center; font-size:16px; color:#fff; } .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:300px; height:auto; } /*-------------------------------------------------- ************************************************** グローバルナビゲーション ************************************************** --------------------------------------------------*/ .head_nav{ margin-right:40px; } .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:37px; } .head_nav .menu a{ font-size:14px; } body.home .menu a{ color:#fff; } header.active .head_nav .menu a{ color:#333; } .head_nav .menu a:hover{ text-decoration:none; 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; } /*-------------------------------------------------- ************************************************** メインコンテンツ ************************************************** --------------------------------------------------*/ .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; -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 > div{ width:490px; min-height:80px; padding:0 20px; background-color:#fff; } #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; pointer-events: all!important; } #guidance .contact_box .tel div p{ font-size:14px; } #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; } /*-------------------------------------------------- ************************************************** フッター ************************************************** --------------------------------------------------*/ footer{ padding-top:60px; } footer .footer_logo img{ display:inline-block; max-width:300px; height:auto; } 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:-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:#333; } footer .footer_menu .menu li a:hover{ text-decoration:none; } footer #copyright{ width:100%; padding:10px 0; } footer #copyright small{ font-size:12px; } footer .f-bnr-flex{ display: flex; justify-content: center; flex-wrap: wrap; margin: 30px 0; } footer .f-bnr-flex a{ width: 230px; display: inline-block; } footer .f-bnr-flex a.fbk{ margin-right: 20px; } footer .f-bnr-flex a img{ width: 100%; } /*-------------------------------------------------- ************************************************** その他 (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; } /*-------------------------------------------------- 2310追加 - 2506更新 --------------------------------------------------*/ a.blog_btn { display: inline-block; width: 230px } .float-banner { position: fixed;    z-index: 0; bottom:135px; right:10px; } .trimming_bnr { position: relative; } .banner-close { font-weight: bold; position: absolute; top: -3px; right: -4px; z-index: 99999; padding: 4px 8px; border: none; background-color: #f8f8f8; border-radius: 25px; cursor: pointer; -webkit-box-shadow: 0 0 7px rgb(0 0 0 / 40%); box-shadow: 0 0 7px rgb(0 0 0 / 40%); } /*-------------------------------------------------- 2504追加 --------------------------------------------------*/ .banner_box{ position:fixed; bottom:160px; right:10px; z-index:999; } .banner_box a{ display: block; } .banner_box a img{ max-width: 250px; }