/* MAP page - left map/detail + right office list */
body.map-page{
  background:#fafafa !important;
}

body.map-page .modern-map-page{
  width:min(100% - 44px,1080px);
  margin:0 auto;
  padding:38px 0 64px;
}

body.map-page .map-page-title{
  min-height:118px;
  border-radius:24px;
  background:linear-gradient(100deg,rgba(250,255,235,.96) 0%,rgba(238,248,236,.92) 47%,rgba(229,244,249,.9) 100%);
  box-shadow:0 16px 36px rgba(18,35,60,.08);
  border:1px solid rgba(221,233,222,.9);
  padding:30px 34px !important;
  display:flex !important;
  align-items:center !important;
  position:relative;
  overflow:hidden;
  margin:0 0 22px !important;
  color:#17263f !important;
  font-family:"Yu Mincho","YuMincho","Hiragino Mincho ProN",serif;
  font-size:clamp(1.85rem,4vw,3.2rem) !important;
  letter-spacing:.08em;
}

body.map-page .map-page-title::before{
  content:"MAP" !important;
  position:absolute;
  left:34px;
  top:24px;
  color:#8aaa2b;
  font-size:.78rem;
  font-family:"Yu Gothic","YuGothic",Meiryo,sans-serif;
  font-weight:900;
  letter-spacing:.28em;
}

body.map-page .map-page-title::after{
  content:"";
  position:absolute;
  right:-36px;
  top:-42px;
  width:170px;
  height:170px;
  border-radius:48px;
  background:linear-gradient(135deg,rgba(202,226,72,.42),rgba(45,199,205,.18));
  transform:rotate(12deg);
}

.map-shell{
  background:rgba(255,255,255,.96);
  border:1px solid rgba(221,229,238,.95);
  border-radius:26px;
  box-shadow:0 16px 36px rgba(18,35,60,.08);
  padding:24px;
}

.map-section-title{
  display:grid;
  grid-template-columns:minmax(220px,.75fr) minmax(0,1fr);
  gap:18px;
  align-items:end;
  margin-bottom:20px;
}

.map-section-title span,
.map-office-list-title span,
.map-detail-head span{
  color:#8aaa2b;
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.22em;
}

.map-section-title h2,
.map-office-list-title h3,
.map-detail-head h3{
  margin:6px 0 0;
  color:#17263f;
  font-weight:900;
  letter-spacing:.08em;
}

.map-section-title h2{
  padding-left:15px;
  border-left:4px solid #b9d84a;
  font-size:1.55rem;
}

.map-section-title p{
  margin:0;
  color:#617085;
  line-height:1.8;
  font-size:.95rem;
}

.map-two-column{
  display:grid;
  grid-template-columns:minmax(0,1fr) 350px;
  gap:20px;
  align-items:start;
}

.map-left-pane{
  display:grid;
  gap:16px;
  min-width:0;
}

.map-frame-card,
.map-detail-card,
.map-right-pane{
  border:1px solid rgba(221,229,238,.95);
  border-radius:22px;
  background:linear-gradient(135deg,#ffffff,#f8fbef);
  box-shadow:0 10px 26px rgba(13,32,58,.055);
}

.map-frame-card{
  padding:12px;
  background:#fff;
}

#main-office-map{
  width:100%;
  height:420px;
  border:0;
  border-radius:18px;
  display:block;
  background:#e7eff5;
}

.map-detail-card{
  padding:20px 22px;
}

.map-detail-card dl{
  margin:14px 0 0;
  display:grid;
  gap:8px;
}

.map-detail-card dl div{
  display:grid;
  grid-template-columns:86px minmax(0,1fr);
  gap:12px;
  align-items:baseline;
  padding-bottom:8px;
  border-bottom:1px solid rgba(221,229,238,.75);
}

.map-detail-card dl div:last-child{
  border-bottom:none;
  padding-bottom:0;
}

.map-detail-card dt{
  color:#8aaa2b;
  font-weight:900;
  font-size:.82rem;
}

.map-detail-card dd{
  margin:0;
  color:#2d3b50;
  line-height:1.6;
}

.map-right-pane{
  padding:18px;
  position:sticky;
  top:108px;
}

.map-office-list-title{
  text-align:center;
  margin-bottom:14px;
}

.map-office-list{
  display:grid;
  gap:10px;
}

.map-office-card{
  width:100%;
  display:grid;
  grid-template-columns:82px minmax(0,1fr);
  gap:12px;
  align-items:center;
  text-align:left;
  padding:10px;
  border:1px solid rgba(221,229,238,.9);
  border-radius:18px;
  background:linear-gradient(135deg,#fff,#f8fbef);
  color:inherit;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(13,32,58,.045);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease,background .2s ease;
}

.map-office-card:hover,
.map-office-card.active{
  transform:translateY(-2px);
  border-color:rgba(124,179,213,.7);
  background:linear-gradient(135deg,#eef8ff,#f9fff0);
  box-shadow:0 12px 24px rgba(13,32,58,.08);
}

.map-office-card img{
  width:82px;
  height:62px;
  border-radius:14px;
  object-fit:cover;
  display:block;
}

.map-office-text{
  min-width:0;
}

.map-office-text b{
  display:block;
  color:#8aaa2b;
  font-size:.72rem;
  letter-spacing:.16em;
  margin-bottom:3px;
}

.map-office-text strong{
  display:block;
  color:#17263f;
  font-size:.88rem;
  line-height:1.32;
  margin-bottom:4px;
  font-weight:900;
}

.map-office-text small{
  display:block;
  color:#617085;
  font-size:.74rem;
  line-height:1.4;
}

@media (max-width:980px){
  body.map-page .modern-map-page{
    width:min(100% - 36px,1080px);
  }

  .map-two-column{
    grid-template-columns:1fr;
  }

  .map-right-pane{
    position:static;
  }

  .map-office-list{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:720px){
  body.map-page .modern-map-page{
    width:min(100% - 32px,1080px);
    padding:22px 0 44px;
  }

  body.map-page .map-page-title{
    min-height:96px;
    padding:28px 22px 22px !important;
    border-radius:20px;
  }

  body.map-page .map-page-title::before{
    left:22px;
    top:18px;
  }

  .map-shell{
    padding:18px;
    border-radius:22px;
  }

  .map-section-title{
    grid-template-columns:1fr;
  }

  #main-office-map{
    height:320px;
  }

  .map-office-list{
    grid-template-columns:1fr;
  }

  .map-detail-card dl div{
    grid-template-columns:72px minmax(0,1fr);
  }
}


/* 2026-06-09: desktop max-width tune */
@media (min-width: 981px) {
  body.map-page .zentaihaikei.modern-map-page {
    width: calc(100% - 44px) !important;
    max-width: 1080px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.map-page .map-shell {
    max-width: 1080px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.map-page .map-two-column {
    grid-template-columns: minmax(0, 690px) 330px !important;
    justify-content: center !important;
  }

  body.map-page #main-office-map {
    height: 390px !important;
  }
}

@media (min-width: 1400px) {
  body.map-page .zentaihaikei.modern-map-page {
    max-width: 1060px !important;
  }

  body.map-page .map-shell {
    max-width: 1060px !important;
  }

  body.map-page .map-two-column {
    grid-template-columns: minmax(0, 670px) 320px !important;
  }
}


/* 2026-06-09: MAP label size tune */
body.map-page .map-section-title span {
  font-size: .98rem !important;
  letter-spacing: .22em !important;
}

body.map-page .map-office-list-title span {
  font-size: .9rem !important;
  letter-spacing: .18em !important;
}

body.map-page .map-detail-head span {
  font-size: .86rem !important;
  letter-spacing: .16em !important;
}

body.map-page .map-section-title h2 {
  font-size: 1.62rem !important;
}

body.map-page .map-office-list-title h3 {
  font-size: 1.12rem !important;
}

body.map-page .map-detail-head h3 {
  font-size: 1.16rem !important;
}

/* 2026-09-22: 拠点一覧カードを少し大きく調整（写真を枠内でより大きく） */
@media (min-width: 981px) {
  body.map-page .zentaihaikei.modern-map-page,
  body.map-page .map-shell {
    max-width: 1120px !important;
  }

  body.map-page .map-two-column {
    grid-template-columns: minmax(0, 690px) 350px !important;
    gap: 22px !important;
  }

  body.map-page .map-right-pane {
    padding: 20px !important;
  }

  body.map-page .map-office-list {
    gap: 12px !important;
  }

  body.map-page .map-office-card {
    grid-template-columns: 108px minmax(0,1fr) !important;
    gap: 12px !important;
    padding: 10px !important;
    border-radius: 19px !important;
  }

  body.map-page .map-office-card img {
    width: 108px !important;
    height: 78px !important;
    border-radius: 13px !important;
  }

  body.map-page .map-office-text strong {
    font-size: .93rem !important;
    line-height: 1.36 !important;
    margin-bottom: 3px !important;
  }

  body.map-page .map-office-text small {
    font-size: .76rem !important;
    line-height: 1.42 !important;
  }
}

@media (min-width: 1400px) {
  body.map-page .zentaihaikei.modern-map-page,
  body.map-page .map-shell {
    max-width: 1120px !important;
  }

  body.map-page .map-two-column {
    grid-template-columns: minmax(0, 690px) 350px !important;
  }
}