@charset "utf-8";

/* コンセプト：共通ヘッダー・フッターは layout.css を使用 */
.concept-page {
  --concept-content-width: 1408px;
  background: #fff;
  color: #222;
}
.concept-page img { max-width: 100%; height: auto; }
.concept-page picture, .concept-page picture img { display: block; }
.concept-full-image img { width: 100%; }
.concept-sp-only { display: none; }
.concept-inner { width: min(86.7%, var(--concept-content-width)); margin-inline: auto; }
.concept-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.concept-copy {font-size: clamp(13px, .84vw, 16px);line-height: 2.6;letter-spacing: .08em;}
.concept-heading { font-size: clamp(22px, 1.67vw, 32px); line-height: 1.6; letter-spacing: .12em; font-weight: 400; }

/* メインビジュアルと5つの魅力 */
.concept-intro { padding-bottom: clamp(80px, 8.3vw, 160px); color: #587482; }
.concept-intro-inner {
  width: min(86.7%, var(--concept-content-width));
  margin: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 50px;
}
.concept-title { width: min(100%, 562px); margin-top: max(-260px, -13.54vw); position: relative; }
.concept-diagram { grid-column: 2; grid-row: 1 / 3; width: min(100%, 691px); margin-top: max(-100px, -5.21vw); }
.concept-intro-story {grid-column: 1;margin-top: clamp(35px, 3.65vw, 70px);padding-left: 7%;}
.concept-intro-story h2 { font-size: clamp(18px, 1.46vw, 28px); font-weight: 400; letter-spacing: .12em; line-height: 1.6; }
.concept-intro-story .concept-copy { margin-top: 26px; font-size: clamp(12px, .84vw, 16px); letter-spacing: .22em; }

/* 丘上の暮らし */
.concept-hilltop-body {
  display: flow-root;
  background: #e3f1f5 url('../../img/concept/hilltop_bg.jpg') center top / 100% 100% no-repeat;
  padding-bottom: clamp(130px, 14.5vw, 280px);
}
.concept-badge {
  position: relative;
  width: clamp(180px, 19.69vw, 378px);
  margin: max(-140px, -7.29vw) auto 0;
}
.concept-badge img { display: block; width: 100%; }
.concept-hilltop-intro {width: min(86.7%, var(--concept-content-width));margin-inline: auto;margin-top: 20px;}
.concept-hilltop-intro .concept-copy {margin-top: 33px;letter-spacing: 0;line-height: 2.2;}
.concept-elevation { width: min(94%, 1770px); margin: clamp(70px, 7vw, 135px) auto 0; position: relative; }
.concept-elevation-scroll img { display: block; width: 100%; }
.concept-elevation-scroll:focus-visible { outline: 2px solid #587482; outline-offset: 6px; }
.concept-scroll-hint { display: none; }
.concept-hazard-map {width: min(80%, 900px);margin: clamp(150px, 14vw, 270px) auto 0;}
.concept-hazard-map img { width: 100%; }
.concept-safety { margin-top: 85px; text-align: center; }
.concept-safety-title { display: inline-block; padding: 10px 40px; position: relative; font-size: clamp(20px, 1.67vw, 32px); line-height: 1.7; letter-spacing: .14em; }
.concept-safety-title::before, .concept-safety-title::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 13px;
  border-block: 1px solid currentColor;
}
.concept-safety-title::before { left: 0; border-left: 1px solid currentColor; }
.concept-safety-title::after { right: 0; border-right: 1px solid currentColor; }
.concept-safety .concept-copy { margin-top: 28px; letter-spacing: 0; line-height: 2.2; }
.concept-value { width: min(87.5%, 1246px); margin: 60px auto 0; }
.concept-value img { width: 100%; }

/* 公園隣接の街区と遊歩道計画 */
.concept-park-plan {
  position: relative;
  display: flow-root;
  min-height: 84.27vw;
  background: url('../../img/concept/parkside_bg.jpg') center top / 100% auto no-repeat;
}
.concept-park-intro { position: relative; width: 58%; margin: 10px auto 0; text-align: center; }
.concept-park-distance { width: min(70%, 356px); margin: 35px auto 25px; }
.concept-park-intro .concept-copy { line-height: 2.3; letter-spacing: 0; }
.concept-park-gates { padding: 70px 20px; text-align: center; }
.concept-park-gates .concept-copy { margin: 24px auto 44px; line-height: 2.2; letter-spacing: 0; }
.concept-gate-photos { width: min(90%, 950px); margin: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.concept-gate-photos img { width: 100%; }
.concept-park-design { padding: 75px 20px 90px; background: linear-gradient(110deg, #fff 10%, #eff8f1 100%); text-align: center; }
.concept-park-design .concept-heading { font-size: clamp(20px, 1.56vw, 30px); letter-spacing: .08em; }
.concept-materials { width: min(90%, 950px); margin: 36px auto 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.concept-materials img { display: block; width: 100%; }
.concept-materials figcaption { margin-top: 14px; font-size: 15px; }
.concept-park-trees { padding: 80px 20px; text-align: center; }
.concept-park-trees .concept-copy { margin-top: 24px; line-height: 2.2; letter-spacing: 0; }
.concept-image-note { padding: 12px 20px 0; font-family: 'Times New Roman', serif; font-size: 14px; text-align: right; }
.concept-parkside {/* padding-bottom: clamp(90px, 9.9vw, 190px); */}

@media screen and (max-width: 800px) {
  .concept-pc-only { display: none; }
  .concept-sp-only { display: block; }
  br.concept-sp-only { display: inline; }
  .concept-inner { width: 87.5%; }
  .concept-heading {font-size: clamp(17px, 5.3vw, 34px);line-height: 1.5;letter-spacing: .1em;text-align: center;transform: translateX(.3em);}
  .concept-copy { font-size: clamp(13px, 3.3vw, 21px); line-height: 2; letter-spacing: .12em; text-align: center; }
  .concept-intro { padding-bottom: 13.7vw; }
  .concept-intro-inner { display: flex; flex-direction: column; width: 100%; }
  .concept-title { width: 87.5%; max-width: none; margin: -33.5vw 0 0; }
  .concept-title img { display: block; width: 100%; }
  .concept-diagram {width: 109%;margin: 0 auto;}
  .concept-intro-story {width: 94%;margin: 5vw auto 0;text-align: center;}
  .concept-intro-story h2 {font-size: clamp(22px, 5.5vw, 35px);line-height: 1.65;letter-spacing: .16em;transform: translateX(.5em);}
  .concept-intro-story .concept-copy { margin-top: 6vw; font-size: clamp(13px, 3.3vw, 21px); line-height: 2; letter-spacing: .17em; }
  .concept-hilltop-body { background-image: url('../../img/concept/hilltop_bg_sp.jpg'); padding-bottom: 28vw; }
  .concept-badge { width: 60%; margin-top: -25vw; }
  .concept-hilltop-intro { width: 94%; margin-top: 8vw; }
  .concept-hilltop-intro .concept-copy { width: 96%; margin: 9vw auto 0; font-size: clamp(13px, 3.3vw, 21px); line-height: 2; letter-spacing: .14em; }
  .concept-elevation { width: 100%; margin-top: 12vw; }
  .concept-elevation-scroll { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: #74939d transparent; }
  .concept-elevation-scroll img { width: 265vw; max-width: none; }
  .concept-scroll-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: absolute;
    right: 8%;
    top: 45%;
    pointer-events: none;
    opacity: 1;
    transition: opacity .3s ease, visibility .3s ease;
  }
  .concept-scroll-hint img { width: clamp(42px, 11vw, 70px); animation: concept-swipe 1.8s ease-in-out infinite; }
  .concept-scroll-hint span { font-family: sans-serif; font-size: 10px; color: #365965; background: rgba(255, 255, 255, .88); border-radius: 3px; padding: 3px 6px; }
  .concept-elevation.is-scrolled .concept-scroll-hint { opacity: 0; visibility: hidden; }
  .concept-elevation-notes { width: 85%; margin: 8vw auto 0; font-size: clamp(10px, 2.8vw, 18px); line-height: 1.8; }
  .concept-hazard-map { width: 87.5%; margin-top: 32vw; }
  .concept-safety { width: 100%; margin-top: 15vw; }
  .concept-safety-title { display: block; width: 87.5%; margin: auto; padding: 0; }
  .concept-safety-title img { width: 100%; }
  .concept-safety-title::before, .concept-safety-title::after { content: none; }
  .concept-safety .concept-copy { width: 96%; margin: 6vw auto 0; font-size: clamp(12px, 3.2vw, 20px); line-height: 2; letter-spacing: .1em; }
  .concept-value { width: 87.5%; margin-top: 32vw; }
  .concept-park-plan { min-height: 0; background: none; }
  .concept-park-intro { width: 94%; margin-top: 10vw; }
  .concept-park-distance { width: 63%; max-width: none; margin: 6vw auto; }
  .concept-park-intro .concept-copy { margin: 0 auto; font-size: clamp(13px, 3.3vw, 21px); line-height: 2; letter-spacing: .1em; }
  .concept-park-plan-sp { width: 100%; margin-top: 16vw; }
  .concept-park-gates { padding: 22vw 0 20vw; }
  .concept-park-gates .concept-heading { width: 94%; margin: auto; }
  .concept-park-gates .concept-copy { width: 96%; margin: 7vw auto; font-size: clamp(13px, 3.3vw, 21px); line-height: 2; letter-spacing: .1em; }
  .concept-gate-photos { width: 87.5%; grid-template-columns: 1fr; gap: 4.4vw; }
  .concept-park-design { padding: 18vw 0 16vw; }
  .concept-park-design .concept-heading { font-size: clamp(16px, 5.1vw, 33px); line-height: 1.5; letter-spacing: .07em; }
  .concept-materials { width: 81%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6vw 2.6vw; margin-top: 6.5vw; }
  .concept-materials figcaption { margin-top: 2vw; font-size: clamp(13px, 3.3vw, 21px); }
  .concept-park-trees { padding: 20vw 0 12vw; }
  .concept-park-trees .concept-copy { width: 94%; margin: 7vw auto 0; font-size: clamp(13px, 3.3vw, 21px); line-height: 2; letter-spacing: .12em; }
  .concept-image-note { padding: 8px 10px 0; font-size: 10px; }
  .concept-parkside {padding-bottom: 6vw;}
}

@keyframes concept-swipe {
  0%, 100% { transform: translateX(9px); }
  50% { transform: translateX(-9px); }
}
@media (prefers-reduced-motion: reduce) {
  .concept-scroll-hint img { animation: none; }
  .concept-scroll-hint { transition: none; }
}