@charset "UTF-8";
/* ============================================================
   きとう歯科医院 共通スタイル
   ============================================================ */
:root{
  --ore:#f3650f;
  --ore-l:#f9a03c;
  --ore-p:#fff3e2;
  --red:#e03131;
  --grn:#2e9e4f;
  --txt:#444;
  --line:#e6ddc8;
  --w:960px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Meiryo,"Hiragino Kaku Gothic ProN","MS PGothic",sans-serif;
  font-size:14px;line-height:1.8;color:var(--txt);
  background:
    radial-gradient(circle at 12% 18%,rgba(255,255,255,.85) 0 22%,transparent 22.5%),
    radial-gradient(circle at 88% 60%,rgba(255,255,255,.7) 0 18%,transparent 18.5%),
    linear-gradient(180deg,#fff6d5 0%,#ffeeba 40%,#ffe6a4 100%);
  background-attachment:fixed;
}
a{color:var(--ore)}
a:hover{text-decoration:none}
img{max-width:100%;height:auto;vertical-align:bottom}
.wrap{width:100%;max-width:var(--w);margin:0 auto;padding:0 12px}
.cl{clear:both}
.t_center{text-align:center}
.t_bold{font-weight:bold}
.color_ore{color:var(--ore);font-weight:bold}
.color_red{color:var(--red)}
.mb5{margin-bottom:5px}.mb10{margin-bottom:10px}.mb15{margin-bottom:15px}.mb30{margin-bottom:30px}

/* ===== 最上部ストライプ ===== */
.topbar{height:12px;background:repeating-linear-gradient(90deg,var(--ore) 0 10px,#ffd9a8 10px 20px)}

/* ===== ヘッダー ===== */
.header{background:#fff;border-bottom:1px solid var(--line)}
.header-inner{padding:10px 12px 14px;display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
.kw{width:100%;margin:0 0 6px;font-size:11px;color:#8b7a5a;letter-spacing:.05em}
.h-logo{flex:0 1 auto;min-width:0;max-width:100%}
.h-shugo{flex:0 0 auto;margin-bottom:2px}
.h-contact{margin-left:auto;text-align:right}
.h-addr{margin:0 0 6px;font-size:12px;color:#6b5b3d}
.h-contact p{margin:0 0 6px}

/* ===== グローバルナビ ===== */
.gnav{background:#fff;border-bottom:3px solid var(--ore)}
.gnav ul{display:flex;list-style:none;margin:0 auto;padding:0;max-width:var(--w)}
.gnav li{flex:1 1 0}
/* 通常/ホバーの2状態が縦に並んだスプライト画像。幅が変わっても状態がずれないよう
   高さは比率で決め、背景は「1状態=高さ100%」になるよう 100% 200% を指定する */
.gnav a{
  display:block;aspect-ratio:160/70;background-repeat:no-repeat;background-position:0 0;
  background-size:100% 200%;text-indent:-9999px;overflow:hidden
}
.gnav a:hover,.gnav a.current{background-position:0 100%}
.gnav .g1{background-image:url(../images/material/gnavi_01.gif)}
.gnav .g2{background-image:url(../images/material/gnavi_02.gif)}
.gnav .g3{background-image:url(../images/material/gnavi_03.gif)}
.gnav .g4{background-image:url(../images/material/gnavi_04.gif)}
.gnav .g5{background-image:url(../images/material/gnavi_05.gif)}
.gnav .g6{background-image:url(../images/material/gnavi_06.gif)}

/* ===== メインビジュアル（スライド） ===== */
.hero{position:relative;max-width:var(--w);margin:20px auto;aspect-ratio:960/455;overflow:hidden;border-radius:4px}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease}
.hero img.on{opacity:1}

/* ===== トップの切替バナー（予防歯科／ホワイトニング） =====
   1つの枠に2枚を重ね、数秒ごとにクロスフェードで入れ替える */
.bnr2{position:relative;width:min(240px,72vw);aspect-ratio:310/100;margin:0 auto 24px}
.bnr2 a{
  position:absolute;inset:0;background-repeat:no-repeat;background-position:0 0;
  background-size:100% 200%;text-indent:-9999px;overflow:hidden;border-radius:4px;
  opacity:0;pointer-events:none;transition:opacity .8s ease
}
.bnr2 a.on{opacity:1;pointer-events:auto}
.bnr2 a:hover{background-position:0 100%}
/* キーボード操作で隠れているほうに移動したときは、そのバナーを表示する */
.bnr2 a:focus-visible{opacity:1;pointer-events:auto;z-index:2;outline:3px solid var(--ore);outline-offset:3px}
.bnr2 .b1{background-image:url(../images/material/top_bnr1.jpg)}
.bnr2 .b2{background-image:url(../images/material/top_bnr2.jpg)}
/* 「視差効果を減らす」設定の端末では自動切替せず、2つとも並べる */
.bnr2.static{position:static;width:auto;aspect-ratio:auto;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.bnr2.static a{position:static;flex:0 0 auto;width:min(240px,72vw);aspect-ratio:310/100;opacity:1;pointer-events:auto;transition:none}

/* ===== トップの画像背景セクション ===== */
.topsec{max-width:var(--w);margin:0 auto 18px;position:relative}
.topsec .bgimg{display:none;width:100%;border-radius:4px}
.topsec .txt18{font-size:15px;line-height:1.9;margin:0}
/* 見出しは背景画像に焼き込まれているので、読み上げ・検索用に残して視覚的には隠す */
.top_gree h2{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (min-width:1000px){
  .topsec{background-repeat:no-repeat;background-size:100% auto}
  .top_gree{height:506px;background-image:url(../images/material/top_gree_20251014.jpg)}
  .top_po{height:666px;background-image:url(../images/material/top_po.jpg)}
  .top_mushiba{height:376px;background-image:url(../images/material/top_mushiba02.jpg)}
  .top_gree .g1{width:530px;margin-left:50px;padding-top:90px}
  .top_gree .g2{width:530px;margin-left:400px;padding-top:20px}
  .top_po .lead{padding-top:150px}
  .top_mushiba .m1{width:560px;margin-left:200px;padding-top:150px}
}
@media (max-width:999px){
  /* 文字が焼き込まれた画像はモバイルでは出さず、HTMLのテキストで見せる */
  .topsec .inner{background:#fff;border:1px solid var(--line);border-radius:8px;padding:20px 18px}
  .topsec .inner>div+div{margin-top:14px}
  /* ごあいさつ：オレンジの帯と枠をCSSで再現し、本文を枠の中に入れる */
  .top_gree .bgimg{display:none}
  .top_gree .inner{background:#fdf7ee;border:3px solid #f2c53d;border-radius:8px;padding:0;overflow:hidden}
  .top_gree h2{
    position:static;width:auto;height:auto;clip:auto;white-space:normal;overflow:visible;
    background:var(--ore);color:#fff;font-size:15px;font-weight:bold;text-align:center;
    padding:10px 12px;line-height:1.5
  }
  .top_gree .g1{padding:16px 18px 0}
  .top_gree .g2{padding:0 18px 18px}
  .top_gree .inner>div+div{margin-top:12px}
}

/* トップ：4つのポリシー */
.top_po h3,.top_mushiba h3{
  margin:0;font-size:22px;color:var(--ore);text-align:center;padding-top:22px
}
@media (min-width:1000px){.top_po h3,.top_mushiba h3{position:absolute;left:0;right:0;text-indent:-9999px;overflow:hidden;height:0;padding:0}}
.top_po .lead{text-align:center;font-size:15px;line-height:1.9;margin:0 0 18px}
.top_po ul{list-style:none;margin:0 0 18px;padding:0 40px;counter-reset:p}
.top_po li{
  counter-increment:p;position:relative;background:rgba(255,255,255,.86);border:1px solid #f6d8b4;
  border-radius:6px;margin-bottom:10px;padding:12px 18px 12px 62px;font-size:15px;line-height:1.7
}
.top_po li::before{
  content:counter(p);position:absolute;left:16px;top:50%;transform:translateY(-50%);
  width:32px;height:32px;border-radius:50%;background:var(--ore);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:bold
}
.top_po .po_p2{
  text-align:center;font-size:18px;font-weight:bold;color:var(--ore);line-height:1.7;margin:0 40px;
  background:rgba(255,255,255,.86);border:2px dashed var(--ore-l);border-radius:8px;padding:14px
}
@media (min-width:1000px){
  /* 4項目は背景画像に焼き込まれているため、読み上げ用に残して視覚的には非表示 */
  .top_po ul{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  /* 締めの一文は背景画像のオレンジ吹き出しの中に白文字で重ねる */
  .top_po .po_p2{
    position:absolute;left:230px;top:546px;width:500px;margin:0;padding:0;
    background:none;border:0;border-radius:0;color:#fff
  }
}

/* ===== お知らせ ===== */
.info{max-width:var(--w);margin:0 auto 24px;padding:0 12px}
.info-box{display:flex;background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.info-box h2{
  margin:0;flex:0 0 150px;background:var(--ore);color:#fff;font-size:18px;
  display:flex;align-items:center;justify-content:center
}
.info-box .body{padding:14px 22px;font-size:15px}

/* ===== サイドバナー ===== */
.sbnr{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;max-width:var(--w);margin:0 auto 30px;padding:0 12px}
.sbnr a{display:block;transition:opacity .2s}
.sbnr a:hover{opacity:.75}

/* ===== 下層ページ ===== */
.bcrumbs{max-width:var(--w);margin:0 auto;padding:12px;font-size:12px;color:#8b7a5a}
.bcrumbs a{color:#6b5b3d}
.page-head{
  max-width:var(--w);margin:0 auto 20px;padding:18px 12px;text-align:center
}
.page-head h1{
  margin:0;font-size:26px;color:var(--ore);letter-spacing:.06em;
  border-top:2px solid var(--ore-l);border-bottom:2px solid var(--ore-l);padding:12px 0;background:rgba(255,255,255,.6)
}
.sec{max-width:var(--w);margin:0 auto 24px;padding:0 12px}
.box{background:#fff;border:1px solid var(--line);border-radius:8px;padding:26px 30px;box-shadow:0 2px 6px rgba(150,110,40,.08)}
.box+.box{margin-top:24px}

h3.h3_ttl{
  margin:0 0 18px;font-size:21px;color:var(--ore);line-height:1.5;
  border-bottom:2px dotted var(--ore-l);padding:0 0 10px 14px;border-left:6px solid var(--ore)
}
h4.h4_ttl{
  margin:26px 0 12px;font-size:18px;color:#c9500a;line-height:1.5;
  background:var(--ore-p);border-left:5px solid var(--ore-l);padding:8px 14px;border-radius:0 4px 4px 0
}
h4.h4_ttl:first-child{margin-top:0}
h5.h5_ttl{margin:18px 0 8px;font-size:16px;color:var(--ore);line-height:1.6}
.box p{margin:0 0 14px}
.text>*:last-child{margin-bottom:0}

/* 画像まわり */
.lf15{float:left;margin:0 20px 12px 0;max-width:45%}
.rf15{float:right;margin:0 0 12px 20px;max-width:45%}
.of_hdn{overflow:hidden}
.img{border:4px solid #f4ead6;border-radius:4px;background:#fff}
.figs{display:flex;gap:20px;flex-wrap:wrap;list-style:none;margin:0 0 16px;padding:0;justify-content:center}
.figs li{flex:0 1 300px;text-align:center;font-size:13px}
.figs li img{display:block;margin:0 auto 6px}
.figs.w3 li{flex:0 1 200px}

/* before / after */
.ba{display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap;list-style:none;margin:0 0 16px;padding:0}
.ba li{text-align:center;font-size:13px}
.ba li img{display:block;margin:0 auto 6px}
.ba .arw{flex:0 0 40px}
.ba .arw img{border:0;background:none}

/* リスト */
ul.list_disc{margin:0 0 16px;padding-left:1.4em}
ul.list_disc li{list-style:disc;margin-bottom:6px}
ol.list_num{margin:0 0 16px;padding-left:1.6em}
ol.list_num li{list-style:decimal;margin-bottom:10px}

/* 定義リスト */
dl.career{margin:0 0 16px}
dl.career dt{font-weight:bold;color:var(--ore);font-size:13px;margin-top:8px}
dl.career dd{margin:0;font-size:15px}
dl.doc_info{margin:0 0 20px;display:grid;grid-template-columns:max-content 1fr;gap:0 20px}
dl.doc_info dt{font-weight:bold;color:var(--ore);padding:6px 0;border-bottom:1px dotted var(--line)}
dl.doc_info dd{margin:0;padding:6px 0;border-bottom:1px dotted var(--line)}
dl.faq{margin:0 0 10px}
dl.faq dt{
  font-weight:bold;color:#fff;background:var(--ore-l);border-radius:4px;
  padding:9px 14px 9px 40px;position:relative;margin-top:14px
}
dl.faq dt::before{content:"Q";position:absolute;left:16px;font-size:16px}
dl.faq dd{margin:0;padding:12px 14px 12px 40px;position:relative;background:#fffaf2;border:1px solid #f6e2c6;border-top:0;border-radius:0 0 4px 4px}
dl.faq dd::before{content:"A";position:absolute;left:16px;top:12px;color:var(--ore);font-weight:bold;font-size:16px}

/* 受付時間テーブル */
table.time{width:100%;border-collapse:separate;border-spacing:1px;background:var(--line);margin:10px 0 12px;font-size:14px}
table.time th,table.time td{background:#fff;text-align:center;padding:8px 4px}
table.time th{background:#fdf3e2;font-weight:bold}
table.time th:first-child{background:#fff;color:var(--ore)}
.note{color:var(--ore);font-weight:bold;font-size:13px;line-height:1.8;margin:0}

/* ステップフロー */
table.flow01{width:100%;border-collapse:collapse;margin:16px 0}
table.flow01 th{background:var(--ore);color:#fff;padding:8px;font-size:15px;border-radius:4px 4px 0 0}
table.flow01 td{background:#fffaf2;border:1px solid #f6e2c6;padding:14px;font-size:15px}
table.flow01 td.none{background:none;border:0;padding:6px}

/* 医院概要ブロック */
.f_info{display:flex;gap:26px;flex-wrap:wrap}
.f_info>div{flex:1 1 340px}
.monshin{
  display:block;background:var(--ore-p);border:2px solid var(--ore-l);border-radius:6px;
  padding:12px 16px;color:var(--txt);text-decoration:none;font-size:13px;line-height:1.7
}
.monshin:hover{background:#ffe9d2}
.monshin strong{color:var(--ore)}

/* ===== フッター ===== */
.footer{background:#fff;border-top:3px solid var(--ore);margin-top:10px}
.f-link{max-width:var(--w);margin:0 auto;padding:18px 12px;text-align:center;font-size:13px;line-height:2.2;color:#c9b58c}
.f-link a{color:#6b5b3d;text-decoration:none}
.f-link a:hover{color:var(--ore);text-decoration:underline}
.f-body{max-width:var(--w);margin:0 auto;padding:10px 12px 30px;display:flex;gap:30px;flex-wrap:wrap}
.f-left{flex:1 1 400px}
.f-right{flex:1 1 420px}
.map{width:100%;height:323px;border:1px solid var(--line);border-radius:6px}
.copyright{background:var(--ore);color:#fff;text-align:center;font-size:12px;padding:12px;margin:0}
.pagetop{max-width:var(--w);margin:0 auto;padding:0 12px 16px;text-align:right}
.pagetop a{font-size:13px;color:var(--ore);text-decoration:none}

@media (max-width:820px){
  .gnav ul{flex-wrap:wrap}
  .gnav li{flex:1 1 33.333%}
  .h-contact{margin-left:0;text-align:left;width:100%}
  .h-shugo{display:none}
  .box{padding:18px 14px}
  .lf15,.rf15{float:none;margin:0 0 14px;max-width:100%;text-align:center}

  /* ===== スマホ用の文字サイズ =====
     読みやすさを保つため本文は13px、最小でも11pxまでに留める */
  body{font-size:13px;line-height:1.75}
  .kw{font-size:11px}
  .h-addr{font-size:11px}
  .page-head h1{font-size:19px}
  h3.h3_ttl{font-size:16px;padding-bottom:8px}
  h4.h4_ttl{font-size:15px;padding:7px 12px}
  h5.h5_ttl{font-size:14px}
  .topsec .txt18,.txt18{font-size:13px;line-height:1.85}
  .top_gree h2{font-size:14px}
  .top_po h3,.top_mushiba h3{font-size:18px}
  .top_po .lead{font-size:13px}
  .top_po li{font-size:13px;padding:10px 14px 10px 54px}
  .top_po li::before{width:28px;height:28px;font-size:15px;left:14px}
  .top_po .po_p2{font-size:15px;margin:0 12px;padding:12px}
  .top_po ul{padding:0 12px}
  .info-box h2{flex-basis:110px;font-size:15px}
  .info-box .body{font-size:13px;padding:12px 16px}
  .figs li,.ba li{font-size:12px}
  dl.career dd{font-size:14px}
  dl.faq dt{font-size:13px;padding:8px 12px 8px 34px}
  dl.faq dt::before{left:13px}
  dl.faq dd{font-size:13px;padding:10px 12px 10px 34px}
  dl.faq dd::before{left:13px}
  ol.list_num li,ul.list_disc li{font-size:13px}
  table.time{font-size:12px}
  table.time th,table.time td{padding:6px 2px}
  table.flow01 th,table.flow01 td{font-size:13px;padding:10px}
  .monshin{font-size:12px}
  .note{font-size:12px}
  .f-link{font-size:12px;line-height:2}
  .bcrumbs{font-size:11px}
  .copyright{font-size:11px}
  .map{height:260px}
}