@charset 'UTF-8'; /*上書きとしてのcustom.css*/ .no-fouc { /*FOUC(Flash Of Unstyled Content) 対策2021.06.27*/ /*にクラス名を記述*/ /*footer.phpに記述したjavascriptで制御*/ display: none; } p:empty { display: none; } body { /*fontawesomeがEdgeを表示させるためfont-familyをbodyに明示*/ font-family: "BlinkMacSystemFont", "Helvetica Neue", Helvetica, "Arial", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /*background: repeat url("../img/bg_white-aluminium_tate6.jpg");*/ color: #01354a; } .container-fluid { /*左右のpadding 15pxを上書き*/ padding-right: 0px; padding-left: 0px; } .max-w { max-width: 1110px; margin: 0 auto; } #page-coding .max-w { /*固定ページ内用定義*/ max-width: 940px; padding: 0 15px; } .contentMinHeight { min-height: 400px; } /*Gutenberg関係*/ .alignwide { max-width: none; width: auto; } .alignfull { max-width: none; width: auto; /*埋め込み用*/ /*モバイルファースト*/ margin-left: calc(calc(50% - 50vw)); margin-right: calc(calc(50% - 50vw)); } @media (min-width: 768px) { .alignfull { max-width: none; width: auto; /*埋め込み用*/ /*8pxと9pxは、足すと17pxなのでスクロールバーの幅と同じになる。 Firefox、Chrome、Edgeが17px　IE11が20px*/ margin-left: calc(calc(50% - 50vw) + 8px); margin-right: calc(calc(50% - 50vw) + 9px); } } a.anchor { /*リンク先での位置調整*/ display: block; padding-top: 100px; margin-top: -100px; } @media (max-width: 767px) { a.anchor { /*リンク先での位置調整*/ display: block; padding-top: 140px; margin-top: -140px; } } a, a:visited { color: #01354a; } p.head-txt-link a, p.head-txt-link a:visited { color: #ffffff; } a:hover { color: #007bff; text-decoration: underline; } .site-footer a { color: #ffffff; } /*div.custom-logo-link:hover,img.custom-logo-link:hover ,a.custom-logo-link:hover { opacity: 0.8; }*/ .link-hover:hover { opacity: 0.8; } h1, h1.page-title, h1.entry-title { /*font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;*/ font-size: 1.7rem; font-weight: 400; margin-bottom: 2rem; } .page h1.entry-title, div.as-h1 { position: relative; margin-bottom: 60px; } .page h1.entry-title:before, div.as-h1:before { content: ""; position: absolute; bottom: -15px; display: inline-block; width: 60px; height: 5px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); background-color: #00a1e9; border-radius: 2px; /*font-size: 0.1rem; color: #00a1e9;*/ } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { line-height: 1.8; margin: 0 0 0 0; } .notes h2 { margin-bottom: 1rem; } h1.twoTone { border-bottom: solid 3px #00a1e9; position: relative; } h1.twoTone:after { position: absolute; content: " "; display: block; border-bottom: solid 3px #01354a; bottom: -3px; width: 3%; } h1 { /*font-family: kings-caslon-display, serif;*/ } h1.notAccent span { border-bottom: none; } h2 { font-size: 1.5rem; font-weight: 400; } h2.entry-title { font-size: 1rem; font-weight: 400; } #page-coding h2 { position: relative; /*padding: .25em 0 .5em .75em;*/ padding: 0.25rem 0 0 0.5rem; border-left: 6px solid #01354a; } #page-coding h2::before { position: absolute; left: -6px; bottom: 0; content: ""; width: 6px; height: 75%; background-color: #00a1e9; } #page-coding h2::after { position: absolute; left: 0; bottom: 0; content: ""; width: 100%; height: 0; border-bottom: 1px solid #ccc; } #secondary h2.widget-title { padding-top: 5px; padding-left: 5px; padding-bottom: 5px; color: #ffffff; background-color: #00a1e9; } h3, h4, h5, h5 { font-size: 1rem; font-weight: 400; } a:focus, *:focus { outline: none; /* !important;*/ } th { font-weight: 400; } dt { font-weight: 400; } #primary p { line-height: 1.8; margin-bottom: 1.8rem; } /*#primary div.underline-dash p { background-image: url( https://takagi-iin.com/wp-content/themes/takagi-iin/img/underline_00a1e9.gif ); line-height: 28px; margin-bottom: 0px; }*/ p.hanging-indent { padding-left: 1.25rem; /* ケースによって調整する */ text-indent: -1.25rem; /* ケースによって調整する */ } p.hanging-indent span:first-child { display: inline-block; width: 1.25rem; /* ケースによって調整する */ text-indent: 0; } p.f-a-indent { /*

とFontAwesomeとの組み合わせ*/ /*padding-left: 1.25rem; text-indent: -0.6rem;*/ padding-left: 1.1rem; text-indent: -0.55rem; } .takagi_table p.hanging-indent { padding-left: 1rem; /* ケースによって調整する */ text-indent: -0.8rem; /* ケースによって調整する */ } .takagi_table p.hanging-indent span { width: 0.8rem; /* ケースによって調整する */ } #primary span.width_auto { width: auto; } ul { list-style-type: none; margin: 0 0 1rem 0; padding-left: 0px; } ol { list-style-type: none; } ul.disc { list-style-type: disc; & li { margin-bottom: 10px; } & ul { list-style-type: circle; } } ol.decimal { list-style-type: decimal; } .textwidget ul { margin-left: 0px; padding-left: 0px; } hr.bgc { height: 1px; background-color: #00a1e9; width: 100%; border: none; } #page-coding hr.bgc { margin-bottom: 48px; } .mark, mark { padding: .2em 0; } .accent-color { color: #00a1e9; /*テーマブルー*/ } .bgc-lb { background-color: #f6f9fb; /*ライトブルー*/ } .bgc-pw { background-color: #f7f6f5; /*パールホワイト*/ } .bgc-fff { background-color: #ffffff; } .under-pen { background: linear-gradient(transparent 0%, #fff3b8 0%); } .custom-logo-link img { -ms-interpolation-mode: bicubic; } /*microsftoジャギー対策*/ /*ページトップの帯（外来名など）*/ .top-obi { background-color: #01354a; color: #ffffff; border-bottom: 3px solid #00a1e9; } /*カスタムメニュー（ナビバー）関係*/ nav a[href*="#"] { cursor: default !important; } .navbar { padding-right: 1.25rem; padding-left: 1.25rem; } .navbar-brand { margin-right: 0rem; } .dropdown-item:focus, .dropdown-item:hover { background-color: #d6f0fc; } .dropdown-item.active, .dropdown-item:active { color: #01354a; background-color: #eeeeee; } .navbar-light .navbar-nav .active > .nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show > .nav-link { color: #01354a; } .navbar-light .navbar-nav .nav-link { color: #1a1a1a; } .navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover, .opacity-link:focus, .opacity-link:hover { opacity: 0.7; } @media (min-width: 768px) { /*メニューの文字の改行回避*/ .navbar-expand-md .navbar-nav .nav-link { padding-right: 0rem !important; padding-left: 0rem !important; } } #articles-scroll { box-shadow: 0px 4px 3px -3px rgba(0, 0, 0, 0.1); } .dropdown-menu { position: absolute; top: 100%; left: 0; z-index: 1000; display: none; float: left; min-width: 10rem; padding: 0rem 0; /*アレンジ*/ margin: 0.125rem 0 0; font-size: 1rem; color: #212529; text-align: left; list-style: none; background-color: transparent; /*アレンジ*/ background-clip: padding-box; border: 0px solid rgba(0, 0, 0, 0); /*アレンジ*/ border-radius: 0rem; /*アレンジ*/ width: 100%; /*アレンジ*/ } .dropdown-menu .menu-item { margin-right: 0.5rem; } a.dropdown-item { background-color: #fff; border-bottom: 1px; border-color: #abb1b5; border-style: solid; padding: 0.5rem 1.5rem; } .navbar-light .nav-item .nav-link::before { border-color: rgba(18, 116, 202, 0.9); } .navbar-light .navbar-toggler { border-color: #00a1e9; border-width: 2px; } .for-fixed-top { /*前の要素のレイヤーが上がって、いっきに下の要素の配置が詰まる解消*/ /*関連コードがfooter.phpにもあり*/ padding-top: 130px; /*目視調整*/ } .for-fixed-top-pc { /*前の要素のレイヤーが上がって、いっきに下の要素の配置が詰まる解消*/ /*関連コードがfooter.phpにもあり*/ padding-top: 93px; /*目視調整*/ } /*.fixed-topはfooter.php内コードで動的にheader.php内の#articles-scrollへ追記*/ .navFixed { background: #ffffff; opacity: 0.98; /*100%時の0.98と揃えている*/ } @media screen and (max-width: 767px) { .navFixed { animation: fadeIn 0.7s cubic-bezier(0.9, 0.54, 0, 0.83) 1 forwards; } } @media screen and (min-width: 768px) { .navFixed { animation: fadeIn 1.2s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 0.98; } } /*スマホのヘッダー領域の電話番号*/ @media screen and (max-width: 767px) { .sp-tel { font-size: 1.5rem; font-weight: 600; } } .navbar-toggler-icon { height: 2em; } /*ヘッダー画像*/ .top_true { /*準備*/ } @media screen and (max-width: 767px) { body div.top_false { background-position: calc(50% + 160px) 50%; } } div.top_false { min-height: 200px; background-position: center center; background-size: cover; background-repeat: no-repeat; display: flex; justify-content: center; /*必要*/ align-items: center; text-align: center; /*必要*/ /*overflow: hidden;*/ font-weight: bold; } .top_false p { margin-bottom: 0px; min-width: 343px; padding: 0 1rem; font-size: 1.5rem; /*font-family: kings-caslon-display, serif;*/ color: #01354a; /*font-weight: bold;*/ text-shadow: 0 0 4px rgba(255, 255, 255, 0.9); } .top_false p span { display: inline-block; } @media screen and (max-width: 767px) { .top_false p { font-size: 1.25rem; } } /*Swiper トップスライド*/ .swiper-container { } .swiper-wrapper .swiper-slide { background-position: center center; background-size: cover; background-repeat: no-repeat; height: 45vh; /*任意*/ overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .swiper-slide>div { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* color: #01354a; */ color: #1f3134; font-weight: bold; font-family: sans-serif; text-align: center; } div.swiper-slide div p { text-shadow: 0 0 4px rgba(255, 255, 255, 0.9); padding: 1.5rem 1rem; margin: 0 -94px; /*マイナスのマージンで親要素より長く。iphoneX約375pxの半分の半分*/ font-size: 1.5rem; /*最小値*/ } div.swiper-slide div p span { display: inline-block; } @media (min-width: 576px) { div.swiper-slide div p { margin: 0 -144px; /*マイナスのマージンで親要素より長く。sm～576の半分の半分*/ font-size: 1.25rem; } } @media (min-width: 768px) { div.swiper-slide div p { margin: 16px -100px; /*親のdivよりも広く*/ font-size: 1.75rem; } } @media (min-width: 992px) { div.swiper-slide div p { /*font-size: 3rem;*/ /*font-size: 2.7rem;*/ font-size: 2rem; /*最大値*/ } } p.contrast-up { background-color: rgba(240, 240, 240, 0.7); } /*フローティングバナー*/ @media screen and (max-width: 767px) { aside .mimi_r { display: none; } } @media screen and (min-width: 768px) { aside .mimi_r { z-index: 1031; position: fixed; right: 0; left: auto; padding: 1rem; color: #ffffff; font-weight: bold; background-color: #00a1e9; border-radius: 0.25rem 0rem 0rem 0.25rem; /*width: 70px;*/ /*writing-mode: vertical-rl;*/ } } .close { font-size: 1.5rem; } .close:hover { /* color: transparent;*/ } .close:focus { outline: none; } /*ボタンデザイン*/ .btn { background: #00a1e9; padding: 16px 40px; text-decoration: none; border-radius: 30px; transition-property: opacity; -webkit-transition-property: opacity; transition-duration: 0.5s; -webkit-transition-duration: 0.5s; } /*待合室状況案内*/ .waiting-display p:first-child { color: #00a1e9; } /*高木医院の特徴*/ .circle { position: relative; display: inline-block; width: 150px; height: 150px; margin-bottom: 1rem; border-radius: 50%; border: solid 3px #00a1e9; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .circle span { position: absolute; display: inline-block; left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 145px; text-align: center; font-size: 1.2rem; } .circle .t-num { position: absolute; display: inline-block; left: 80%; top: 10%; background-color: #ffffff; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 1.5rem; height: 2.4rem; /*数字の場合2.6*/ text-align: center; font-size: 1.75rem; /*数字の場合2.2*/ } .midashi-box { position: relative; padding: 0.5rem 1em; border: solid 3px #00a1e9; border-radius: 8px; } .midashi-box .midashi-box-title { position: absolute; display: inline-block; top: -0.7rem; left: 6.5%; /*left: 30px;*/ padding: 0 0.5rem; line-height: 1; font-size: 1.2rem; background: #fff; } /*最新のお知らせ*/ #primary section.latest-info p:last-child { margin-bottom: 0px; } /*これまでのお知らせ*/ ul.postList li { padding-left: 0.8rem; text-indent: -0.25rem; line-height: 1.5; border-bottom: 1px solid #e4e4e4; } ul.postList li:not(:first-child) { padding-top: 1.5rem; } ul.postList li:first-child { padding-top: 0rem; } ul.postList li span { display: inline-block; } ul.navbar-nav { margin: 0; } /*パンくずリスト*/ .bread-crumb { padding-top: 1rem; padding-bottom: 1rem; color: #222222; /*background-color:#f0efea;*/ background: repeat url("../img/bg_white-aluminium_yoko.jpg"); box-shadow: 0px 4px 3px -3px rgba(0, 0, 0, 0.1); } .bread-crumb p { font-size: 1rem; padding-top: 1rem; padding-bottom: 1rem; margin-bottom: 0px; } .bread-crumb strong.current { font-weight: 400 !important; } div.breadcrumbs br { display: none; } /*ページナビ（一覧）*/ .page_navi { /*padding-top:10vw; padding-bottom:10vw;*/ padding-top: 50px; padding-bottom: 50px; padding-left: 0px; margin-left: 0px; /*text-align:center;*/ clear: both; } .page_navi li { display: inline; list-style-type: none; } .page_navi li.current span { color: #ffffff; background-color: #01354a; } .page_navi li a { padding: 7px 10px; background-color: #ffffff; color: #5f2f08; border: 1px solid #01354a; } .page_navi li a:hover { background-color: #01354a; color: #ffffff; } .page_navi li.page_nums span { padding: 7px 10px; background-color: #01354a; color: #ffffff; border: 1px solid #01354a; } .page_navi li.current span { padding: 7px 10px; color: #ffffff; border: 1px solid #01354a; } /*記事個別ページ送り*/ .page_navi_kobetsu { display: flex; justify-content: space-between; padding-bottom: 50px; } /*テーブル関係（アクセス）*/ .takagi_table table { width: 100%; /*margin: 20px 0;*/ /*margin-bottom: 20px;*/ border-collapse: collapse; border-spacing: 0; } .takagi_table table th, .takagi_table table td { /*white-space: nowrap;*/ padding: 20px; line-height: 1.5; vertical-align: top; border-left: 1px solid #fff; border-bottom: 1px solid #fff; } .takagi_table table th { /*white-space: nowrap;*/ width: 30%; background-color: #f0f0f0; } .takagi_table table td { background-color: #fafafa; } .takagi_table table td p { margin-bottom: 0px; } .takagi_table span { display: inline-block; } @media screen and (max-width: 767px) { .takagi_table table th, .takagi_table table td { width: 100%; display: block; } .takagi_table span.mb { margin-bottom: 10px; } .aboutus-pl { padding-left: 1.5rem; } } .takagi_table dl { margin-bottom: 0px; } .takagi_table dd { margin-right: 0px; } .takagi_table caption { caption-side: top; /*位置*/ color: #01354a; padding-top: 0px; } /* テーブルの1列目をセル内改行をしないようにする */ .col1-nowrap td:nth-of-type(1) { white-space: nowrap; width: 30%; } /*保育園採用情報関係*/ div.hoikuen .takagi_table table th { background-color: #d1de4c; } div.hoikuen .takagi_table table th h3, p.accent-color a { color: #5f6527; } div.hoikuen .takagi_table table td { background-color: #f0f6da; } /*inputボタン高さ調整*/ button, input[type="button"], input[type="reset"], input[type="submit"] { border: 1px solid; border-color: #ccc #ccc #bbb; border-radius: 3px; background: #e6e6e6; color: rgba(0, 0, 0, 0.8); font-size: 12px; font-size: 0.8rem; line-height: 1.5; padding: 0.5rem 0.5rem 0.2rem; text-align: center; } /*検索フォーム関係*/ input.search-submit:hover { background-color: #f0efea; } .search-form label { width: 78%; } .search-form input[type="search"] { width: 100%; } .search-form input[type="submit"] { width: 20%; } /*アーカイブ　ドロップダウンボタン*/ select { padding-bottom: 5px; } /*診療時間、院長プロフィール*/ .profile table, .schedule table { width: 100%; } .profile th, .schedule th { width: 30%; } .profile ul, .schedule ul { margin-left: 0rem; padding-left: 0rem; } .schedule_mark { color: #00a1e9; } .profile th, .profile td, .schedule th, .schedule td { border-bottom: 1px solid #e4e4e4; vertical-align: middle; } .profile th, .profile td { line-height: 2rem; } .tr_next th, .tr_next td { padding-top: 0.5rem; padding-bottom: 0.3rem; } /*内視鏡検査*/ @media screen and (max-width: 767px) { div.pl { padding-left: 5px; } div.pr { padding-right: 5px; } } @media screen and (min-width: 768px) { div.pl { padding-right: 15px; } div.pr { padding-left: 15px; } } /*固定ページコンテンツコーディング用*/ /*.page-codingでラップする。*/ #page-coding li { line-height: 1.8; } /*一覧でのリンク付きタグ名*/ div.entry-meta a { font-weight: bold; } /*pcでの電話番号リンク対策*/ @media (min-width: 768px) { a[href^="tel:"] { pointer-events: none; } } /*サイドバー*/ aside#secondary { /*padding-top: 15px; margin-bottom: 15px; background: repeat url("../img/bg_white-aluminium_tate3.jpg");*/ } /*AddToAny Share Buttons*/ div.addtoany_share_save_container { margin-top: 3rem !important; } /*map*/ .g-map { width: 100%; position: relative; padding-top: 56.25%; } .g-map iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /*フッター*/ footer.site-footer { /*font-size:0.9rem;*/ background-color: #00a1e9; color: #ffffff; border-bottom: solid 5px #01354a; } @media screen and (max-width: 575px) { footer.site-footer div.row > div { border-left: none; } footer.site-footer div.under-line { width: 100%; padding-top: 1rem; border-left: none; border-bottom: solid 1px #01354a; } } @media screen and (min-width: 576px) { footer.site-footer div.row > div { border-left: 1px solid #01354a; border-bottom: none; } footer.site-footer div.under-line { display: none; } } footer.site-footer h3.widget-title { font-size: 1rem; padding-bottom: 1rem; } footer p.footer-link { margin-bottom: 1rem; }