@charset "UTF-8";
/* access.css — 診療時間・アクセスページ固有（schedule は home.css、feat-h/reservation は common.css を流用） */

/* ヒーロー（左テキスト＋右画像） */
/* PC: 高さはFigma(Top-image 840)で固定＝これ以上大きくしない。画像はcoverで枠内クロップ */
.access-hero{display:grid;grid-template-columns:550px 1fr;align-items:stretch;height:840px;}
.access-hero__text{padding:144px 44px 60px 50px;display:flex;flex-direction:column;}
.access-hero__title{font-family:var(--f-min);font-weight:400;font-size:54px;line-height:1.25;color:var(--c-green);margin-top:8px;}
.access-hero__sub{font-family:var(--f-min);font-size:18px;line-height:1.67;color:var(--c-ink);margin-top:24px;}
.access-hero__img{overflow:hidden;}
.access-hero__img img{width:100%;height:100%;object-fit:cover;}

.access-index{margin-top:40px;display:flex;flex-direction:column;gap:14px;}
.access-index a{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px;background:var(--c-green);color:#fff;
  font-family:var(--f-min);font-weight:500;font-size:20px;transition:opacity .25s;
}
.access-index a:hover{opacity:.85;}
.access-index a::after{content:"";width:8px;height:8px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:translateY(-2px) rotate(45deg);flex:none;}

/* コンテンツ（地図1400/flow1331 に合わせて幅1400。schedule は別セクションで影響なし） */
.access-content{width:min(100% - 100px,1400px);margin:0 auto;padding:8px 0 110px;}
.access-block{margin-top:88px;scroll-margin-top:120px;}

/* アクセス情報：地図＋[クリニック名(左)＋GoogleMAPボタン(右)]＋住所（Figma準拠） */
.access-map{width:100%;aspect-ratio:1400/633;overflow:hidden;margin-top:28px;background:var(--c-beige);}
.access-map iframe{width:100%;height:100%;border:0;display:block;}
.access-info__row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-top:40px;}
.access-info__name{font-family:var(--f-min);font-weight:500;font-size:24px;color:var(--c-ink);}
.access-info__addr{font-family:var(--f-min);font-size:16px;color:var(--c-ink);margin-top:8px;}
.access-map-btn{
  display:inline-flex;align-items:center;gap:12px;padding:14px 24px;flex:none;
  border:1px solid var(--c-green);color:var(--c-green);
  font-family:var(--f-min);font-size:16px;transition:background .2s,color .2s;
}
.access-map-btn:hover{background:var(--c-green);color:#fff;}
.access-map-btn::after{content:"";width:24px;height:8px;background:currentColor;-webkit-mask:url(../images/arrow-dark.svg) center/contain no-repeat;mask:url(../images/arrow-dark.svg) center/contain no-repeat;}

/* 経路（電車・車） */
.access-dir__from{
  display:inline-block;font-family:var(--f-min);font-weight:500;font-size:18px;color:var(--c-ink);margin:24px 0 20px;
  background:linear-gradient(transparent 60%, rgba(66,114,87,.30) 60%);padding:0 2px;
}
/* 経路カードグリッド（Figma flow 308:7114 / SP 359:10213 準拠）
   PC=3列×2段、各カード＝写真(405:270)＋角丸square番号バッジ＋説明。SP=1列積み。 */
/* 経路カード（Figma実測: 画像・番号バッジとも角丸なし＝四角。番号Shippori26px, 説明18px） */
.flow{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:58px;margin-top:8px;}
.flow__card{display:flex;flex-direction:column;}
.flow__img{
  display:block;width:100%;aspect-ratio:405/270;
  background:#efefef;background-size:cover;background-position:center;
}
.flow__cap{display:flex;align-items:flex-start;gap:16px;margin-top:22px;}
.flow__num{
  flex:none;width:40px;height:40px;background:var(--c-beige);
  display:grid;place-items:center;color:var(--c-ink);
  font-family:var(--f-min);font-size:26px;line-height:1;
}
.flow__cap p{font-family:var(--f-min);font-size:18px;line-height:1.6;color:var(--c-ink);padding-top:6px;}

@media (max-width:1023px){
  .access-hero{grid-template-columns:1fr;height:auto;min-height:0;}
  .access-hero__img{aspect-ratio:16/9;order:-1;}
  .access-hero__text{padding:40px 24px;}
  .access-content{width:min(100% - 48px,900px);}
  .flow{grid-template-columns:repeat(2,1fr);gap:40px 4%;}
}
@media (max-width:767px){
  .access-hero__text{padding:32px 25px;}
  .access-hero__title{font-size:34px;}
  .access-hero__sub{font-size:15px;margin-top:16px;}
  .access-index a{font-size:16px;padding:12px 16px;}
  .access-content{width:min(100% - 50px,600px);}
  .access-block{margin-top:56px;}
  .access-info__name{font-size:20px;}
  .access-map-btn{font-size:15px;}
  .access-dir__from{font-size:16px;}
  /* SP=1列積み（Figma SP flow 359:10213 準拠。写真370:270） */
  .flow{grid-template-columns:1fr;gap:32px;}
  .flow__img{aspect-ratio:370/270;}
  .flow__num{width:36px;height:36px;font-size:22px;}
  .flow__cap p{font-size:15px;}
}