@charset "UTF-8";

/* ============================================================
   都筑キッズデンタルランド 統合スタイルシート
   layout.css + layout_sp.css + animations を1ファイルに統合
   ============================================================ */

/* ============================================================
   リセット・共通
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  width: 100%;
  overflow-x: hidden;
}

body {
  background-color: #fff;
  color: #333;
  font-size: 1.25em;
  line-height: 1.3em;
  letter-spacing: 0.05em;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo,
    '游ゴシック体', '游ゴシック', YuGothic, 'Noto Sans JP',
    "ＭＳ Ｐゴシック", "MS PGothic", Osaka, sans-serif;
  font-weight: 500;
}

body.bottom_bg {
  background: #ffffff;
}

address, em { font-style: normal; }

dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6,
pre, form, input, p, blockquote, fieldset, div {
  margin: 0;
  padding: 0;
}

table, pre, code, select, option, input, textarea, kbd, var, ins, del, samp {
  font-size: 18px;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  font-size: 24px;
}

p {
  font-size: 18px;
  letter-spacing: -0.01em;
  line-height: 1.9;
  margin: 0 0 1em 0;
  text-align: justify;
  font-weight: 500;
}

ul li, ol li { list-style: none; }

table, th, td {
  margin: 0;
  padding: 0;
  border-collapse: separate;
  border-spacing: 0;
  text-align: center;
}

img, fieldset { border: none; }
img { max-width: 100%; height: auto; }

a, a:link, a:active, a:visited {
  color: #0071b0;
  text-decoration: none;
  outline: none;
}
a:focus { outline: none; }
a img { border: 0; }

/* ---- ユーティリティ ---- */
.viewpc { display: block; }
.viewsp { display: none !important; }

.inner {
  clear: both;
  width: 1000px;
  margin: 0 auto;
  text-align: justify;
  padding: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.text_strong  { font-weight: bold !important; color: #000; }
.text_blue    { color: #092254; }
.text_red     { color: #FF0000; }
.text_white   { color: #ffffff; }
.text_cap     { font-size: 14px; line-height: 1.3; }
.align_center { text-align: center; }
.align_left   { text-align: left !important; }
.align_right  { text-align: right !important; }

.clearfix::after { content: ""; display: block; clear: both; }
.clear { clear: both; }

/* ============================================================
   head_info（診療時間・アクセスバー）
   ============================================================ */
.head_info {
  width: 310px;
  height: 64px;
  display: block;
  position: fixed;
  right: 60px;
  top: 0;
  background-color: #f0f0f0;
  z-index: 9999;
}
.head_info p {
  font-size: 14px;
  line-height: 1.3;
  margin: 3px 10px;
  letter-spacing: 0.03em;
}
.head_info p span { color: #ff9000; }
.head_info .head_access a {
  display: block;
  float: left;
  width: 60px;
  height: 64px;
  background-color: #ff9000;
  color: #fff;
  font-size: 10px;
  text-align: center;
  margin-right: 10px;
}
.head_info .head_access img {
  width: 16px !important;
  height: auto;
  display: block;
  margin: 8px auto 2px auto;
}
.head_info .head_access a:hover { background-color: #ffbd67; }

/* ============================================================
   ヘッダー
   ============================================================ */
header {
  width: 55px;
  height: 55px;
  position: absolute;
}
header .inner {
  width: 100%;
  margin: 0 auto;
}
header .logo_area {
  width: 45%;
  max-width: 190px;
  height: 55px;
  float: left;
  text-align: center;
}

/* ============================================================
   グローバルナビゲーション
   ============================================================ */
#top-head {
  top: 0;
  width: 100%;
  margin: 0 auto;
  padding: 3px 0 0;
  line-height: 1;
  z-index: 1000;
}
#top-head a, #top-head { color: #fff; text-decoration: none; }
#top-head .inner { position: relative; }

/* ハンバーガーボタン */
#nav-toggle {
  display: none;
  position: fixed;
  right: 0;
  top: -2px;
  width: 60px;
  height: 64px;
  cursor: pointer;
  z-index: 999;
  background-color: #004bc4;
}
#nav-toggle div { position: relative; }
#nav-toggle span {
  display: block;
  position: absolute;
  height: 2px;
  width: 35px;
  background: #fff;
  left: 14px;
  transition: .35s ease-in-out;
}
#nav-toggle span:nth-child(1) { top: 19px; }
#nav-toggle span:nth-child(2) { top: 29px; }
#nav-toggle span:nth-child(3) { top: 39px; }

.open #nav-toggle span:nth-child(1) { top: 28px; transform: rotate(315deg); }
.open #nav-toggle span:nth-child(2) { top: 28px; transform: rotate(-315deg); }
.open #nav-toggle span:nth-child(3) { top: 28px; transform: rotate(-315deg); }

#mobile-head {
  width: 100%;
  height: 56px;
  z-index: 999;
  position: relative;
}

/* サイドバーナビ */
#global-nav {
  position: fixed;
  right: -246px;
  top: 64px;
  background-color: #efefef;
  padding: 0 0 30px 0;
  width: 246px;
  height: 100%;
  transition: .2s ease-in-out;
  z-index: 1000;
  overflow-y: scroll;
  overscroll-behavior: contain;
}
#global-nav.slideright {
  right: 0;
  top: 64px;
  position: fixed;
}
#global-nav .sidebar_top {
  width: 246px;
  height: 55px;
  text-align: center;
  display: flex;
  justify-content: space-evenly;
  border-bottom: 1px solid #c6c6c6;
}
#global-nav .sidebar_top .sidebar_search {
  flex-basis: 125px;
  height: 55px;
  border-right: 1px solid #c6c6c6;
}
#global-nav .sidebar_top .sidebar_search a {
  display: block;
  height: 55px;
  text-decoration: none;
  color: #333;
  font-size: 12px;
  background: url("/wp-content/themes/keiyuukai_kidsdental/images/common/icon_search.png")
    no-repeat center 4px #efefef;
  background-size: 26px;
  padding-top: 30px;
}
#global-nav .sidebar_top .sidebar_search a:hover { background-color: #fff; }
#global-nav .sidebar_top .sidebar_access {
  flex-basis: 120px;
  height: 55px;
}
#global-nav .sidebar_top .sidebar_access a {
  display: block;
  width: 100%;
  height: 55px;
  text-decoration: none;
  color: #333;
  font-size: 12px;
  background: url("/wp-content/themes/keiyuukai_kidsdental/images/common/icon_access.png")
    no-repeat center 4px #efefef;
  background-size: 16px;
  padding-top: 30px;
}
#global-nav .sidebar_top .sidebar_access a:hover { background-color: #fff; }

#global-nav ul { padding: 10px 0 1em 0; }
#global-nav ul li { color: #000; font-size: 16px; line-height: 1em; }
#global-nav ul li span { font-size: 12px; color: #fbb03b; }
#global-nav ul li a {
  text-decoration: none;
  font-weight: bold !important;
  display: block;
  padding: 14px;
  color: #333;
}
#global-nav ul li a:hover { background-color: #fff; transition: .2s ease-in-out; }

.recruit_link a {
  display: block;
  width: 90%;
  margin: 16px auto;
  font-size: 14px;
  background:
    url("/wp-content/themes/keiyuukai_kidsdental/images/common/icon_window.svg"),
    linear-gradient(45deg, rgba(192,212,232,1) 0%, rgba(110,170,208,1) 14.12%,
      rgba(31,129,185,1) 28.68%, rgba(0,113,176,1) 35.39%, rgba(27,20,100,1) 91.19%);
  background-repeat: no-repeat, repeat;
  background-size: 20px, 100%;
  background-position: 95% center, 0 0;
  color: #fff;
  font-weight: 700;
  padding: 12px;
}
.recruit_link a:hover { opacity: 0.5; }

.reserv_link a {
  display: block;
  width: 90%;
  margin: 0 auto 16px auto;
  font-size: 14px;
  background:
    url("/wp-content/themes/keiyuukai_kidsdental/images/common/icon_window.svg"),
    linear-gradient(254.91deg, rgba(55,209,244,1) 0%, rgba(53,204,242,1) 15.59%,
      rgba(47,191,237,1) 33.26%, rgba(38,168,229,1) 51.95%, rgba(25,136,218,1) 71.35%,
      rgba(9,96,203,1) 91.1%, rgba(0,75,196,1) 100%);
  background-repeat: no-repeat, repeat;
  background-size: 20px, 100%;
  background-position: 95% center, 0 0;
  color: #fff;
  font-weight: 700;
  padding: 12px;
}
.reserv_link a:hover { opacity: 0.5; }

/* ============================================================
   メインコンテンツ共通
   ============================================================ */
main .bread {
  font-size: 18px;
  width: 1000px;
  margin: 4em auto 2em auto;
  overflow: hidden;
}
main .bread ul li { float: left; margin-right: 1em; }
main .bread ul li a { text-decoration: underline; }

/* ============================================================
   .topimage（ヒーローセクション）
   ============================================================ */
.topimage {
  width: 100%;
  height: auto;
  position: relative;
  overflow: hidden;
}
.wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.topimage h1 {
  width: 250px;
  position: absolute;
  left: 20px;
  top: 20px;
}
.topimage h1 img {
  width: 100%;
  height: auto;
}

/* ============================================================
   .contents（メインコンテンツラッパー）
   ============================================================ */
main .contents {
  width: 100%;
  text-align: center;
  background-color: #fff;
}
main .contents img {
  width: 100%;
  height: auto;
}

/* ============================================================
   .head-menu（横ナビゲーションバー）
   ============================================================ */
main .head-menu {
  clear: both;
  border-top: 6px solid #ff9000;
  background: linear-gradient(90deg,
    rgba(55,209,244,1) 0%, rgba(53,204,242,1) 15.59%,
    rgba(47,191,237,1) 33.26%, rgba(38,168,229,1) 51.95%,
    rgba(25,136,218,1) 71.35%, rgba(9,96,203,1) 91.1%,
    rgba(0,75,196,1) 100%);
  width: 100%;
  min-height: 60px;
  padding: 12px 0;
  margin: 0;
}
main .head-menu .head-menu-list {
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
main .head-menu .head-menu-list li {
  padding: 0 0.5em;
  border-left: 1px solid #fff;
}
main .head-menu .head-menu-list li:first-child { border: none; }
main .head-menu .head-menu-list li a { color: #fff; font-size: 18px; cursor: pointer; }
main .head-menu .head-menu-list li a:hover { border-bottom: 1px solid #fff; }

/* ============================================================
   #topimage_illust
   ============================================================ */
.topimage #topimage_illust {
  width: 100%;
  margin: 0;
}
.topimage #topimage_illust img {
  width: 100%;
  height: auto;
  display: block;
}

/* ============================================================
   #point4（楽しいポイント4つ）
   ============================================================ */
main .contents #point4 {
  width: 100%;
  background: url("/wp-content/themes/keiyuukai_kidsdental/images/index/bg_index4.gif")
    no-repeat center top #55c3f2;
  background-size: cover;
  padding: 30px 0;
  margin: -6px 0 0 0;
}
main .contents #point4 h2 {
  text-align: center;
  margin: 0 auto;
  font-size: 30px;
  font-weight: 700;
  color: #fff;
  line-height: 1.5;
}
main .contents #point4 .inner {
  display: flex;
  justify-content: space-between;
  width: 1200px;
  margin: 20px auto;
  flex-wrap: wrap;
}
main .contents #point4 .inner article {
  flex-basis: 50%;
  display: block;
}
main .contents #point4 .inner article h3 {
  display: none; /* 画像のalt属性でアクセシビリティを確保 */
}

/* ============================================================
   #treatment_menu（治療について）
   ============================================================ */
main .contents #treatment_menu {
  width: 100%;
  margin: 0 auto;
  padding: 30px 0 0 0;
  background-color: #54c3f1;
}
main .contents #treatment_menu h2 {
  text-align: center;
  font-size: 26px;
  margin-bottom: 30px;
  color: #fff;
  font-weight: bold;
}
main .contents #treatment_menu .inner {
  width: 96%;
  max-width: 1000px;
  margin: 0 auto;
  padding-bottom: 10px;
}
main .contents .toptreatment_index { margin-bottom: 6em; }
main .contents .toptreatment_index .treatmentindex_item {
  clear: both;
  width: 100%;
  padding: 16px 0 16px 16px;
  background-color: #fff;
  margin: 20px auto;
  border-radius: 16px;
}
main .contents .toptreatment_index .last_item { margin: 20px auto 30px auto !important; }
main .contents .toptreatment_index .treatmentindex_item h3 {
  width: 100%;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
  text-align: left;
}
main .contents .toptreatment_index .treatmentindex_item > img {
  width: 180px;
  height: 180px;
  object-fit: cover;
  float: left;
  border-radius: 50%;
}
main .contents .toptreatment_index .treatmentindex_item .item_text {
  margin-left: 220px;
  text-align: left;
}
main .contents .toptreatment_index .treatmentindex_item ul.itemindex_left {
  width: 45%;
  text-align: left;
  float: left;
}
main .contents .toptreatment_index .treatmentindex_item ul.itemindex_right {
  width: 45%;
  margin-left: 50%;
  text-align: left;
}
main .contents .toptreatment_index .treatmentindex_item ul li {
  background: url("/wp-content/themes/keiyuukai_kidsdental/images/common/arrow_right_b.svg")
    no-repeat left center;
  background-size: 12px;
  padding-left: 18px;
  font-size: 18px;
  line-height: 1.9;
  letter-spacing: -0.03em;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
  overflow: hidden;
}
main .contents .toptreatment_index .treatmentindex_item ul li a:hover { text-decoration: underline; }

/* ============================================================
   #photo_area（院内フォト）
   ============================================================ */
main .contents #photo_area {
  width: 100%;
  height: 1000px;
  margin: 0 auto;
  position: relative;
}
main .contents #photo_area .photo_img {
  width: 100%;
  height: 900px;
  background: url("/wp-content/themes/keiyuukai_kidsdental/images/index/img_clinic.jpg")
    no-repeat center center;
  background-size: cover;
  background-attachment: fixed;
}
main .contents #photo_area .photoarea_baloon {
  position: absolute;
  width: 800px;
  top: 740px;
  left: 50%;
  transform: translateX(-50%);
}
main .contents #photo_area .photoarea_baloon img { width: 100%; height: auto; }

/* ============================================================
   #index_announce（キャッシュレス・お知らせ）
   ============================================================ */
main #index_announce {
  width: 100%;
  margin: 30px auto;
}
main #index_announce .inner {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  border: 1px solid #ff6600;
  padding: 30px;
}
main #index_announce h2 {
  font-size: 22px;
  color: #ff0000;
  font-weight: bold;
  text-align: center;
  margin-bottom: 14px;
}
main #index_announce p {
  color: #ff0000;
  line-height: 1.8;
  margin-bottom: 0;
}

/* ============================================================
   #clinic_detail（診療時間・アクセス）
   ============================================================ */
main #clinic_detail { width: 100%; }
main #clinic_detail .inner {
  width: 1000px;
  margin: 80px auto 0 auto;
  display: flex;
  justify-content: space-between;
}
main #clinic_detail .inner article {
  flex-basis: 47%;
  position: relative;
}
main #clinic_detail .inner article.schedule h2 {
  width: 145px;
  text-align: center;
  margin: 0 auto 20px auto;
}
main #clinic_detail .inner article.schedule .schedule-table-img {
  width: 100%;
  height: auto;
  display: block;
}
main #clinic_detail .inner article.schedule .img_phone {
  width: 300px;
  position: absolute;
  right: 0;
  top: 320px;
  z-index: 10;
  display: block;
}
main #clinic_detail .inner article.schedule .img_phone img { width: 100%; height: auto; }
main #clinic_detail .inner article.schedule .img_crab {
  width: 150px;
  position: absolute;
  left: 0;
  top: 280px;
  z-index: 10;
}
main #clinic_detail .inner .map h2 {
  width: 117px;
  text-align: center;
  margin: 0 auto 20px auto;
}
main #clinic_detail .inner .map .maparea {
  width: 470px;
  height: 280px;
  position: relative;
}
main #clinic_detail .inner .map .maparea iframe {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 280px;
}
main #clinic_detail .inner .map p {
  font-size: 14px;
  margin-bottom: 0;
  text-align: center;
}
.btn_gmap {
  margin: 10px auto;
  text-align: center;
}
.btn_gmap a {
  display: inline-block;
  background-color: #0071b0;
  color: #fff;
  padding: 8px 20px;
  border-radius: 4px;
  font-size: 16px;
}
.btn_gmap a:hover { background-color: #005a8c; }

/* ============================================================
   .kidsclub
   ============================================================ */
main .kidsclub {
  margin: 30px 0;
  width: 100%;
  min-height: 200px;
  background-image: url("/wp-content/themes/keiyuukai_kidsdental/images/index/img_island.png");
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 157px;
  background-color: #ffe659;
  position: relative;
}
main .kidsclub .inner {
  position: relative;
  width: 1000px;
  min-height: 200px;
  margin: 0 auto;
  padding: 0 0 10px 0;
  background-image: url("/wp-content/themes/keiyuukai_kidsdental/images/index/img_king.png");
  background-repeat: no-repeat;
  background-position: 20px bottom;
  background-size: 240px;
}
main .kidsclub .mark_bosyu {
  position: absolute;
  top: -20px;
  left: 0;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ff9000, #ff5500);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  border-radius: 50%;
  line-height: 1.2;
  text-align: center;
  box-shadow: 0 3px 10px rgba(255,100,0,0.35);
}
main .kidsclub .mark_bosyu::after {
  content: "会員\A 募集中";
  white-space: pre;
}
main .kidsclub .img_plants {
  position: absolute;
  top: -20px;
  right: 0;
  width: 220px;
}
main .kidsclub h2.kidsclub-title {
  display: none; /* 画像見出しを使用するため非表示 */
}
main .kidsclub .title_kidsclub {
  width: 592px;
  margin: 0 0 0 250px;
  padding-top: 30px;
  display: block;
}
main .kidsclub p {
  margin: 20px 0 0 270px;
}
main .kidsclub .kidsclub_link {
  margin: 20px 10px 10px 680px;
  width: 150px;
  text-align: right;
}
main .kidsclub .kidsclub_link a {
  display: inline-block;
  background-color: #ff9000;
  color: #fff;
  padding: 8px 16px;
  border-radius: 4px;
  font-weight: bold;
}
main .kidsclub .kidsclub_link a:hover { opacity: 0.8; }

/* ============================================================
   .informaionarea（ニュース・ブログ）
   ============================================================ */
main .informaionarea {
  clear: both;
  width: 1000px;
  margin: 80px auto 70px auto;
  display: flex;
  justify-content: space-between;
}
main .informaionarea .info_list { flex-basis: 65%; }
main .informaionarea .info_list .news { margin: 0 0 40px 0; overflow: hidden; }
main .informaionarea .info_list .news h2 {
  width: 97px;
  text-align: center;
  margin: 0 auto 10px auto;
}
main .informaionarea .info_list .blog h2 {
  width: 75px;
  height: 70px;
  text-align: center;
  margin: 0 auto 0 auto;
}
main .informaionarea img { width: 100%; height: auto; }
main .informaionarea dl dt {
  text-align: left;
  font-size: 14px;
  color: #a7a7a7;
  margin-bottom: 4px;
}
main .informaionarea dl dd {
  text-align: left;
  background: url("/wp-content/themes/keiyuukai_kidsdental/images/index/img_marker.png")
    no-repeat left center;
  background-size: 28px;
  border-bottom: 1px solid #dadada;
  margin-bottom: 16px;
  padding-bottom: 6px;
  padding-left: 35px;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
main .informaionarea dl dd a { color: #333; }
main .informaionarea dl dd a:hover { text-decoration: underline; }
main .informaionarea .link_index a {
  float: right;
  display: block;
  text-align: left;
  background: url("/wp-content/themes/keiyuukai_kidsdental/images/common/arrow_right_g.png")
    no-repeat left center;
  background-size: 18px;
  padding-left: 22px;
  color: #333;
}
main .informaionarea .link_index a:hover { text-decoration: underline; }

/* ============================================================
   .btn_reservlink（予約ボタン）
   ============================================================ */
.btn_reservlink {
  clear: both;
  width: 80%;
  max-width: 700px;
  margin: 2em auto 3em auto;
  text-align: center;
}
.btn_reservlink img { width: 100%; height: auto; }
.btn_reservlink img:hover { opacity: 0.5; }

/* ============================================================
   #pagetop
   ============================================================ */
#pagetop {
  display: none;
  position: fixed;
  right: 15px;
  bottom: 20px;
  width: 130px;
  height: 120px;
  background: url("/wp-content/themes/keiyuukai_kidsdental/images/common/totop.png")
    no-repeat;
  background-size: 100%;
  z-index: 1000;
}
#pagetop a {
  display: block;
  height: 100%;
  overflow: hidden;
  text-indent: 200%;
  white-space: nowrap;
}

/* ============================================================
   フッター
   ============================================================ */
footer {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  padding: 3em 0 2em;
  border-top: 1px solid #dadada;
}
footer .inner { width: 1200px; margin: 0 auto; }
footer .logo-box { width: 40%; float: left; }
footer .logo-box img { width: 280px; }
footer .recruit_link { width: 280px; margin: 2em 0; }
footer .recruit_link a {
  display: block;
  width: 100%;
  font-size: 16px;
}
footer .footer-navi {
  width: 60%;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
footer .footer-navi ul {
  width: 30%;
  text-align: left;
  line-height: 2em;
  border-left: 1px solid #dadada;
  padding: 0 0 6em 1em;
}
footer .footer-navi ul li a { color: #000; font-size: 18px; font-weight: 300; }
footer .footer-navi ul li a:hover { border-bottom: 1px solid #212121; }
footer .footer-navi ul li.fmenu_doc {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23555'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8L14 2zm-1 2 5 5h-5V4zM8 13h8v1.5H8V13zm0 3h8v1.5H8V16zm0-6h4v1.5H8V10z'/%3E%3C/svg%3E")
    no-repeat left center;
  background-size: 13px;
  padding-left: 24px;
}
footer .footer-navi ul li.fmenu_mail {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a2 2 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E")
    no-repeat left center;
  background-size: 13px;
  padding-left: 24px;
}
footer .footer-navi ul li.fmenu_yoyaku {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E")
    no-repeat left center;
  background-size: 13px;
  padding-left: 24px;
}
footer address p { font-size: 14px; margin-bottom: 0.5em; }
footer .copy-right p {
  text-align: left;
  margin-bottom: 0;
  padding-bottom: 4em;
  font-size: 12px;
  width: 100%;
  margin: auto;
  color: #000;
  font-weight: 400;
}

/* ============================================================
   .ftrbtn_area（固定予約ボタン）
   ============================================================ */
.ftrbtn_area {
  position: fixed;
  display: block;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 20px 0;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 900;
}
.ftrbtn_area img {
  width: 80%;
  max-width: 700px;
  margin: 0 auto;
  display: block;
}
.ftrbtn_area img:hover { opacity: 0.6; }

/* ============================================================
   モバイル対応（767px以下）
   ============================================================ */
@media all and (max-width: 767px) {
  .viewpc { display: none !important; }
  .viewsp { display: block !important; }

  html { font-size: 1em; overflow-x: hidden; }
  body { color: #000; font-size: 1.4rem; overflow-x: hidden; }
  p { font-size: 18px; }

  .inner, .inner_conpact {
    clear: both;
    width: 96% !important;
    margin: 0 auto;
    padding: 0;
  }
  img { width: 100%; height: auto; text-align: center; }

  header { width: 55px; height: 55px; position: absolute; }
  header .logo_area { width: 45%; max-width: 190px; height: 55px; float: left; text-align: center; }

  #top-head { top: 0; right: 0; width: 100%; margin: 0 auto; padding: 3px 0 0; z-index: 1000; position: absolute; }
  #nav-toggle { display: block; margin-top: 2px; }

  #global-nav {
    position: fixed;
    right: -220px;
    top: 60px;
    background-color: #efefef;
    padding: 0;
    width: 220px;
    height: 100%;
    transition: .2s ease-in-out;
    z-index: 1000;
  }
  #global-nav.slideright { right: 0; position: fixed; display: block; }
  #global-nav .sidebar_top { width: 220px; }
  #global-nav ul { padding: 1em 0; }
  #global-nav ul li { font-size: 18px; }
  #global-nav ul li a { padding: 8px 14px; }

  main { width: 100%; clear: both; }

  .topimage {
    width: 100%;
    margin-top: 60px;
    position: relative;
    overflow: hidden;
  }
  .wrapper { height: 100%; position: absolute; width: 100%; top: 0; left: 0; }
  .topimage h1 { width: 150px; position: absolute; left: 4px; top: 4px; }
  .topimage h1 img { width: 100%; height: auto; }

  main .head-menu {
    clear: both;
    border-top: 6px solid #ff9000;
    background: linear-gradient(90deg,
      rgba(55,209,244,1) 0%, rgba(53,204,242,1) 15.59%,
      rgba(47,191,237,1) 33.26%, rgba(38,168,229,1) 51.95%,
      rgba(25,136,218,1) 71.35%, rgba(9,96,203,1) 91.1%,
      rgba(0,75,196,1) 100%);
    width: 100%;
    height: auto;
    padding: 10px 0;
    margin: 0;
  }
  main .head-menu .head-menu-list li { padding: 0 0.5em; border-left: 1px solid #fff; line-height: 1.8; }
  main .head-menu .head-menu-list li a { color: #fff; font-size: 14px; display: block; cursor: pointer; }

  main .contents #point4 {
    width: 100%;
    background-color: #55c3f2;
    padding: 30px 0;
    margin: -6px 0 0 0;
  }
  main .contents #point4 h2 {
    width: 96%;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
    letter-spacing: -0.03em;
  }
  main .contents #point4 .inner { display: block; width: 100%; margin: 10px auto; }
  main .contents #point4 .inner article { width: 100%; display: block; margin: 0 auto; }

  main .contents .toptreatment_index .treatmentindex_item {
    clear: both;
    width: 96%;
    padding: 16px;
    border: 1px solid #CDCDCD;
    margin: 10px auto;
    border-radius: 0;
  }
  main .contents .toptreatment_index .treatmentindex_item h3 { font-size: 20px; font-weight: 600; margin-bottom: 8px; }
  main .contents .toptreatment_index .treatmentindex_item > img {
    width: 150px;
    height: 150px;
    float: none;
    display: block;
    margin: 0 auto 10px auto;
  }
  main .contents .toptreatment_index .treatmentindex_item .item_text { margin-left: 0; }
  main .contents .toptreatment_index .treatmentindex_item ul.itemindex_left { width: 100%; float: none; }
  main .contents .toptreatment_index .treatmentindex_item ul.itemindex_right { width: 100%; margin-left: 0; }

  main .contents #photo_area { width: 100%; height: 100%; margin: 0 auto; position: relative; }
  main .contents #photo_area .photo_img {
    width: 100%;
    height: 400px;
    background-attachment: scroll;
  }
  main .contents #photo_area .photoarea_baloon { width: 100%; max-width: 320px; top: 300px; }

  main #clinic_detail .inner { width: 94%; margin: 0 auto; display: block; }
  main #clinic_detail .inner article { width: 100%; position: relative; margin: 0 auto 1em auto; }
  main #clinic_detail .inner article.schedule h2 { width: 145px; margin: 0 auto 20px auto; }
  main #clinic_detail .inner article.schedule .img_phone { width: 80%; position: relative; margin: 10px auto; right: auto; top: auto; }
  main #clinic_detail .inner article.schedule .img_crab { display: none; }
  main #clinic_detail .inner .map .maparea { width: 100%; height: 280px; position: relative; }
  main #clinic_detail .inner .map .maparea iframe { position: absolute; left: 0; top: 0; width: 100%; height: 280px; }
  main #clinic_detail .inner .map p { font-size: 14px; text-align: center; }

  main .kidsclub {
    margin: 30px 0;
    width: 100%;
    min-height: 200px;
    background-image: none !important;
    background-color: #ffe659;
    position: relative;
  }
  main .kidsclub .inner {
    width: 96%;
    min-height: 200px;
    margin: 0 auto;
    padding: 0 0 80px 0;
    background-size: 140px;
  }
  main .kidsclub .mark_bosyu { top: -20px; left: 0; width: 120px; }
  main .kidsclub .img_plants { display: none !important; }
  main .kidsclub .title_kidsclub { width: 100%; margin: 30px auto 10px auto; padding-top: 80px; }
  main .kidsclub p { margin: 0 auto 20px auto; }
  main .kidsclub .kidsclub_link { margin: 10px; width: 180px; float: right; }

  main .informaionarea { clear: both; width: 100%; margin: 20px auto; display: block; }
  main .informaionarea .info_list { width: 94%; margin: 0 auto; }
  main .informaionarea .info_list .news { margin: 0 0 40px 0; overflow: hidden; }
  main .informaionarea .info_list .news h2 { width: 97px; margin: 0 auto 10px auto; }
  main .informaionarea .info_list .blog h2 { width: 75px; height: 70px; margin: 0 auto 0 auto; }

  .btn_reservlink { width: 90%; max-width: 700px; margin: 1em auto; }

  #pagetop { right: 15px; bottom: 0; width: 130px; height: 120px; }

  footer { width: 100%; margin: 30px auto 0 auto; display: flex; flex-wrap: wrap; padding: 1em 0; }
  footer .inner { width: 90%; margin: 0 auto; }
  footer .logo-box { width: 280px; float: none; margin: 0 auto; }
  footer .logo-box img { width: 100%; }
  footer .footer-navi { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; }
  footer .footer-navi ul { width: 90%; line-height: 1.5; border-left: 1px solid #dadada; padding: 0 0 0 0.3em; margin: 0 auto; }
  footer .footer-navi ul li a { font-size: 16px; font-weight: 300; }
  footer .copy-right p { font-size: 12px; width: 100%; margin: 20px auto 0 auto; text-align: center; padding-bottom: 4em; }
}

/* ============================================================
   ヒーロー・スライドショー（写真があれば）
   ============================================================ */
.hero-slideshow { position: absolute; inset: 0; overflow: hidden; }
.hero-slideshow img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: heroFade 21s infinite;
  will-change: opacity, transform;
}
.hero-slideshow img:nth-child(1) { animation-delay: 0s; }
.hero-slideshow img:nth-child(2) { animation-delay: 7s; }
.hero-slideshow img:nth-child(3) { animation-delay: 14s; }

@keyframes heroFade {
  0%   { opacity: 0; transform: scale(1.05); }
  3%   { opacity: 1; }
  30%  { opacity: 1; }
  36%  { opacity: 0; }
  100% { opacity: 0; transform: scale(1.12); }
}

/* ============================================================
   スクロールアニメーション
   ============================================================ */
.reveal {
  opacity: 0;
  transition: opacity .7s ease, transform .7s ease;
  will-change: opacity, transform;
}
.reveal.from-left  { transform: translateX(-48px); }
.reveal.from-right { transform: translateX(48px); }
.reveal.from-up    { transform: translateY(32px); }
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  .hero-slideshow img { animation: none; opacity: 0; }
  .hero-slideshow img:first-child { opacity: 1; transform: none; }
}

/* ============================================================
   内部ページ共通
   ============================================================ */

.page-banner {
  width: 100%;
  padding: 80px 0 40px;
  background: linear-gradient(135deg,
    rgba(55,209,244,1) 0%, rgba(38,168,229,1) 50%, rgba(0,75,196,1) 100%);
  text-align: center;
}
.page-banner h1 {
  color: #fff;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.page-banner .page-banner-en {
  color: rgba(255,255,255,0.75);
  font-size: 15px;
  letter-spacing: 0.25em;
  margin-bottom: 0;
  line-height: 1;
}

.page-content {
  padding: 40px 0 60px;
  text-align: left;
}
.page-content h2 {
  font-size: 26px;
  font-weight: 700;
  color: #004bc4;
  border-bottom: 3px solid #55c3f2;
  padding-bottom: 10px;
  margin-bottom: 24px;
  margin-top: 40px;
}
.page-content h2:first-child { margin-top: 0; }
.page-content h3 {
  font-size: 20px;
  font-weight: 700;
  color: #333;
  border-left: 4px solid #ff9000;
  padding-left: 12px;
  margin-bottom: 16px;
  margin-top: 30px;
}

/* ステップ形式（診療の流れ） */
.step-list { list-style: none; padding: 0; margin: 0; }
.step-item {
  display: flex;
  gap: 20px;
  margin-bottom: 24px;
  background: #f8f9fa;
  border-radius: 12px;
  padding: 24px;
  align-items: flex-start;
  position: relative;
}
.step-item + .step-item::before {
  content: "↓";
  display: block;
  text-align: center;
  font-size: 24px;
  color: #55c3f2;
  margin: -14px auto;
  position: relative;
  z-index: 1;
}
.step-num {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #37d1f4 0%, #004bc4 100%);
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.step-body { flex: 1; }
.step-body h3 { margin-top: 0; border: none; padding: 0; }
.step-body p { margin-bottom: 0; font-size: 16px; }

/* スタッフカード */
.staff-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 24px;
}
.staff-card {
  flex: 1 1 280px;
  background: #f8f9fa;
  border-radius: 12px;
  padding: 24px;
  text-align: center;
}
.staff-card img {
  width: 140px !important;
  height: 140px !important;
  max-width: 140px;
  min-height: 140px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  margin: 0 auto 16px;
  display: block;
  background: #cde4f0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Ccircle cx='70' cy='52' r='26' fill='%2390b8cc'/%3E%3Cellipse cx='70' cy='112' rx='42' ry='32' fill='%2390b8cc'/%3E%3C/svg%3E") center/cover;
}
.staff-card h3 { border: none; padding: 0; text-align: center; color: #004bc4; margin-top: 0; }
.staff-card .staff-title { font-size: 14px; color: #666; margin-bottom: 8px; }
.staff-card p { font-size: 15px; text-align: left; }

/* 費用テーブル */
.costs-section { margin-bottom: 40px; }
.costs-table { width: 100%; border-collapse: collapse; }
.costs-table th {
  background: linear-gradient(90deg, #37d1f4 0%, #004bc4 100%);
  color: #fff;
  padding: 12px 16px;
  text-align: left;
  font-weight: 700;
  font-size: 16px;
}
.costs-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #dadada;
  font-size: 16px;
  vertical-align: top;
}
.costs-table tr:nth-child(even) td { background: #f5f5f5; }
.costs-table .price { text-align: right; white-space: nowrap; color: #004bc4; font-weight: 700; }

/* 感染予防アイテム */
.infection-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 20px;
}
.infection-item {
  flex: 1 1 280px;
  background: #f0f8ff;
  border: 1px solid #c0e0f8;
  border-radius: 10px;
  padding: 20px;
}
.infection-item h3 { border: none; padding: 0; color: #004bc4; margin: 0 0 10px 0; }
.infection-item p { margin-bottom: 0; font-size: 16px; }

/* アクセスページ */
.access-info-grid {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
  margin-top: 30px;
}
.access-map-area { flex: 1 1 400px; }
.access-map-area iframe { width: 100%; height: 350px; border: 0; }
.access-detail { flex: 1 1 280px; }
.access-detail h3 { border: none; padding: 0; color: #004bc4; margin-top: 0; }
.access-table { width: 100%; border-collapse: collapse; }
.access-table th {
  text-align: left;
  padding: 10px 12px;
  color: #fff;
  background: #004bc4;
  font-weight: 700;
  width: 110px;
  vertical-align: top;
  font-size: 15px;
  border-bottom: 1px solid #fff;
}
.access-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #e0e0e0;
  font-size: 15px;
  vertical-align: top;
}

/* お問い合わせ */
.contact-box {
  background: #f0f8ff;
  border: 2px solid #55c3f2;
  border-radius: 12px;
  padding: 30px;
  margin-bottom: 24px;
  text-align: center;
}
.contact-box h3 { border: none; padding: 0; color: #004bc4; margin: 0 0 12px; font-size: 22px; }
.contact-tel { font-size: 34px; font-weight: 700; color: #004bc4; letter-spacing: 0.05em; }
.contact-tel a { color: #004bc4; }
.contact-hours { font-size: 14px; color: #666; margin-top: 8px; margin-bottom: 0; }
.contact-btn {
  display: inline-block;
  background: linear-gradient(135deg, #37d1f4 0%, #004bc4 100%);
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  padding: 16px 40px;
  border-radius: 50px;
  margin-top: 16px;
  transition: opacity 0.2s;
}
.contact-btn:hover { opacity: 0.8; color: #fff; }

/* メッセージページ */
.message-doctor {
  display: flex;
  gap: 30px;
  align-items: flex-start;
  margin-bottom: 30px;
  flex-wrap: wrap;
}
.message-doctor-photo { flex-shrink: 0; width: 200px; }
.message-doctor-photo img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.message-doctor-text { flex: 1; min-width: 240px; }
.message-doctor-text p { font-size: 16px; }
.message-sign { text-align: right; font-weight: 700; color: #004bc4; margin-top: 16px; margin-bottom: 0; }

/* こだわりポイント */
.feature-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 20px;
}
.feature-card {
  flex: 1 1 200px;
  background: linear-gradient(135deg, #e8f7fd 0%, #f0f8ff 100%);
  border: 1px solid #b0d8f0;
  border-radius: 12px;
  padding: 20px 16px;
  text-align: center;
}
.feature-card-num {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: #004bc4;
  border-radius: 20px;
  padding: 2px 12px;
  display: inline-block;
  margin-bottom: 10px;
}
.feature-card h3 { border: none; padding: 0; margin: 0 0 8px; font-size: 16px; color: #004bc4; font-weight: 700; }
.feature-card p { font-size: 14px; margin-bottom: 0; }

/* 訪問歯科 */
.houmon-intro {
  background: #fff8e1;
  border-left: 5px solid #ff9000;
  border-radius: 0 8px 8px 0;
  padding: 20px 24px;
  margin-bottom: 30px;
}
.houmon-intro p { margin-bottom: 0; font-size: 16px; }
.houmon-flow {
  background: #f0f8ff;
  border: 1px solid #c0e0f8;
  border-radius: 12px;
  padding: 24px;
  margin-top: 20px;
}
.houmon-flow h3 { border: none; padding: 0; color: #004bc4; margin-top: 0; }
.houmon-flow ol { padding-left: 1.5em; font-size: 16px; line-height: 2; }
.houmon-flow ol li { list-style: decimal; }

/* プライバシーポリシー */
.privacy-content h2 { color: #333; border-color: #004bc4; font-size: 22px; }
.privacy-content p, .privacy-content li { font-size: 16px; line-height: 1.9; }
.privacy-content ol, .privacy-content ul { padding-left: 1.5em; margin-bottom: 1em; }
.privacy-content ol li { list-style: decimal; }
.privacy-content ul li { list-style: disc; }

/* モバイル対応（内部ページ） */
@media all and (max-width: 767px) {
  .page-banner { margin-top: 60px; padding: 30px 20px; }
  .page-banner h1 { font-size: 24px; letter-spacing: 0.05em; }
  main .bread { width: 96% !important; margin: 1em auto; }

  .page-content { padding: 20px 0 40px; }
  .page-content h2 { font-size: 20px; }
  .page-content h3 { font-size: 17px; }

  .step-item { flex-direction: column; gap: 10px; padding: 16px; }
  .staff-grid { flex-direction: column; }
  .infection-grid { flex-direction: column; }
  .access-info-grid { flex-direction: column; }
  .access-map-area iframe { height: 250px; }
  .feature-cards { flex-direction: column; }
  .message-doctor { flex-direction: column; }
  .message-doctor-photo { width: 100%; }
  .message-doctor-photo img { width: 150px; height: 150px; margin: 0 auto; }
  .costs-table th, .costs-table td { padding: 8px 10px; font-size: 14px; }
  .contact-tel { font-size: 26px; }
  .contact-btn { font-size: 16px; padding: 14px 28px; }

  /* background-attachment:fixed はモバイルで強制リフローを引き起こすため無効化 */
  main .contents #photo_area .photo_img {
    background-attachment: scroll;
  }
}