:root{
  --hero-text:rgba(17,24,39,.9);
    --hero-shadow:0 0 6px rgba(255,255,255,.9);
    --hero-mincho:"Hiragino Mincho ProN","Yu Mincho","Hiragino Mincho Pro",serif;
    --ink:#1f2937;
    --warning:#f59e0b;
    --hours-radius:16px;
    --hours-minw:720px;
    --hours-time-w:92px;
    --doctor-accent:rgba(37, 99, 235, 0.7);
    --doctor-photo-h-pc:320px;
    --doctor-card-h-pc:380px;
    --doctor-row-h-sp:300px;
    --doctor-photo-h-sp:240px;
    --accent-navy:rgba(30, 64, 175, 0.85);
    --accent-link:rgba(30, 64, 175, 0.95);
    --accent-border:rgba(30, 64, 175, 0.15);
    --svc-icon:80px;
    --svc-icon-sp:72px;
    --svc-stroke:1.2;
}

.hero{
  position:relative;
    height:580px;
    overflow:hidden;
    padding:64px 20px;
    background:none;
}

.hero-bg{
  position:absolute;
    inset:0;
    z-index:0;
}

.hero-bg .bg{
  position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    opacity:0;
    transition:opacity 1.8s ease-in-out;
}

.hero-bg .bg1{
  background-image:url("../../hero.jpg"); opacity:1;
}

.hero-bg .bg2{
  background-image:url("../../hero_2.jpg");
}

.hero::before{
  content:"";
    position:absolute;
    inset:0;
    z-index:1;
    background:linear-gradient(
      90deg,
      rgba(255,255,255,.45) 0%,
      rgba(255,255,255,.18) 20%,
      rgba(255,255,255,0) 40%
    );
}

.hero-inner{
  position:relative;
    z-index:2;
    max-width:var(--maxw);
    margin:0 auto;
    padding:20px 20px 0 0;
}

.hero-copy{
  display:flex;
    gap:20px;
}

.hero-copy .col{
  writing-mode:vertical-rl;
    text-orientation:mixed;
    white-space:nowrap;
  
    font-family:var(--hero-mincho);
    font-size:1.15rem;
    letter-spacing:.06em;
    line-height:1.6;
  
    color:var(--hero-text);
    text-shadow:var(--hero-shadow);
}

.hero-copy .em{
  color:var(--accent-blue); font-weight:800;
}

.hero-access{
  white-space:nowrap;
    font-family:var(--hero-mincho);
    font-size:1.05rem;
    line-height:1.9;
    color:var(--hero-text);
    text-shadow:var(--hero-shadow);
}

.hero{
  position:relative;
}

.hero-access{
  position:absolute;
    left:auto;
    right:0;
    top:auto;
    bottom:-10px;
    z-index:2;
}

@media (max-width:768px){
  .hero-access{
    bottom:-110px;
        left:auto;
        right:5px;
        font-size:.95rem;
  }
}

.hero-access .em{
  color:var(--accent-blue); font-weight:800;
}

.hero-access .yori{
  font-size:.85em;
    font-weight:400;
    margin:0 .15em;
}

.section-inner{
  max-width:var(--maxw);
    margin:0 auto;
}

@media (max-width:768px){
  .hero{
    height:620px;
  }

  .hero-inner{
    padding:18px 16px 0 0;
  }

  .hero-copy .col{
    font-size:1.05rem;
  }
}

.visit .card li{
  margin-bottom:0.6em;
}

.hours-section .card{
  padding:18px;
}

.hours-note{
  margin:10px 0 0;
    color:var(--muted);
    font-size:.95rem;
}

.hours-wrap{
  margin-top:10px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}

.hours-table{
  width:100%;
    min-width:var(--hours-minw);
    border-collapse:separate;
    border-spacing:0;
  
    border:1px solid var(--border);
    border-radius:var(--hours-radius);
    overflow:hidden;
    background:#fff;
}

.hours-table :is(th, td){
  padding:12px 10px;
    text-align:center;
    border-right:1px solid var(--border);
    border-bottom:1px solid var(--border);
    font-variant-numeric:tabular-nums;
}

.hours-table :is(th:last-child, td:last-child){
  border-right:none;
}

.hours-table thead th{
  background:var(--sub-blue);
    font-weight:800;
    color:var(--ink);
}

.hours-table .time{
  white-space:nowrap;
    font-weight:800;
    background:#fff;
}

.hours-table .colonoscopy{
  color:var(--warning);
    font-weight:900;
}

.hours-legend{
  margin-top:12px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
    color:var(--ink);
    font-size:.95rem;
}

.hours-legend :is(.legend-main, .legend-note){
  width:100%;
}

.hours-legend .legend-main{
  font-weight:600;
    font-size:.95rem;
}

.hours-legend .legend-note{
  color:var(--muted);
    font-size:.9rem;
}

.hours-legend .mark{
  display:inline-flex;
    align-items:center;
    justify-content:center;
    width:1.4em;
    font-weight:900;
    margin-right:4px;
}

.hours-legend .mark.star{
  color:var(--warning); margin-left:10px;
}

@media (max-width:768px){
  .hours-wrap{
    overflow-x:hidden;
  }

  .hours-table{
    min-width:0;
        table-layout:fixed;
  }

  .hours-table :is(th, td){
    padding:8px 4px;
        font-size:.78rem;
  }

  .hours-table thead th:not(.time){
    writing-mode:vertical-rl;
        text-orientation:upright;
        padding:6px 2px;
        letter-spacing:0;
  }

  .hours-table :is(.time, th.time){
    width:var(--hours-time-w);
        min-width:var(--hours-time-w);
        max-width:var(--hours-time-w);
        font-size:.70rem;
        overflow:hidden;
        text-overflow:ellipsis;
  }
}

section:not(.hero){
  padding-block:28px;
}

.section-title{
  margin-bottom:4px;
}

.card{
  padding:14px;
}

.mobile-nav{
  position:absolute;
    top:100%;
    left:0;
    right:0;
  
    border-top:1px solid var(--border);
    box-shadow:0 18px 40px rgba(15, 23, 42, 0.14);
  
    max-height:calc(100vh - 84px);
    overflow:auto;
    -webkit-overflow-scrolling:touch;
}

#access .access-photo{
  order:1;
}

#access .access-map{
  order:2;
}

#access .access-details{
  order:3;
}

#access .access-photo{
  width:100%;
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 10px 26px rgba(15,23,42,0.10);
    background:#fff;
}

#access .access-photo img{
  width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

#access .access-map .map{
  width:100%;
    height:100%;
    border:0;
    border-radius:16px;
    display:block;
    object-fit:cover;
}

#access .map-open{
  margin-top:0;
    margin-bottom:16px;
    text-align:right;
    transform: translateY(-6px);
}

@media (min-width:900px){
  #access .access-grid{
    grid-template-columns: 1fr 1fr;
        gap:18px;
  }

  #access .access-photo{
    grid-column:1; grid-row:1; height:420px;
  }

  #access .access-map{
    grid-column:2; grid-row:1; height:420px;
  }

  #access .access-details{
    grid-column:1 / -1; grid-row:2;
  }
}

#doctor .doctor-photo-card{
  padding: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#doctor .doctor-photo{
  width: 100%;
    height: 220px;
    object-fit: contain;
    background: #fff;
    border-radius: 16px;
    display: block;
}

#doctor .doctor-caption{
  margin-top: 8px;
    text-align: center;
    font-weight: 900;
}

#doctor .doctor-profile,
#doctor .doctor-cw,
#doctor .doctor-quals{
  padding: 18px;
}

#doctor .doctor-head{
  display: flex;
    flex-direction: column;
    gap: 6px;
}

#doctor .doctor-role{
  font-weight: 800;
    letter-spacing: .08em;
    color: var(--muted);
    font-size: .95rem;
}

#doctor .doctor-name{
  font-weight: 900;
    font-size: 1.6rem;
    line-height: 1.15;
}

#doctor .doctor-sep{
  margin: 14px 0 10px;
    height: 1px;
    background: var(--border);
}

#doctor .doctor-block{
  margin-top: 12px;
}

#doctor .doctor-block:first-child{
  margin-top: 0;
}

#doctor .doctor-block-title{
  position: relative;
    display: inline-block;
    padding: 0 0 6px 12px;
    line-height: 1.2;
    font-weight: 700;
    margin-bottom: 8px;
}

#doctor .doctor-block-title::before{
  content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 1em;
    background: var(--doctor-accent);
}

#doctor .doctor-list{
  list-style: none;
    padding-left: 0;
    margin: 0;
    line-height: 1.6;
}

#doctor .doctor-list .y{
  font-weight: 800;
    color: var(--muted);
    margin-right: 6px;
    white-space: nowrap;
}

#doctor .doctor-list .sub{
  color: var(--muted);
    font-weight: 700;
}

@media (min-width:900px){
  #doctor .grid-2{
    grid-template-columns: 280px 1fr 1fr;
        align-items: stretch;
        gap: 16px;
  }

  #doctor .doctor-photo-card{
    height: var(--doctor-card-h-pc);
  }

  #doctor .doctor-photo{
    height: var(--doctor-photo-h-pc);
  }

  #doctor .doctor-cw,
  #doctor .doctor-quals{
    height: var(--doctor-card-h-pc);
        overflow: hidden;
        display: block;
  }

  #doctor .doctor-cw .doctor-list,
  #doctor .doctor-quals .doctor-list{
    columns: 1;
  }
}

@media (max-width:899px){
  #doctor .grid-2{
    grid-template-columns: 1fr 1fr;
        grid-auto-rows: auto;
        gap: 12px;
        align-items: stretch;
  }

  #doctor .doctor-photo-card{
    grid-column: 1;
        grid-row: 1;
        height: var(--doctor-row-h-sp);
  }

  #doctor .doctor-photo{
    height: var(--doctor-photo-h-sp);
  }

  #doctor .doctor-cw{
    grid-column: 2;
        grid-row: 1;
        height: var(--doctor-row-h-sp);
        overflow: hidden;
        padding: 12px;
        font-size: .92rem;
  }

  #doctor .doctor-quals{
    grid-column: 1 / -1;
        grid-row: 2;
        height: auto;
        overflow: visible;
        padding: 12px;
        font-size: .92rem;
  }

  #doctor .doctor-block{
    margin-top: 10px;
  }

  #doctor .doctor-block-title{
    margin-bottom: 6px; padding-bottom: 6px;
  }
}

.clinic-slider .slide{
  position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.9s ease;
}

#clinic .feature-item + .feature-item{
  border-top:1px solid var(--accent-border);
}

@media (max-width:899px){
  #clinic .feature-num{
    min-width:50px; height:50px; font-size:.9rem;
  }
}

.section-services .card{
  position:relative;
}

.section-services .card::before{
  content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:3px;
    background:var(--accent-navy);
}

.section-services .card::after{
  content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:3px;
    background:var(--accent-navy);
}

@media (hover:hover) and (pointer:fine){
  .section-services .card:hover{
    transform: translateY(-2px);
        box-shadow: 0 10px 26px rgba(30, 64, 175, 0.10);
  }
}

#services .service-divider{
  width:32px;
    height:3px;
    background:var(--accent-navy);
    margin:8px 0 12px;
    border-radius:2px;
}

#services .card :is(h3, h4),
#doctor  .card :is(h3, h4){
  position:relative;
    padding-left:12px;
}

#services .card :is(h3, h4)::before,
#doctor  .card :is(h3, h4)::before{
  content:"";
    position:absolute;
    left:0;
    top:50%;
    transform:translateY(-50%);
    width:3px;
    height:1.2em;
    background:var(--accent-navy);
    border-radius:2px;
}

#doctor .doctor-block-title{
  position:relative;
    padding-left:12px;
  
  
    background-image: linear-gradient(var(--accent-navy), var(--accent-navy));
    background-repeat:no-repeat;
    background-position:0 0;
    background-size:3px 100%;
}

#doctor .doctor-block-title::before{
  content:none !important;
}

#doctor .doctor-block-title::after{
  content:none !important;
}

@media (max-width:768px){
  #services .card{
    min-height:200px;
  }
}

.section-title-link{
  font-size:.95rem;
    font-weight:700;
    color:var(--accent-link);
    white-space:nowrap;
}

.section-title-link:hover{
  text-decoration:underline;
    text-underline-offset:3px;
}

#services .card{
  position:relative;
}

#services .card .card-more{
  display:inline-block;
    margin-top:10px;
    font-weight:700;
    color:var(--accent-link);
}

#services .card .card-more:hover{
  text-decoration:underline;
    text-underline-offset:3px;
}

#partners a{
  display:block;
}

@media (hover:hover) and (pointer:fine){
  #partners a:hover img{
    transform: translateY(-1px);
        filter: saturate(1.05);
  }
}

#news .news-card{
  padding:18px 18px 12px;
}

#news .news-list{
  list-style:none;
    margin:0;
    padding:0;
}

#news .news-item{
  display:flex;
    gap:14px;
    align-items:baseline;
    padding:12px 0;
    border-bottom:1px solid rgba(226, 232, 240, 0.9);
}

#news .news-item:last-child{
  border-bottom:none;
}

#news .news-date{
  font-size:.88rem;
    color:var(--accent-link);
    white-space:nowrap;
    min-width:6.5em;
}

#news .news-text{
  font-size:1rem;
    color:inherit;
}

#news .news-accordion{
  display:block;
    min-height:220px;
}

#news details.news-detail{
  border-bottom:1px solid rgba(226, 232, 240, 0.9);
}

#news summary.news-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 12px 0;
}

#news .news-chev{
  margin-left:auto;
    transform:rotate(0deg);
    transition:transform .2s ease;
    color:var(--accent-link);
    font-weight:900;
}

#news details[open] .news-chev{
  transform:rotate(90deg);
}

#news .news-body{
  display:block;
    padding:0 0 12px;
}

#news .news-body p{
  margin:0 0 0 6.5em;
    font-size:.96rem;
    color:rgba(51, 65, 85, 0.95);
    line-height:1.7;
}

@media (max-width:768px){
  #news .news-card{
    padding:16px 14px 10px;
  }

  #news .news-item{
    gap:12px;
  }

  #news .news-date{
    min-width:6.2em;
  }

  #news .news-text{
    font-size:.98rem;
  }

  #news summary.news-summary{
    gap:12px;
  }

  #news .news-body p{
    margin-left:6.2em;
        font-size:.95rem;
  }
}

@media (max-width:768px){
  :root{
    --svc-icon: var(--svc-icon-sp);
  }
}

#services .card svg{
  display:none;
}

#services .card .svc-title-icon svg{
  display:block;
}

#services .card .svc-title{
  display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

#services .card .svc-title .svc-title-icon{
  width:var(--svc-icon);
    height:var(--svc-icon);
    flex:0 0 var(--svc-icon);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:var(--main-blue);
    opacity:.95;
}

#services .card .svc-title .svc-title-icon svg{
  width:100%;
    height:100%;
    max-width:var(--svc-icon);
    max-height:var(--svc-icon);
    display:block;
}

#services .card .svc-title .svc-title-icon svg rect{
  fill:none !important;
    stroke:none !important;
}

#services .card .svc-title .svc-title-icon svg :is(
  path, circle, ellipse, line, polyline, polygon
){
  fill:none !important;
    stroke:var(--accent-blue) !important;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-width:var(--svc-stroke) !important;
    vector-effect:non-scaling-stroke;
}

@media (min-width:1400px){
  .hero-inner{
    max-width:none;
        margin:0;
        padding-left:clamp(24px, 4vw, 120px);
        padding-right:clamp(16px, 3vw, 64px);
  }
}

.hero-copy{
  position:relative; z-index:2;
}

#visit, #news, #services, #doctor, #clinic, #access{
  scroll-margin-top:80px;
}

@media (max-width: 768px){
  .grid-2{
    grid-template-columns: 1fr;
  }

  #doctor .grid-2 > .card:nth-child(1){
    order:2;
  }

  #doctor .grid-2 > .card:nth-child(2){
    order:1;
  }
}

.visit-list{
  list-style:disc;
    margin-top:10px;
    padding-left:1.2em;
}

.visit-card{
  padding:10px 0;
    border-top:1px dashed var(--border);
}

.visit-card:first-child{
  border-top:none;
    padding-top:0;
}

.visually-hidden{
  position:absolute;
    width:1px;
    height:1px;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
}

/* index お知らせ：汎用 details の点線（border-top）を無効化して二重線を防ぐ */
#news details.news-detail{
  border-top: none !important;
}


/* iOS Safari 対策：診療時間表の曜日ヘッダーを回転させない */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 768px) {
    .hours-table thead th:not(.time){
      writing-mode: horizontal-tb;
      -webkit-writing-mode: horizontal-tb;
      text-orientation: mixed;
      -webkit-text-orientation: mixed;
    }
  }
}