@charset "UTF-8"; :root { --serif: "Shippori Mincho", serif; } /*----------------------  リセット ----------------------*/ * { box-sizing: border-box; margin: 0; padding: 0; } p { display: block; margin: 1em 0; } strong { font-weight: bold; } em { font-style: italic; } blockquote { display: block; -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 40px; -webkit-margin-end: 40px; } /* img */ .aligncenter { display: block; margin: 0 auto; } .alignright { float: right; } .alignleft { float: left; } img[class*="wp-image-"], img[class*="attachment-"] { height: auto; max-width: 100%; } /* clearfix */ .clearfix { overflow: hidden; zoom: 1; } .clearfix:after { content: ""; display: block; clear: both; } * { margin: 0; padding: 0; border-collapse: collapse; box-sizing: border-box; list-style: none; outline: none; -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; backface-visibility: hidden; } body { /* font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; */ font-family: sans-serif; font-size: 16px; color: #222; margin: 0; padding: 0; line-break: normal; word-break: break-all; border-collapse: collapse; line-height: 1.6rem; letter-spacing: normal; /* background-image: url(images/bg.jpg); */ } a, a:link, a:hover, a:visited, a:active { color: #099; text-decoration: none; } td { text-align: left; vertical-align: top; } div { clear: both; } button { border-collapse: collapse; border-color: #fff; border-style: solid; border-width: 0px; background-color: transparent; margin: 0; padding: 0; cursor: pointer; } img { vertical-align: top; backface-visibility: hidden; } [data-ruby] { position: relative; } [data-ruby]::before { content: attr(data-ruby); position: absolute; top: -1em; left: 0; right: 0; margin: auto; font-size: 0.7em; } /*----------------------  全体 ----------------------*/ .container { margin-left: auto; margin-right: auto; max-width: 1280px; width: 100%; padding: 24px; } .logo2 { text-align: left; color: #60524c; max-width: 320px; } header { max-width: 1600px; width: 100%; margin: auto; vertical-align: bottom; display: table; table-layout: fixed; } header img { width: 100%; } header > * { display: table-cell; } header .logo img { max-width: 390px; } @media (max-width: 860px) { header .logo { text-align: left; } header .logo img { max-width: 280px; } } @media (max-width: 365px) { header .logo img { max-width: 220px; } } header > .info { vertical-align: bottom; padding-right: 16px; } header a.tel { display: block; text-align: right; font-size: 30px; line-height: 38px; font-weight: 800; } header .headinfo { font-size: 14px; line-height: 20px; color: #666; font-weight: normal; text-align: right; padding: 0px; padding-bottom: 16px; margin: auto; } @media (max-width: 860px) { header { display: block; width: 100%; } header > * { display: block; width: 100%; text-align: center; } header .headinfo { font-size: 12px; line-height: 12px; color: #666; font-weight: normal; text-align: left; padding: 8px; margin: auto; text-align: center; } } .flex { display: flex; flex-direction: row; } .inner { max-width: 1680px; margin: auto; width: 100%; } .center { text-align: center; margin: auto; } .paper_body { background-color: #fff; } .page_title { text-align: center; font-size: 1.1rem; padding: 20px; } .page_div2 { width: 880px; margin-left: auto; margin-right: auto; clear: both; } .page_div3 { width: 820px; margin-left: auto; margin-right: auto; clear: both; } .cell { vertical-align: top; display: table-cell; } .table { display: table; table-layout: fixed; width: 100%; margin-left: auto; margin-right: auto; } .table > * { display: table-cell; } .flex { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; /* Safari */ -webkit-justify-content: flex-start; /* Safari */ justify-content: flex-start; -webkit-align-items: stretch; /* Safari */ align-items: stretch; } .card { width: 100%; background-color: #fff; padding: 25px; margin-bottom: 20px; /* box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.17); */ display: block; } a.webyoyakubtn { background-color: rgba(255, 103, 2, 1); padding: 20px; margin: 6px auto; font-size: 22px; line-height: 24px; color: #fff; text-align: center; min-width: 200px; font-weight: 600; display: block; max-width: 640px; box-shadow: 0 1px 8px rgba(0, 0, 0, 0.2); } a.webyoyakubtn small { font-size: 14px; line-height: 18px; text-align: center; display: block; font-weight: 300; } @media (max-width: 860px) { a.webyoyakubtn { max-width: 320px; } } footer { text-align: left; color: #fff; line-height: 20px; letter-spacing: 1px; background-color: #004030; } footer .inner { padding: 24px; max-width: 1200px; } footer ul { list-style: none; } footer li { font-size: 13px; font-weight: normal; } footer h2 { font-size: 16px; font-weight: bold; color: #fff; margin: 32px 0 12px 0; } footer a, footer a:link, footer a:visited { color: #fff; text-decoration: none; } footer .table { margin: 0 auto; width: 100%; } footer .table > * { min-width: 280px; } footer .sitemap img { width: 100%; max-width: 300px; } footer .medicaluser img { width: 100%; max-width: 300px; margin-bottom: 12px; } footer .support { margin: 32px 0; } footer .support .flex { width: auto; table-layout: fixed; } footer .support .flex > * { width: 300px; } footer .support img { width: 280px; height: 140px; margin-bottom: 10px; } footer .support .youtube iframe { width: 280px; height: 140px; } h4.footer-head { font-size: 20px; text-align: center; font-weight: 600; background-color: #eee; color: #444; } h4.footer-head a, h4.footer-head a:visited { color: #444; } h4.footer-head li:nth-child(1) { font-size: 20px; line-height: 28px; font-weight: normal; text-align: left; font-weight: 900; min-width: none; width: 50%; } h4.footer-head li:nth-child(2) { font-size: 24px; font-weight: 900; text-align: right; min-width: none; } h4.footer-head a.webyoyakubtn { height: 42px; width: 220px; margin: 6px; font-size: 20px; line-height: 42px; color: #fff; text-align: center; background-color: rgba(255, 103, 2, 1); display: inline-block; vertical-align: middle; padding: 0; box-shadow: 0 1px 8px rgba(0, 0, 0, 0.2); } h4.footer-head a.telbtn { height: 42px; width: 240px; margin: 6px; font-size: 20px; line-height: 42px; color: #fff; text-align: center; background-color: rgba(255, 103, 2, 1); display: inline-block; vertical-align: middle; padding: 0; box-shadow: 0 1px 8px rgba(0, 0, 0, 0.2); } h4.footer-head a.telbtn span { width: 20px; height: 20px; font-size: 20px; display: inline-block; vertical-align: middle; } @media (max-width: 860px) { h4.footer-head li:nth-child(1) { font-size: 16px; text-align: center; width: 100%; } h4.footer-head a.webyoyakubtn, h4.footer-head a.telbtn { width: 100%; max-width: none; } } .dr-timetable { border-collapse: collapse; border: 1px solid #999; width: 95%; max-width: 330px; } .dr-timetable td { padding: 12px; border: 1px solid #999; } .dr-timetable td:nth-child(1) { width: 60px; text-align: center; } /*FB*/ .fb-like-box { margin-left: 20px; margin-top: 20px; margin-bottom: 20px; } /*クリニック紹介*/ .about_left { float: left; clear: left; width: 466px; } .about_left p { padding-left: 60px; padding-right: 20px; } .about_right { float: left; clear: right; width: 454px; } .about_right p { padding-left: 30px; padding-right: 50px; } .banner { margin-top: 40px; text-align: center; } .banner img { margin-left: 5px; margin-bottom: 5px; } .left { float: left; clear: left; } .right { float: left; clear: right; } .kids02_2 { height: 283px; background-image: url(images/kids02_2.png); background-repeat: no-repeat; padding-left: 30px; padding-right: 30px; font-size: 12px; } .kids06 { height: 172px; background-image: url(images/kids06.png); background-repeat: no-repeat; padding-left: 30px; padding-right: 30px; } .kids09 { height: 134px; background-image: url(images/kids09.png); background-repeat: no-repeat; padding-left: 30px; padding-right: 30px; } .kids10 { height: 95px; background-image: url(images/kids10.png); background-repeat: no-repeat; padding-left: 30px; padding-right: 30px; } .kids_div h3 { padding-left: 30px; padding-right: 30px; font-size: 16px; font-weight: bold; color: #099; padding-top: 20px; padding-bottom: 10px; } .kids_div p { padding-left: 30px; padding-right: 30px; } .concept_bg { background-image: url(images/conceptbg.png); background-repeat: no-repeat; height: 420px; width: 920px; } .concept_bg h1 { text-align: center; font-size: 16px; color: #399; font-weight: bold; line-height: 30px; } .concept_bg h2 { text-align: center; font-size: 14px; color: #399; font-weight: bold; line-height: 22px; padding-top: 10px; margin-top: 40px; } .concept_bg p { font-size: 14px; text-align: center; display: block; width: 800px; margin-left: auto; margin-right: auto; } .menu { width: 100%; background-color: rgba(0, 64, 48, 1); position: relative; z-index: 99; } .menu_table a { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; white-space: nowrap; } .menu_table a:hover { background-color: rgba(255, 255, 48, 0.5); } .menu_table { max-width: 1600px; width: 100%; height: 40px; margin: 0 auto; padding: 0; display: table; table-layout: fixed; } .menu_table > li { position: relative; list-style: none; display: table-cell; min-width: 100px; } .menu_table > li > a { display: block; width: auto; height: 40px; text-align: center; color: #fff; font-size: 1rem; line-height: 40px; text-decoration: none; box-sizing: border-box; padding: 0; } .menu_table > li > ul { top: 40px; left: 0; position: absolute; background-color: #333; } .menu_table > li > ul > li { display: none; height: 0; text-align: left; background-color: #333; line-height: 40px; font-size: 1rem; } .menu_table > li > ul > li > a { display: block; width: auto; height: 40px; text-align: left; color: #fff; font-size: 1rem; line-height: 40px; text-decoration: none; box-sizing: border-box; padding: 0 10px; } .menu_table > li:hover > ul > li { /*現れた時のサブメニュー*/ display: block; height: 40px; } .menu_on { background-color: black; } .sp_menu_base { background-color: rgba(20, 20, 20, 0.9); color: white; display: flex; justify-content: space-between; align-items: stretch; position: fixed; bottom: 0; right: 0; left: 0; border: 0; outline: 0; } .sp_menu_base > * { border-right: 1px solid #666; display: flex; justify-content: space-between; align-items: center; padding: 12px; } .sp_menu_base > *:last-child { border-right: 0; } .sp_menu_base > * { border-right: 1px solid #666; display: flex; justify-content: space-between; align-items: center; padding: 6px 12px; } .sp_menu_base a { color: white; width: 100%; font-size: 16px; line-height: 20px; vertical-align: middle; } .sp_menu_base span { margin-right: 6px; font-size: 20px; line-height: 20px; vertical-align: middle; } .menu_select { appearance: none; padding: 8px 16px; width: 100%; color: white; display: block; font-size: 1.1rem; background-color: transparent; border: 0; } .menu_select span { display: block; position: absolute; right: 0; top: 6px; } .sp-tel { min-width: 120px; text-align: center; } .sp-yoyaku { font-size: 15px; min-width: 120px; text-align: center; } a.englishsite, a.englishsite:link, a.englishsite:visited { transition: all 0.3s ease; display: block; position: fixed; right: 0; top: 0; margin: auto; margin-left: auto; margin-right: 0; color: #fff; background-color: black; width: 140px; height: 40px; font-size: 13px; line-height: 40px; text-align: center; z-index: 120; } @media (max-width: 760px) { a.englishsite, a.englishsite:link, a.englishsite:visited { position: fixed; width: 110px; } } @media (max-width: 760px) { .container { padding: 0; } .flex { display: flex; flex-direction: column; } .table { display: block; width: 100%; } .table > * { display: block; width: 100%; } .cell { display: block; width: 100%; } footer { padding-bottom: 100px; } } @media (min-width: 761px) { .sp { display: none; } } @media (max-width: 760px) { .pc { display: none; } }