@charset "UTF-8";
/* reserve.css — 診療予約ページ固有（共通は common.css） */

/* ヒーロー（緑・ヘッダー背後まで全幅） */
.reserve-hero{
  position:relative;background:var(--c-green);color:#fff;text-align:center;
  padding:152px 24px 142px;overflow:hidden;
}
.reserve-hero > *{position:relative;z-index:1;}
.reserve-hero .label{justify-content:center;color:#fff;}
.reserve-hero__title{font-family:var(--f-min);font-weight:400;font-size:48px;line-height:1.2;margin-top:8px;}
.reserve-hero__lead{font-family:var(--f-min);font-size:24px;margin-top:40px;}
/* display:flex ＋ 左右 auto ＝ 中央寄せのまま縦に積む（inline-flex だと2つが横に並んでしまう） */
.reserve-hero__btn{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:500px;max-width:calc(100% - 48px);margin:16px auto 0;padding:28px 48px;
  background:#fff;color:var(--c-green);
  font-family:var(--f-min);font-size:32px;transition:opacity .25s;
}
.reserve-hero__btn:hover{opacity:.88;}
.reserve-hero__btn img{width:28px;height:28px;flex:none;}
/* WEB / LINE の2つを縦に並べる（幅は同じなので端が揃う） */
.reserve-hero__btn + .reserve-hero__btn{margin-top:16px;}
/* LINE予約は指定色（--c-line）の塗り＋白文字。
   ヒーローの背景（--c-green #427257）と近い緑なので、境目が分かるよう白の枠線を足す */
.reserve-hero__btn--line{background:var(--c-line);color:var(--c-white);box-shadow:inset 0 0 0 1px var(--c-white);}

/* 本文（周辺散策） */
.reserve-content{width:min(100% - 100px,1400px);margin:0 auto;padding:80px 0 96px;}
.reserve-content > .feat-h{margin-bottom:16px;}
.reserve-intro{font-family:var(--f-min);font-size:18px;line-height:1.78;color:var(--c-ink);}

.reserve-spot{margin-top:64px;}
.reserve-spot__title{
  display:inline;font-family:var(--f-min);font-weight:400;font-size:22px;line-height:2;color:var(--c-ink);
  background:linear-gradient(transparent 60%, rgba(66,114,87,.35) 60%);  /* 緑のマーカー下線 */
  padding:0 2px;
}
.reserve-spot__text{font-family:var(--f-min);font-size:16px;line-height:1.9;color:var(--c-ink);margin-top:16px;}
.reserve-spot__cap{font-family:var(--f-min);font-size:14px;color:var(--c-muted);margin-top:24px;}

/* 写真コラージュ（展望台） */
/* ギャラリー（Figma masonry: 3列＋2列＋1列） */
.reserve-gallery{display:flex;flex-direction:column;gap:16px;margin-top:16px;}
.rg-row{display:grid;gap:16px;}
.rg-row--3{grid-template-columns:repeat(3,1fr);}
.rg-row--2{grid-template-columns:repeat(2,1fr);}
.rg-row--1{grid-template-columns:repeat(3,1fr);}
.rg-item{overflow:hidden;aspect-ratio:1/1;}
.rg-row--2 .rg-item{aspect-ratio:11/9;}
.rg-row--1 .rg-item{aspect-ratio:59/37;}
.rg-item img{width:100%;height:100%;object-fit:cover;display:block;}

/* 写真＋説明の行 */
.reserve-spot--row{display:grid;grid-template-columns:567px 1fr;gap:43px;align-items:center;}
.reserve-photo{position:relative;overflow:hidden;aspect-ratio:567/378;}
.reserve-photo img{width:100%;height:100%;object-fit:cover;}
.reserve-note{
  position:absolute;left:50px;top:50%;transform:translateY(-50%);
  color:#fff;font-family:var(--f-min);font-size:14px;line-height:1.7;text-shadow:0 1px 4px rgba(0,0,0,.5);
}
.reserve-note b{display:block;font-size:16px;margin-bottom:4px;}
.reserve-spot--row .reserve-spot__title{font-size:22px;}
.reserve-spot--row p{font-family:var(--f-min);font-size:16px;line-height:1.9;margin-top:16px;}

@media (max-width:1023px){
  .reserve-content{width:min(100% - 48px,900px);padding:56px 0 64px;}
  .reserve-spot--row{grid-template-columns:1fr 1fr;gap:24px;}
}
@media (max-width:767px){
  .reserve-hero{padding:96px 25px 88px;}
  .reserve-hero__title{font-size:32px;}
  .reserve-hero__lead{font-size:18px;margin-top:24px;}
  .reserve-hero__btn{width:min(100% - 50px,340px);padding:20px 28px;font-size:22px;}
  .reserve-content{width:min(100% - 50px,600px);}
  .reserve-gallery{gap:10px;}
  .rg-row{gap:10px;}
  .rg-row--1{grid-template-columns:1fr 1fr;}
  .reserve-spot--row{grid-template-columns:1fr;gap:12px;}
  .reserve-spot{margin-top:40px;}
  .reserve-intro,.reserve-spot__text,.reserve-spot--row p{font-size:15px;}
}