/* =========================================================
   components.css — shared building blocks used across pages
   (page-hero, strength/company page sections, history, prose)
   ========================================================= */
.page-hero{
  background: linear-gradient(180deg, var(--sky-pale) 0%, #FFFFFF 100%);
  padding: clamp(60px, 9vw, 120px) 0 clamp(50px, 7vw, 90px);
  border-bottom: 1px solid var(--line);
}
.page-hero-inner{
  display:grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: end;
}
.page-hero .h-display{ font-size: clamp(48px, 8vw, 110px); }
.page-hero .h-display .it{ color: var(--accent); }
.page-hero .breadcrumb{
  display:flex; gap:14px; align-items:center; flex-wrap: wrap;
  font-family: var(--serif-en); font-size:11px; letter-spacing:.28em; color: var(--accent);
  margin-bottom: 40px;
}
.page-hero .breadcrumb .sep{ opacity: .5; }
.page-hero .jp-title{
  font-family: var(--serif-jp); font-size: clamp(15px, 1.6vw, 19px); color: var(--navy); letter-spacing:.14em;
  margin-top: 26px;
}
@media (max-width: 900px){ .page-hero-inner{ grid-template-columns: 1fr; } }

.problem-strip{
  background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 60%, var(--accent) 100%);
  color:#fff;
}
.problem-inner{
  display:grid; grid-template-columns: 1fr 1.3fr; gap: clamp(40px, 6vw, 100px);
  align-items: center;
}
@media (max-width: 900px){ .problem-inner{ grid-template-columns: 1fr; } }
.problem-inner .lead{ color: rgba(255,255,255,.85); }
.problem-inner .h-section{ color:#fff; }
.stats-row{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  margin-top: 46px;
  border-top: 1px solid rgba(255,255,255,.15);
  padding-top: 40px;
}
.stat .k{
  font-family: var(--serif-num); font-size: clamp(44px, 5vw, 72px); color:#fff; line-height:1;
}
.stat .k .u{ font-family: var(--serif-jp); font-size: 14px; letter-spacing:.18em; margin-left:6px; color: rgba(255,255,255,.7); }
.stat .cap{ margin-top: 14px; font-size: 12px; letter-spacing:.14em; color: rgba(255,255,255,.7); }

.three-ways{ display:grid; grid-template-columns: repeat(3, 1fr); gap: clamp(30px, 3vw, 50px); }
.way{ border-top: 1px solid var(--accent); padding-top: 30px; }
.way .n{ font-family: var(--serif-en); font-size:12px; letter-spacing:.32em; color: var(--accent); }
.way h3{ margin-top: 20px; font-family: var(--serif-jp); font-size: clamp(20px, 2vw, 24px); font-weight: 500; letter-spacing:.06em; }
.way .en-t{ font-family: var(--serif-en); font-style: italic; color: var(--gray-500); font-size:14px; margin-top:6px; }
.way .img-placeholder{ aspect-ratio: 3/2; margin: 26px 0; }
.way p{ margin: 0; font-size: 13.5px; line-height: 2; color: var(--gray-700); letter-spacing:.05em; }
@media (max-width: 900px){ .three-ways, .stats-row{ grid-template-columns: 1fr; gap: 30px; } }

.points-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.point{
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  padding: clamp(28px, 3vw, 44px);
  min-height: 260px;
  display:flex; flex-direction: column; gap: 18px;
  background: #FFFFFF;
  transition: background .4s var(--ease);
}
.point:hover{ background: var(--sky-pale); }
.point .n{ font-family: var(--serif-en); font-size: 12px; letter-spacing:.32em; color: var(--accent); }
.point h4{ font-family: var(--serif-jp); font-size: 19px; font-weight:500; color: var(--navy); letter-spacing:.06em; line-height:1.7; }
.point p{ margin:0; font-size:13.5px; color: var(--gray-700); line-height:2; }
@media (max-width: 900px){ .points-grid{ grid-template-columns: 1fr; border-left:0; } .point{ border-right:0; } }

.reasons{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border-top: 1px solid var(--line);
}
.reason{ padding: 40px 24px; border-right: 1px solid var(--line); text-align: left; }
.reason:last-child{ border-right: 0; }
.reason .n{ font-family: var(--serif-num); font-size: 36px; color: var(--accent); line-height:1; }
.reason .t{ font-family: var(--serif-jp); font-size: 15px; font-weight:500; color: var(--navy); margin-top: 18px; letter-spacing:.06em; }
.reason .d{ margin-top: 12px; font-size: 12.5px; color: var(--gray-500); line-height: 1.95; letter-spacing:.04em; }
@media (max-width: 900px){ .reasons{ grid-template-columns: repeat(2,1fr); } .reason:nth-child(2){ border-right:0; } .reason{ border-bottom: 1px solid var(--line); } }
@media (max-width: 520px){ .reasons{ grid-template-columns: 1fr; } .reason{ border-right: 0; } }

.buyback-band{
  background: linear-gradient(135deg, var(--navy) 0%, var(--accent) 100%);
  color:#fff;
  padding: clamp(50px,6vw,90px) 0;
  margin-bottom: 80px;
}
.buyback-inner{ display:grid; grid-template-columns: 1fr 1.4fr; gap: 60px; align-items: end; }
.buyback-inner .h-section{ color:#fff; }
.buyback-list{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  border-top: 1px solid rgba(255,255,255,.2);
  padding-top: 30px; margin-top: 40px;
  list-style: none; margin-left:0; margin-right:0; padding-left:0; padding-right:0;
}
.buyback-list li{ list-style:none; }
.buyback-list .k{ font-family: var(--serif-en); font-style: italic; font-size: 12px; letter-spacing: .18em; color: var(--sky-light); }
.buyback-list .v{ margin-top: 10px; font-family: var(--serif-jp); font-size: 15px; letter-spacing:.06em; color:#fff; line-height:1.8; }
@media (max-width: 900px){
  .buyback-inner{ grid-template-columns: 1fr; }
  .buyback-list{ grid-template-columns: 1fr; }
}

.leader{ display:grid; grid-template-columns: 1fr 1.3fr; gap: clamp(30px, 5vw, 90px); align-items: start; }
.leader-fig .img-placeholder{ aspect-ratio: 4/5; }
.leader-body h2{ margin-bottom: 20px; }
.leader-body .sign{ margin-top: 40px; font-family: var(--serif-jp); font-size: 15px; letter-spacing:.1em; color: var(--navy); }
.leader-body .sign strong{ display:block; font-size: 22px; font-weight: 500; margin-top: 6px; letter-spacing: .18em; }
@media (max-width: 900px){ .leader{ grid-template-columns: 1fr; } }

.info-grid{ display:grid; grid-template-columns: 1fr 1.6fr; gap: clamp(30px, 5vw, 80px); }
@media (max-width: 900px){ .info-grid{ grid-template-columns: 1fr; } }

.info-table{ width:100%; border-collapse: collapse; border-top: 1px solid var(--line); }
.info-table th, .info-table td{
  padding: 22px 4px; border-bottom: 1px solid var(--line);
  font-size: 14px; letter-spacing:.06em; vertical-align: top; text-align: left;
}
.info-table th{ width: 30%; color: var(--accent); font-family: var(--serif-jp); font-weight: 500; }
.info-table td{ color: var(--navy-ink); line-height: 1.9; }

.history{ border-top: 1px solid var(--line); }
.history-row{
  display:grid; grid-template-columns: 180px 1fr; gap: 40px;
  padding: 30px 0; border-bottom: 1px solid var(--line);
}
.history-row .y{ font-family: var(--serif-num); font-size: 32px; color: var(--navy); line-height:1; }
.history-row .y .m{ font-family: var(--sans-jp); font-size: 12px; letter-spacing:.2em; color: var(--accent); margin-left: 8px; }
.history-row .d{ font-family: var(--serif-jp); font-size: 15px; color: var(--navy-ink); line-height:1.9; letter-spacing:.06em; }
@media (max-width: 900px){ .history-row{ grid-template-columns: 1fr; gap: 8px; } }

.prose{ max-width: 820px; margin: 0 auto; }
.prose h2{ font-family: var(--serif-jp); font-weight:500; font-size: 20px; color: var(--navy); margin: 60px 0 18px; letter-spacing: .06em; }
.prose h2:first-of-type{ margin-top: 0; }
.prose p{ font-size: 14px; line-height: 2.1; color: var(--gray-700); letter-spacing:.05em; margin: 0 0 1.2em; }
.prose ol, .prose ul{ padding-left: 22px; color: var(--gray-700); font-size: 14px; line-height: 2.1; }
.prose li{ margin-bottom: 6px; }

/* Google Maps embed — replaces the old static MAP placeholder */
.map-embed{
  position: relative; overflow: hidden;
  background: var(--sky-pale); border: 1px solid var(--line);
}
.map-embed iframe{
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}

/* Responsive safety net for wide data tables on very small screens */
.table-scroll{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
@media (max-width: 480px){
  .info-table th{ width: 40%; }
  .info-table th, .info-table td,
  .spec-table th, .spec-table td{ font-size: 13px; padding: 16px 2px; }
  .history-row .y{ font-size: 26px; }
}