@charset "utf-8";
@import url('//fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
body { margin: 0; padding: 0; background: #fff; color: #333; font-family: "Noto Sans JP", sans-serif; -webkit-text-size-adjust: 100%; }

h2 { padding: 0.5rem; margin-top: 2rem; background-color: #f60; font-size: 1.6rem; color: #fff; text-align: center; letter-spacing: 0.1rem; }
h3 { padding: 0.5rem 1rem; margin-top: 1.5rem; font-size: 1.3rem; background: linear-gradient(to right, #f90, #fec); font-weight: normal; }
h4 { padding: 0.5rem 1rem; background: linear-gradient(to right, #fec, #fff); font-size: 1.2rem; font-weight: normal; border-radius: 0.5rem; }
h5 { padding: 0.25rem 1rem; background: linear-gradient(to right, #fec, #fff); font-size: 1.1rem; font-weight: normal; }
em { font-weight: bold; font-style: normal; }
a { text-decoration: none; }
time { display: block; text-align: right; padding: 0.2rem; color: #999; font-size: 0.8rem; }
main { margin-bottom: 5rem; }
main p, main ul, main ol, main dl { line-height: 1.5rem; margin: 0.2rem; text-align: justify; }
main table { margin: 0.2rem; text-align: justify; }
abbr { text-decoration: underline dotted #0003 from-font; }

.ボタン { display: inline-block; margin-bottom: 0.5rem; padding: 0.5rem; border: solid 0.1rem #fc6; border-radius: 0.5rem; background-color: #fec; color: #333; text-decoration: none; transition: 0.5s; box-shadow: 0.25rem 0.25rem 0.25rem #ccc; }
.ボタン:hover { background-color: #fc6; color: #339; box-shadow: 0.25rem 0.25rem 0.25rem #999; }
.ボタン:active { transform: translateY(0.1rem); box-shadow: 0 0.1rem 0.2rem #0001; background-color: #f90; transition: 0.1s; }
.赤文字 { color: #f00; }
.青文字 { color: #06f; }
.中央寄せ { text-align: center; }
.右寄せ { text-align: right; }
img.左付50 { width: 50%; float: left; margin: 0.5rem 1rem; }
img.右付50 { width: 50%; float: right; margin: 0.5rem 1rem; }
img.左付25 { width: 25%; float: left; margin: 0.5rem 1rem; }
img.右付25 { width: 25%; float: right; margin: 0.5rem 1rem; }
img.画像全幅 { width: 100%; margin: 0; }
img.影付き { box-shadow: 0.25rem 0.25rem 0.5rem #999; }
.右付囲 { display: flow-root; } /*フロートを親要素で閉じ込める際に利用*/
.署名 { text-align: right; font-family: cursive; }

/*ヘッダー・グローバルメニュー*/
header h1 { margin: 0; padding: 0; }
header h1 a { display: block; }
header h1 img { display: block; width: 100%; height: auto; }
header section { padding-bottom: 0.5rem; border: 0.1rem solid #f60;background: linear-gradient(to bottom, #fc6, #fec, #fff); }
header section div { text-align: center; }
header section ul { margin: 0; line-height: 1.5rem; }

header nav { display: flex; overflow: scroll hidden; }
header nav a { display: flex; flex: 0 0 8rem; border: solid 0.05rem #fff; border-radius: 0.5rem; padding: 0.5rem 0.25rem; text-align: center; align-items: center; justify-content: center; background-color: #f60; color: #fff; font-size: 1.25rem; line-height: 1.25rem; }
header nav a:hover { background-color: #f93; }
header nav a:active { background-color: #e60; transition: 0.05s; }
header nav a.scatt { background-color: #d30; }
header nav a.外部 { background-color: #f71; }
header nav a.tube { background-color: #f00; }
header nav a img { height: 1.25rem; margin-right: 0.2rem; }

/*ご案内・感染症対策*/
section.医院案内 ul li { margin-bottom: 0.5rem; }
div.感染症対策 { background-color: #39f1; padding: 1rem; border-radius: 0.5rem; }
div.感染症対策 h3 { background: #39f4; margin-top: 1rem; }
div.感染症対策 h4 { background: #39f2; }

/*診療日・診療時間*/
section.カレンダー div { display: grid; grid-template-columns: 1fr; gap: 1rem; padding: 1rem; }
section.カレンダー table { table-layout: fixed; border-collapse: collapse; font-weight: bold; }
section.カレンダー table caption { padding: 0.5rem; text-align: center; background-color: #feb; }
section.カレンダー table th { padding: 0.5rem; border: 0.01rem solid #999; text-align: center; vertical-align: middle; }
section.カレンダー table td { padding: 0.5rem; border: 0.01rem solid #999; text-align: center; vertical-align: middle; }
section.カレンダー table th:nth-of-type(1) { color: #f00; background-color: #fcc; } /*日曜日*/
section.カレンダー table td:nth-of-type(1) { color: #f00; background-color: #fcc; } /*日曜日*/
section.カレンダー table th:nth-of-type(2) { background-color: #fcc; } /*月曜日*/
section.カレンダー table td:nth-of-type(2) { background-color: #fcc; } /*月曜日*/
section.カレンダー table th:nth-of-type(7) { color: #00f; } /*土曜日*/
section.カレンダー table td:nth-of-type(7) { color: #00f; } /*土曜日*/
section.カレンダー table td.祝日 { color: #f00; background-color: #fcc; }
section.カレンダー table td.他月 { opacity: 0.3; }
section.カレンダー table td.午前休 { background: linear-gradient(-45deg, transparent 50%, #fcc 50%); }
section.カレンダー table td.午後休 { background: linear-gradient(135deg, transparent 50%, #fcc 50%); }
section.カレンダー span.赤文字 { color: #fcc; }

section.受付時間 div { display: grid; grid-template-columns: 1fr; gap: 1rem; padding: 1rem; }
section.受付時間 table { table-layout: fixed; border-collapse: collapse; font-weight: bold; }
section.受付時間 th { padding: 0.5rem; border: 0.01rem solid #999; text-align: center; vertical-align: middle; }
section.受付時間 td { padding: 0.5rem; border: 0.01rem solid #999; text-align: center; vertical-align: middle; }
section.受付時間 th:nth-child(2) { background-color: #fcc; color: #f33; } /*日曜日*/
section.受付時間 td:nth-child(2) { background-color: #fcc; color: #f33; } /*日曜日*/
section.受付時間 th:nth-child(3) { background-color: #fcc; } /*月曜日*/
section.受付時間 td:nth-child(3) { background-color: #fcc; } /*月曜日*/
section.受付時間 th:nth-child(8) { color: #33f; } /*土曜日*/
section.受付時間 td:nth-child(8) { color: #33f; } /*土曜日*/

/*アクセス（道案内）*/
section.道案内 iframe { display: block; margin-bottom: 2rem; width: 98%; border: 0; box-shadow: 0.5rem 0.5rem 0.5rem -0.5rem #333; }

/*コンタクト*/
section.コンタクト dl { max-width: 80rem; margin: 0 auto; line-height: 1.7rem; }
section.コンタクト dl dt { font-weight: bold; color: #666; background: linear-gradient(to bottom, #fec, #fff, #fff); padding: 0.5rem 1rem; border-radius: 0.5rem; margin-top: 2rem; display: block; }
section.コンタクト dl dd { margin: 0.5rem 0 2rem 1.2rem; color: #444; }
section.コンタクト dl dd ul { margin: 0.5rem 0 0 0; padding-left: 1.5rem; font-size: 0.8rem; line-height: 1rem; }
section.コンタクト dl img { height:1.5rem; margin-right: 0.3rem; vertical-align: -0.3rem !important; }

/*画面下部ボタン*/
footer { text-align: center; padding: 1rem; padding-bottom: 6rem; }
footer button { font-size: 1.2rem; }
footer address { color: #ccc; font-size: 0.7rem; }
footer nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.1rem; background-color: #fc9; position: fixed; width: 100%; bottom: 0; left: 0; z-index: 9999; box-sizing: border-box; border-top: solid 0.1rem #fc9; padding-bottom: env(safe-area-inset-bottom); }
footer nav a { display: block; background-color: #f60; height: auto; padding: 0.5rem; font-size: 0.8rem; color: #fff; text-decoration: none; text-align: center; }
footer nav a img { height: 2rem; width: auto; margin-bottom: 0.1rem; }

/*更新履歴などのDL*/
dl.履歴 {  }
dl.履歴 dt { margin: 1rem 2rem 0 1.5rem; color: #999; }
dl.履歴 dd { margin: 0 0.5rem; padding: 0.5rem; background-color: #eee6; border: solid 0.05rem #ccc; border-radius: 0.5rem; }

/*小枠（お知らせ、コラム、当院の特徴）*/
dl.小枠 dt { display: flex; justify-content: space-between; margin: 1rem 0 0 0; padding: 0.5rem 0 0 0.5rem; background: #fec; border: solid 0.1rem #fc6; border-radius: 0.5rem 0.5rem 0 0; font-weight: bold; background-image: linear-gradient(160deg, #fc6 0%, #fec 25%, #fc6 100%); box-shadow: 0.25rem 0.25rem 0.25rem #ccc; }
dl.小枠 dt time { flex-shrink: 0; font-size: 1rem; color: #ccc; font-weight: normal; }
dl.小枠 dd { display: block; margin: 0 0 2em 0; padding: 0.5rem; border: solid 0.1rem #fc6; border-radius: 0 0 0.5rem 0.5rem; background-image: linear-gradient(160deg, #fec 0%, #fff 25%, #fec 100%); box-shadow: 0.25rem 0.25rem 0.25rem #ccc; display: flow-root; }
dl.小枠 dd a.詳細 { margin-top: 1rem; }
dl.小枠 dd img { float: right; margin: 0.5rem; min-width: 10rem; max-width: 25%; height: auto; border: solid 0.1rem #ccc; border-radius: 1rem; }

/*格子（当院で行っている主な治療）*/
div.格子 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1rem;}
div.格子 a { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem; border: 0.1rem solid #fc6; border-radius: 0.5rem; text-decoration: none; font-size: 1rem; color: #333; background-color: #fec; box-shadow: 0.25rem 0.25rem 0.25rem #ccc; transition: all 0.5s ease; }
div.格子 a:hover { background-color: #fc6; color: #339; box-shadow: 0.25rem 0.25rem 0.25rem #999; transform: translateY(-0.25rem); }
div.格子 a em { color: #f93c; }

/*もっと見るボタン*/
a.詳細 { display: inline-block; padding: 1rem 1.5rem; background: linear-gradient(160deg, #f60, #fc6); color: #fff; font-size: 1rem; font-weight: bold; text-decoration: none; border-radius: 1rem; box-shadow: 0 0.2rem 0.5rem #0003; transition: all 0.3s ease; }
a.詳細:hover { transform: translateY(-0.2rem); box-shadow: 0 0.2rem 1rem #0006; }

/*よくある質問（開閉式ＦＡＱ）テンプレート*/
section.質問 details { border: 0.1rem solid #f93; border-radius: 0.5rem; margin: 1rem; overflow: hidden; box-shadow: 0 0.1rem 0.2rem #9993; transition: all 0.3s ease; }
section.質問 details[open] { border-color: #fb4; box-shadow: 0 0.3rem 0.6rem #9996; }
section.質問 summary { padding: 1rem 3rem 1rem 1rem; background-color: #fec; cursor: pointer; font-weight: bold; font-size: 1rem; color: #963; list-style: none; position: relative; display: block; }
section.質問 summary::before { content: 'Q.'; margin-right: 0.5rem; color: #c96; }
section.質問 summary::after { content: '＋'; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); color: #f93; transition: transform 0.3s; }
section.質問 summary::-webkit-details-marker { display: none; }
section.質問 details[open] summary::after { content: '－'; }
section.質問 details p { padding: 1.2rem; line-height: 1.8rem; background-color: #fff; color: #444; }

@media screen and (min-width: 45rem) { /*PCの場合の表示*/
  body {  }
  h2 { margin-top: 6rem; font-size: 2rem; }
  h3 { margin-top: 4rem; font-size: 1.8rem; }
  h4 { font-size: 1.6rem; }
  h5 { font-size: 1.5rem; }
  time { color: #ccc; font-size: 1.2rem; }
  a[href^="tel:"] { pointer-events: none; }
  a[href^="fax:"] { pointer-events: none; }

  header section { }
  header section div { font-size: 1.5rem; line-height: 2.5rem; }
  header section ul { font-size: 1.5rem; line-height: 2.5rem; }

  main { margin-left: 10%; margin-right: 10%; }
  main p, main ul, main ol, main dl { font-size: 1.5rem; line-height: 2.2rem; margin: 1rem; }
  main table { font-size: 1.5rem; }

  footer { padding-bottom: 1rem; }
  footer nav { display: none; }
  footer address { font-size: 0.9rem; }

  section.質問 details { margin: 1rem 3rem; }
  section.質問 summary { font-size: 1.5rem; }
  p.署名 { font-size: 1.75rem; }

  section.医院案内 { margin: 0 10%; font-size: 1.5rem; }
  section.カレンダー { margin: 0 10%; font-size: 1.5rem; }
  section.カレンダー div { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: 1rem; }
  section.受付時間 { margin: 0 10%; font-size: 1.5rem; }
  section.道案内 { margin: 0 10%; font-size: 1.5rem; }
  section.コンタクト { margin: 0 10%; font-size: 1.5rem; }
  section.コンタクト dl { padding: 0 1rem; }
  section.コンタクト dl dd ul { font-size: 1rem; line-height: 1.4rem; }

  div.格子 a { font-size: 1.25rem; }
}