/* ========================================================================== 元サイトの末尾にあった追加インラインCSS(テーマ側の個別スタイル調整分)。 カスケード順で最後に読み込まれ、他の全スタイルを上書きする。 ========================================================================== */ body { font-size:14px; } a {color: #6C6C6C;} a:hover {color: #CCCCCC;} #global_menu ul ul li a{background:#6C6C6C;} #global_menu ul ul li a:hover{background:#CCCCCC;} #return_top{background-color:#6C6C6C;} #return_top:hover{background-color:#CCCCCC;} .google_search input:hover#search_button, .google_search #searchsubmit:hover { background-color:#CCCCCC; } .widget_search #search-btn input:hover, .widget_search #searchsubmit:hover { background-color:#CCCCCC; } #submit_comment:hover { background:#6C6C6C; } #index-news-ul .index-news-date, .post_title { font-family: 'メイリオ',Meiryo,sans-serif; } #maincopy h2 { font-size: 24px; color: #5e3d2e; margin: 0 auto 5px; } .kotei-page h3 { background: url("https://terada-anihos.com/wp-content/uploads/2018/02/h3_logo.png") right no-repeat; border-top: 3px solid #5e3b2f; border-bottom: 1px dashed #5e3b2f; padding: 16px 45px 12px 10px; font-size: 1.5em; margin-bottom: 25px; color:#5e3b2f; text-align:left; line-height:1.2em; } .kotei-page h4 { background: #fbf3dd; font-size: 1.2em; font-weight: normal; line-height: 1; padding: 0.8em 0 0.8em 0.5em; display: block; border-bottom:none; margin-bottom:20px; } .kotei-page h4:before { content: none; } .t-text { font-weight:bold; font-size:20px; text-align:center; letter-spacing:0.4em; color:#fff; } .w__90-60, .w__90-30 {width: 90%;} .color__lGray {color: #666;} .center {text-align: center;} .bg__gray { background-color: #f4f4f4; padding-top: 3em; padding-bottom: 3em; } .m-auto { margin-left: auto; margin-right: auto; } .mb__3em {margin-bottom: 3em;} .mb__5em {margin-bottom: 5em;} .mb__8em {margin-bottom: 8em;} h2.postH2 { letter-spacing: .2em; } .f-car { font-size:20px; font-weight:bold; color:#f15c29; line-height:1.5em; } .f-hospital, .f-tel { font-size:20px; font-weight:bold; color:#fff; line-height:1.5em; } table.f-time { border: 1px solid #bbb; margin-top: -10px; margin-bottom: 5px; } table.f-time th, table.f-time td { border: 1px solid #bbb; padding:5px; text-align:left; } @media screen and (min-width: 801px){ #shinryo-page .shinryo-detail h5 { margin: 25px 0; } .kotei-page .title h6 { padding: 0; margin: 0; float: left; width: 50%; text-align: center; font-size: 20px; font-weight: bold; border-bottom: 0; letter-spacing: 0.2em; position: absolute; top: 0; bottom: 0; margin: auto; height: 1em; vertical-align: middle; background:none; } #shinryo-page #animals p.img img { width: 55%; margin: 10px auto 0 auto; } #index-news { border-bottom:none; width: 770px; background: #f1e8e1; padding: 10px 10px 3px 10px; border-radius: 5px; margin-bottom: 15px; } #index-news-ul li { width: 770px; border-bottom: dashed 1px #d2b7a1; margin: 10px 0 0; padding: 3px 10px 10px 10px; font-size: 12px; } .index-recommend-box { display: block; float: left; width: 245px; height: 340px; overflow: hidden; margin-left: 27px; margin-bottom: 23px; background: #f5ede8; padding: 0 0 25px 0; border-radius: 0 0 10px 10px; } #logo_image { width: 1160px; margin: 0 auto; padding-top: 20px; } #logo_image #logo { margin: 0; padding: 0; position: static; } .footer_widget { width: 360px; font-size: 13px; } #footer a:hover { color: #f15c29; } } @media screen and (min-width: 800px){ .w__90-60 {width: 60%;} .w__90-30 {width: 30%;} #index-news { border-bottom:none; width: 96%; background: #f1e8e1; padding: 10px 10px 3px 10px; border-radius: 5px; margin-bottom: 15px; } #index-news-ul li { width: 96%; border-bottom: dashed 1px #d2b7a1; margin: 10px 0 0; font-size: 12px; } } @media screen and (max-width: 800px){ #footer-inner { background:#000; color:#fff; } } @media screen and (max-width: 767px){ .kotei-page .title { text-align: center; padding-bottom:15px; } .kotei-page .title h6 { font-size: 18px; letter-spacing: 0.2em; margin: 0; height: 2em; padding-top:10px; } } a:hover img{ opacity:0.5; } #header{ position: fixed; z-index: 9999999; background: #fff; border-top: solid 5px #000; } @media screen and (min-width:801px){ #contents{ padding-top: 222px; } } @media screen and (max-width:801px){ #contents{ padding-top: 60px; } } #wrapper{ border-top: none; } .kotei-page dl { display: inline-block; width: 45%; margin-right: 4%; } .t-center { text-align: center; } .b-m { margin-bottom: 15px; } #kyuzin table { margin: 25px 0; } #kyuzin table { margin: 25px 0; width: 80%; text-align: center; } #kyuzin a { margin: 10px 0; display: block; font-size: 1.6em; } @media screen and (max-width:800px) { #kyuzin table { margin: 25px 0; width: 100%; text-align: center; } } #healthcheck-page h3 { text-align: left; } .cell-cst th { vertical-align: middle !important; } .page #header{ margin-bottom: 0; } /* この#contentsの上書きは元サイトではフロントページのみに出力されていたルールのため、 .home に限定してスコープする(そうしないと固定ページ側の padding-top: 60px が 0にリセットされ、固定ヘッダーの下にコンテンツが潜り込んでしまう)。 */ .home #contents{ padding: 0!important; padding-top: 180px; } .telopWrapper{ background: #f1e8e1; } @media screen and (max-width: 800px) { .telopWrapper{ padding-top: 5rem; } } .telop { margin : 0 auto 40px; width : 100%; max-width: 1200px; font-size : 24px; text-align : center; overflow : hidden; } .telop ul{ margin:0; display : inline-block; padding-left: 100%; white-space : nowrap; line-height : 1em; animation : scrolltelop 30s linear infinite; color: #6a4d3d; } .telop ul li{ display:inline; margin:0 100px 0 0; font-weight:bold; font-size: 18px; } @keyframes scrolltelop{ 0% { transform: translateX(0)} 100% { transform: translateX(-100%)} } #yoyaku dl { width: 95%; } /* ========================================================================== [独自追加/元サイトからの意図的な変更点] 幅384px以下では、Recommended欄(.index-recommend-box)の高さがタイトルの 折り返し行数で変わるため、float:leftのままだと同じ行の左右で高さが揃わない時に 次のボックスが左側の空きを待たずに右側の隙間へ入り込み、段組みが崩れて見える。 (元サイトはfloatのままのため、表示順がランダムな時にたまに同じ崩れ方をする) ここでは384px以下に限り#index-recommendをflexに変更し、行ごとに高さを揃えて 崩れないようにする。384px超のPC/SPの見た目は変更しない。 ========================================================================== */ @media screen and (max-width: 384px) { #index-recommend { display: flex; flex-wrap: wrap; } }