/* 【クリニック案内】アクセス・診療カレンダー・固有レイアウト */
:is(.clinic-page,.classy-clinic-page) #map iframe{display:block;width:100%;max-width:100%;border:0}
:is(.content,.classy-lower-content) :is(.panel,.classy-access-panel)[hidden]{display:none!important}
:is(.content,.classy-lower-content) :is(.panel,.classy-access-panel)>img+img{margin-top:18px}
:is(.content,.classy-lower-content) :is(.panel,.classy-access-panel){padding-top:24px}
:is(.content,.classy-lower-content) :is(.tabs,.classy-access-tabs){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;border-bottom:1px solid #d7c4ab}
:is(.content,.classy-lower-content) :is(.tab,.classy-access-tab){appearance:none;cursor:pointer;border:1px solid #e9dfd3;border-bottom:0;background:#fbf8f3;color:#5b4b3d;padding:14px 10px;font:600 15px/1.5 "Noto Sans JP",sans-serif;transition:background .2s,color .2s}
:is(.content,.classy-lower-content) :is(.tab,.classy-access-tab).is-active{background:#a78150;color:#fff;border-color:#a78150}
:is(.content,.classy-lower-content) :is(.tab,.classy-access-tab):focus-visible{outline:2px solid #a78150;outline-offset:2px}
@media(max-width:767px){
:is(.content,.classy-lower-content) :is(.tab,.classy-access-tab){padding:12px 5px;font-size:14px}
:is(.content,.classy-lower-content) :is(.panel,.classy-access-panel){padding-top:20px}
}

/* ==========================================================
 * 【固定ページ共通】clinic本文を完成済み下層ページと同じ幅にする
 * ========================================================== */
:is(.clinic-page,.classy-clinic-page){background:#fffdf9;color:#443d37}

:is(.clinic-page,.classy-clinic-page) :is(.clinic-page .content,.classy-clinic-content)>section{margin-top:48px}
/* ==========================================================
 * 【アクセス案内】3つのタブをPC・SPとも横一列に固定
 * ========================================================== */
:is(.clinic-page,.classy-clinic-page) :is(.clinic-page .content,.classy-clinic-content) :is(.tabs,.classy-access-tabs){display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important;list-style:none!important;width:100%!important;margin:0!important;padding:0!important;align-items:stretch!important}
:is(.clinic-page,.classy-clinic-page) :is(.clinic-page .content,.classy-clinic-content) :is(.tabs,.classy-access-tabs)>:is(.tab,.classy-access-tab){display:block!important;float:none!important;position:static!important;clear:none!important;grid-column:auto!important;width:100%!important;min-width:0!important;max-width:none!important;margin:0!important;box-sizing:border-box!important;transform:none!important;white-space:nowrap!important;text-align:center!important}
:is(.clinic-page,.classy-clinic-page) :is(.panel,.classy-access-panel)[hidden]{display:none!important}
/* ==========================================================
 * 【アクセス案内】既存地図とMetaSliderは元の表示サイズを維持して中央揃え
 * ========================================================== */
:is(.clinic-page,.classy-clinic-page) :is(.walk-map,.classy-access-walk-map),:is(.clinic-page,.classy-clinic-page) :is(.access-image,.classy-access-reference-image){display:block!important;width:auto!important;max-width:100%!important;height:auto!important;margin-left:auto!important;margin-right:auto!important}
:is(.clinic-page,.classy-clinic-page) :is(.slider,.classy-access-slider){text-align:center}
:is(.clinic-page,.classy-clinic-page) :is(.slider,.classy-access-slider) .metaslider{display:block!important;float:none!important;max-width:100%!important;margin-left:auto!important;margin-right:auto!important}
:is(.clinic-page,.classy-clinic-page) :is(.slider,.classy-access-slider) .metaslider .flexslider{margin-left:auto!important;margin-right:auto!important}
@media(max-width:767px){

:is(.clinic-page,.classy-clinic-page) :is(.clinic-page .content,.classy-clinic-content){padding:0}
:is(.clinic-page,.classy-clinic-page) :is(.clinic-page .content,.classy-clinic-content) :is(.tabs,.classy-access-tabs){gap:4px!important}
:is(.clinic-page,.classy-clinic-page) :is(.clinic-page .content,.classy-clinic-content) :is(.tabs,.classy-access-tabs)>:is(.tab,.classy-access-tab){font-size:13px!important;padding:12px 4px!important}
}

/* ==========================================================
   【クリニック案内】専用テンプレート内の幅・タブ・カレンダー・画像を補正
   ========================================================== */

/* 本文幅は common.css の .content に一元化（専用の幅上書きなし） */
:is(.clinic-page,.classy-clinic-page) :is(.tabs,.classy-access-tabs){display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;width:100%!important;gap:8px!important}
:is(.clinic-page,.classy-clinic-page) :is(.tabs,.classy-access-tabs)>button{display:block!important;width:100%!important;min-width:0!important;float:none!important;flex:none!important;box-sizing:border-box!important;margin:0!important}
:is(.clinic-page,.classy-clinic-page) :is(.walk-map,.classy-access-walk-map),:is(.clinic-page,.classy-clinic-page) :is(.access-image,.classy-access-reference-image){width:auto!important;max-width:100%!important;height:auto!important;margin-inline:auto!important}
:is(.clinic-page,.classy-clinic-page) :is(.slider,.classy-access-slider) .metaslider{width:fit-content;max-width:100%;margin-inline:auto!important;float:none!important}

/* ==========================================================
   【アクセス案内】タブ間の自動改行を除去し3等分に配置
   ========================================================== */
:is(.clinic-page .content,.classy-clinic-content) :is(.tabs,.classy-access-tabs) {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  width: 100% !important;
  gap: 0 !important;
  align-items: stretch;
}
:is(.clinic-page .content,.classy-clinic-content) :is(.tabs,.classy-access-tabs) > br { display: none !important; }
:is(.clinic-page .content,.classy-clinic-content) :is(.tabs,.classy-access-tabs) > :is(.tab,.classy-access-tab) {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  float: none !important;
  flex: none !important;
  white-space: nowrap;
}

/* ==========================================================
   【徒歩アクセス】既存MetaSliderを元の750px幅で中央寄せ
   ========================================================== */
:is(.clinic-page .content,.classy-clinic-content) :is(.slider,.classy-access-slider) {
  width: 100% !important;
  max-width: 750px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}
:is(.clinic-page .content,.classy-clinic-content) :is(.slider,.classy-access-slider) .metaslider,
:is(.clinic-page .content,.classy-clinic-content) :is(.slider,.classy-access-slider) .metaslider > div,
:is(.clinic-page .content,.classy-clinic-content) :is(.slider,.classy-access-slider) .flexslider {
  width: 100% !important;
  max-width: 750px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
:is(.clinic-page .content,.classy-clinic-content) :is(.slider,.classy-access-slider) .metaslider img {
  max-width: 100% !important;
  height: auto !important;
}


/* ==========================================================
 * 【当院について】SPアイキャッチとセクション余白の整合
 * trouble.css と親テーマのカレンダー指定を clinic 内だけで調整
 * ========================================================== */
@media screen and (max-width:700px) {
  :is(.clinic-page,.classy-clinic-page) .classy-trouble__hero {
    display:block;
    position:relative;
    width:calc(100% - 28px);
    min-height:0;
    margin:14px auto 0;
    overflow:visible;
    border:0;
    background:none;
  }
  /* 写真の有無にかかわらず英語見出し用の帯を作る */
  :is(.clinic-page,.classy-clinic-page) .classy-trouble__hero::before {
    content:"";
    display:block;
    width:100%;
    aspect-ratio:8 / 3;
    background:linear-gradient(115deg,#f6eee5,#e9ded0);
  }
  :is(.clinic-page,.classy-clinic-page) .classy-trouble__hero--photo::before {
    background-image:linear-gradient(90deg,rgba(248,243,235,.98),rgba(248,243,235,.78) 25%,rgba(248,243,235,0) 55%),var(--classy-trouble-hero);
    background-size:100% 100%,150% 100%;
    background-position:left center,right center;
    background-repeat:no-repeat;
  }
  :is(.clinic-page,.classy-clinic-page) .classy-trouble__hero-inner {
    position:static;
    width:100%;
    margin:0;
    padding:12px 6%;
    min-height:0;
  }
  :is(.clinic-page,.classy-clinic-page) .classy-trouble__hero .classy-trouble__eyebrow {
    position:absolute;
    top:0;
    left:0;
    display:flex;
    align-items:center;
    width:100%;
    aspect-ratio:8 / 3;
    margin:0;
    padding:0 6%;
    transform:none;
    font-size:18px;
    line-height:1.4;
    z-index:2;
  }
  :is(.clinic-page,.classy-clinic-page) .classy-trouble__heading {
    position:static;
    margin:0;
    padding:0;
    font-size:clamp(23px,6vw,30px);
    line-height:1.5;
  }
  /* 日本語タイトル下の装飾線を復帰 */
  :is(.clinic-page,.classy-clinic-page) .classy-trouble__hero-line {
    display:block;
    width:90px;
    height:1px;
    margin:18px 0 0;
    background:#bfa27d;
  }
  /* 旧テーマの section#calendar {margin-top:-70px;padding-top:70px} を打ち消す */
  :is(.clinic-page,.classy-clinic-page) :is(.clinic-page .content,.classy-clinic-content) > section,
  :is(.clinic-page,.classy-clinic-page) :is(.clinic-page .content,.classy-clinic-content) > section#calendar {
    margin:38px 0 0 !important;
    padding:0 !important;
    min-height:0;
  }
  :is(.clinic-page,.classy-clinic-page) :is(.clinic-page .content,.classy-clinic-content) > section > .classy-lower-eyebrow {margin:0 0 9px}
  :is(.clinic-page,.classy-clinic-page) :is(.clinic-page .content,.classy-clinic-content) > section > :is(.heading,.classy-lower-heading) {margin:0 0 22px}
}

/* クリニック概要：項目名（左列）のみ中央揃え。既存の左揃え指定より優先 */
:is(.clinic-page,.classy-clinic-page) table:is(.table,.classy-lower-table) th,
:is(.clinic-page,.classy-clinic-page) :is(.content,.classy-lower-content) table:is(.table,.classy-lower-table) th,
:is(.clinic-page,.classy-clinic-page) :is(.clinic-page .content,.classy-clinic-content) table:is(.table,.classy-lower-table) th {
  text-align: center !important;
}

/* ==========================================================
   【徒歩アクセス】PCは地図とMetaSliderを左右2列、SPは縦並び
   固定ページ本文・MetaSlider設定は変更しない
   ========================================================== */
@media (min-width: 768px) {
  :is(.clinic-page,.classy-clinic-page) :is(.clinic-page .content,.classy-clinic-content) #p-contentWalk:not([hidden]) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
    align-items: start;
  }
  :is(.clinic-page,.classy-clinic-page) :is(.clinic-page .content,.classy-clinic-content) #p-contentWalk > :is(.subheading,.classy-lower-subheading) {
    grid-column: 1 / -1;
  }
  :is(.clinic-page,.classy-clinic-page) :is(.clinic-page .content,.classy-clinic-content) #p-contentWalk > :is(.walk-map,.classy-access-walk-map) {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-width: 0;
    margin: 0 !important;
  }
  :is(.clinic-page,.classy-clinic-page) :is(.clinic-page .content,.classy-clinic-content) #p-contentWalk > :is(.slider,.classy-access-slider) {
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
    margin: 0 !important;
  }
  :is(.clinic-page,.classy-clinic-page) :is(.clinic-page .content,.classy-clinic-content) #p-contentWalk :is(.slider,.classy-access-slider) .metaslider,
  :is(.clinic-page,.classy-clinic-page) :is(.clinic-page .content,.classy-clinic-content) #p-contentWalk :is(.slider,.classy-access-slider) .metaslider > div,
  :is(.clinic-page,.classy-clinic-page) :is(.clinic-page .content,.classy-clinic-content) #p-contentWalk :is(.slider,.classy-access-slider) .flexslider {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
}