@charset "utf-8";

/* ロケーション［徒歩10分圏で揃う街］。共通部分は layout.css を使用。 */
.location-walkable-town-page {
  --walkable-width: 1400px;
  --walkable-ink: #202020;
  color: var(--walkable-ink);
  background: #fff;
}
.location-walkable-town-page picture,
.location-walkable-town-page img { display: block; }
.location-walkable-town-page img { width: 100%; height: auto; }
.location-walkable-town-page [hidden] { display: none !important; }
.location-walkable-town-page a:focus-visible,
.location-walkable-town-page button:focus-visible,
.walkable-lifeinfo-panel:focus-visible { outline: 2px solid #14718c; outline-offset: 5px; }
.walkable-sp-only, .walkable-inline-cta { display: none; }
.walkable-inner { width: min(87.5%, var(--walkable-width)); margin-inline: auto; }
.walkable-intro { padding: 0 24px 160px; text-align: center; }
.walkable-intro h1 { position: relative; width: 580px; max-width: 60%; margin: -190px auto 5px; }
.walkable-intro h2 { font-size: clamp(24px, 1.67vw, 32px); line-height: 1.85; letter-spacing: .16em; }
.walkable-intro p { margin-top: 38px; font-size: clamp(14px, 1.05vw, 20px); line-height: 2.3; letter-spacing: .18em; }
.walkable-texture { background: #f9f6ef url('../../img/location/walkable-town/walkabletown_bg01.jpg') center top / 100% auto repeat-y; }
.location-page-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.location-page-nav a { display: block; }
.location-page-nav a:hover { opacity: .8; }
.walkable-overview { width: min(100%, 1620px); margin-inline: auto; padding: 35px 0 25px; }
.walkable-daily { position: relative; aspect-ratio: 1920 / 558; background: url('../../img/location/walkable-town/walkabletown_bg02.jpg') center / cover no-repeat; display: flex; align-items: center; }
.walkable-daily-copy { width: 75%; text-align: center; padding: 30px 20px; }
.walkable-en-heading { font-family: garamond, 'Times New Roman', serif; font-size: clamp(25px, 2.1vw, 40px); letter-spacing: .2em; }
.walkable-en-heading::after { content: ''; display: block; width: 1px; height: 65px; background: currentColor; margin: 25px auto 26px; }
.walkable-daily h3 { font-size: clamp(19px, 1.5vw, 28px); letter-spacing: .12em; line-height: 1.8; }
.walkable-daily p { margin-top: 26px; font-size: clamp(12px, .94vw, 18px); line-height: 2.2; }
.walkable-section-title { text-align: center; line-height: 1.25; letter-spacing: .18em; }
.walkable-section-title span { display: block; font-family: garamond, 'Times New Roman', serif; font-size: clamp(28px, 2.1vw, 40px); }
.walkable-section-title small { display: block; margin-top: 8px; font-size: 20px; letter-spacing: .12em; }
.walkable-section-title::after { content: ''; display: block; width: 1px; height: 65px; margin: 25px auto 0; background: currentColor; }
.walkable-shopping { padding: 220px 0 360px; }
.walkable-shopping > .walkable-inner { margin-top: 100px; }
.walkable-shop-row { display: grid; grid-template-columns: 45% 49%; gap: 6%; align-items: center; }
.walkable-shop-copy { min-width: 0; }
.walkable-feel h3 { width: 72%; }
.walkable-shop-copy h4 { margin-top: 42px; font-size: clamp(19px, 1.5vw, 28px); letter-spacing: .1em; line-height: 1.65; }
.walkable-shop-copy p { margin-top: 20px; font-size: clamp(12px, .94vw, 18px); line-height: 1.8; }
.walkable-shop-info { margin-top: 20px; }
.walkable-shop-tenants { margin-top: 24px; }
.walkable-small-shops { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10.5%; width: 78.3%; margin: 190px auto 200px; }
.walkable-small-shops h3 { width: 71.5%; margin: 25px auto 0; }
.walkable-pare h3 { width: 60%; }
.walkable-pare .walkable-shop-copy p { text-align: justify; }
.walkable-yutaka { display: grid; grid-template-columns: 34% 61.3%; gap: 4.7%; margin-top: 230px; align-items: start; }
.walkable-yutaka-photo { grid-column: 2; grid-row: 1; position: relative; padding-top: 55px; }
.walkable-yutaka-badge { position: absolute; top: 0; left: -70px; max-width: 145px; }
.walkable-yutaka .walkable-shop-copy { grid-column: 1; grid-row: 1; }
.walkable-yutaka h3 { width: 87%; }
.walkable-yutaka h4 { margin-top: 35px; }
.walkable-yutaka .walkable-shop-info { margin-top: 30px; }
.walkable-hospital { padding-bottom: 140px; text-align: center; }
.walkable-hospital > .walkable-section-title { margin-top: 130px; }
.walkable-hospital > h3 { margin: 90px 20px 0; font-size: clamp(20px, 1.5vw, 28px); letter-spacing: .1em; line-height: 1.8; }
.walkable-hospital > p { margin: 25px 20px 0; font-size: clamp(13px, .94vw, 18px); line-height: 2.2; }
.walkable-hospital-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8%; margin-top: 100px; }
.walkable-gourmet { padding: 190px 0 230px; }
.walkable-gourmet > h3 { text-align: center; margin: 55px 20px 0; font-size: clamp(21px, 1.5vw, 28px); letter-spacing: .12em; }
.walkable-gourmet-list { margin-top: 100px; }
.walkable-gourmet-list article + article { margin-top: 160px; }
.walkable-gourmet-list article:nth-child(1) { width: 91.67%; }
.walkable-gourmet-list article:nth-child(2) { width: 98.48%; }
.walkable-gourmet-list article:nth-child(3) { width: 85.05%; margin-left: 4.3%; }
.walkable-lifeinfo { padding-top: 90px; }
.walkable-lifeinfo > h2 { text-align: center; font-family: garamond, 'Times New Roman', serif; font-size: 26px; letter-spacing: .15em; margin-bottom: 70px; }
.walkable-lifeinfo-body { background: #f4f1f0; padding-bottom: 120px; }
.walkable-lifeinfo-panel { display: grid; grid-template-columns: 57.5% 42.5%; align-items: stretch; }
.walkable-lifeinfo-list { background: #fff; margin: 94px 32% 0 7.6%; padding: 45px 0 65px; }
.walkable-lifeinfo-list img { width: 82%; margin-inline: auto; }
.walkable-lifeinfo-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; width: min(84%, 1600px); margin: 50px auto 0; }
.walkable-lifeinfo-tabs button { position: relative; appearance: none; border: 0; border-radius: 0; padding: 25px 8px; color: #888; font: inherit; font-size: 20px; background: #dedbdb; box-shadow: inset 0 0 0 7px #d2cfcf; cursor: pointer; transition: background .25s, color .25s; }
.walkable-lifeinfo-tabs button[aria-selected="true"] { color: #fff; background: #39455f; box-shadow: inset 0 0 0 7px #203c32; }
.walkable-lifeinfo-tabs button[aria-selected="true"]::after { content: ''; position: absolute; inset: 9px; border: 1px solid #fff; pointer-events: none; }
.walkable-lifeinfo-tabs button:hover { color: #fff; background: #56627a; }
/* JSが使えない場合も全カテゴリーを閲覧できる。 */
.walkable-lifeinfo-body:not(.is-ready) .walkable-lifeinfo-panel + .walkable-lifeinfo-panel { margin-top: 40px; }

@media (min-width: 801px) and (max-width: 1600px) {
  .walkable-intro { padding-bottom: 8.3vw; }
  .walkable-intro h1 { width: 30.2vw; margin-top: -9.9vw; }
  .walkable-overview { width: 84.375%; }
  .walkable-en-heading::after { height: 3.38vw; margin: 1.3vw auto; }
  .walkable-daily p { margin-top: 1.35vw; }
  .walkable-shopping { padding: 11.45vw 0 18.75vw; }
  .walkable-shopping > .walkable-inner { margin-top: 5.2vw; }
  .walkable-section-title::after { height: 3.38vw; }
  .walkable-small-shops { margin: 9.9vw auto 10.4vw; }
  .walkable-yutaka { margin-top: 12vw; }
  .walkable-yutaka-photo { padding-top: 2.86vw; }
  .walkable-yutaka-badge { max-width: 7.55vw; left: -3.65vw; }
  .walkable-hospital > .walkable-section-title { margin-top: 6.77vw; }
  .walkable-hospital-list { margin-top: 5.2vw; }
  .walkable-gourmet { padding: 9.9vw 0 12vw; }
  .walkable-gourmet-list article + article { margin-top: 8.3vw; }
}
@media (min-width: 1601px) { .walkable-inner { width: min(73%, var(--walkable-width)); } }

@media (max-width: 800px) {
  .walkable-sp-only { display: initial; }
  .walkable-sp-break { display: block; }
  .walkable-inner { width: 87.5%; }
  .walkable-hero { padding-top: 0; }
  .walkable-intro { padding: 0 4% 14.5vw; }
  .walkable-intro h1 { width: 87.5vw; max-width: none; margin: -35.5vw auto 5.5vw; }
  .walkable-intro h2 { font-size: 5vw; line-height: 1.55; letter-spacing: .11em; }
  .walkable-intro p { margin-top: 8.3vw; font-size: 3.44vw; line-height: 1.9; letter-spacing: .11em; }
  .walkable-inline-cta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 9vw; }
  .walkable-inline-cta a { color: #fff; text-align: center; background: #471416; padding: 3vw 5px; font-size: 4.4vw; letter-spacing: .08em; }
  .walkable-inline-cta a + a { background: #624924; }
  .walkable-texture { background-image: url('../../img/location/walkable-town/walkabletown_bg01_sp.jpg'); }
  .location-page-nav { grid-template-columns: 1fr; gap: 3vw; width: 87.5%; margin-inline: auto; padding-top: 16vw; }
  .walkable-overview { width: 100%; padding: 4vw 0 12.5vw; }
  .walkable-daily { display: block; aspect-ratio: 640 / 1135.333; background-image: url('../../img/location/walkable-town/walkabletown_bg02_sp.jpg'); }
  .walkable-daily-copy { width: 100%; padding: 12vw 4% 0; }
  .walkable-en-heading { font-size: 6.25vw; letter-spacing: .16em; }
  .walkable-en-heading::after { height: 10vw; margin: 3.2vw auto 3.5vw; }
  .walkable-daily h3 { font-size: 5vw; line-height: 1.55; }
  .walkable-daily p { margin-top: 7.5vw; font-size: 3.44vw; line-height: 1.9; letter-spacing: .1em; }
  .walkable-shopping { padding: 16vw 0 22vw; }
  .walkable-section-title span { font-size: 6.25vw; }
  .walkable-section-title small { margin-top: 1.6vw; font-size: 3.44vw; }
  .walkable-section-title::after { height: 10vw; margin-top: 4.7vw; }
  .walkable-shopping > .walkable-inner { margin-top: 8.5vw; }
  .walkable-shop-row { display: block; }
  .walkable-shop-copy h3, .walkable-pare h3, .walkable-yutaka h3 { width: 100%; margin-top: 7vw; }
  .walkable-shop-copy h4 { margin-top: 7vw; font-size: 5vw; text-align: center; letter-spacing: .1em; line-height: 1.55; }
  .walkable-shop-copy p { margin-top: 8vw; font-size: 3.44vw; line-height: 1.95; letter-spacing: .13em; text-align: center; }
  .walkable-shop-info { margin-top: 5.5vw; }
  .walkable-shop-tenants { margin-top: 3.2vw; }
  .walkable-small-shops { display: block; width: 100%; margin: 22vw auto 24vw; }
  .walkable-small-shops article + article { margin-top: 22vw; }
  .walkable-small-shops h3 { width: 100%; margin-top: 7vw; }
  .walkable-small-shops article:first-child h3 { width: 83.5%; }
  .walkable-pare .walkable-shop-copy p { margin-top: 9vw; }
  .walkable-pare .walkable-shop-tenants { margin-top: 7.5vw; }
  .walkable-yutaka { display: flex; flex-direction: column; gap: 0; margin-top: 20vw; }
  .walkable-yutaka-photo { width: 100%; padding-top: 10.5vw; }
  /* SP案では店舗写真のみを大きく表示。右側のイメージ写真はPCで使用。 */
  .walkable-yutaka-photo > picture { width: 100%; aspect-ratio: 559 / 347; overflow: hidden; }
  .walkable-yutaka-photo > picture > img { width: 155%; max-width: none; position: absolute; bottom: 0; left: 0; }
  .location-walkable-town-page .walkable-yutaka-badge { width: 31.1vw; max-width: none; left: -3.5vw; top: 0; }
  .walkable-yutaka .walkable-shop-copy { width: 100%; }
  .walkable-yutaka .walkable-shop-info { margin-top: 7vw; }
  .walkable-hospital { padding-bottom: 20vw; }
  .walkable-hospital > .walkable-section-title { margin-top: 16vw; }
  .walkable-hospital > h3 { margin: 9vw 4% 0; font-size: 5vw; }
  .walkable-hospital > p { margin: 7vw 4% 0; font-size: 3.1vw; line-height: 1.9; }
  .walkable-hospital-list { display: block; width: 61.5%; margin-top: 12vw; }
  .walkable-hospital-list h4 + h4 { margin-top: 12vw; }
  .walkable-gourmet { padding: 18vw 0 25vw; }
  .walkable-gourmet > h3 { margin: 9vw 4% 0; font-size: 5vw; letter-spacing: .1em; }
  .walkable-gourmet-list { margin-top: 13vw; }
  .walkable-gourmet-list article:nth-child(n) { width: 100%; margin-left: 0; }
  .walkable-gourmet-list article + article { margin-top: 22vw; }
  .walkable-gourmet-list article:nth-child(3) { width: 107.25%; }
  .walkable-lifeinfo { padding-top: 14vw; }
  .walkable-lifeinfo > h2 { font-size: 4.4vw; margin-bottom: 10vw; }
  .walkable-lifeinfo-body { padding-bottom: 12vw; }
  .walkable-lifeinfo-panel { display: block; }
  .walkable-lifeinfo-list { margin: 0; padding: 8vw 6.25%; background: #f4f1f0; }
  .walkable-lifeinfo-list img { width: 100%; background: #fff; padding: 6vw; }
  .walkable-lifeinfo-tabs { width: 87.5%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3vw; margin-top: 4vw; }
  .walkable-lifeinfo-tabs button { padding: 4.5vw 4px; font-size: 3.44vw; box-shadow: inset 0 0 0 4px #d2cfcf; }
  .walkable-lifeinfo-tabs button[aria-selected="true"] { box-shadow: inset 0 0 0 4px #203c32; }
  .walkable-lifeinfo-tabs button[aria-selected="true"]::after { inset: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .walkable-lifeinfo-tabs button { transition: none; }
}

/* 共通ナビが収まらない中間幅では既存の開閉メニューを使用。 */
.is_location-walkable-town .menu-btn { border: 0; background: transparent; padding: 0; }
.is_location-walkable-town .menu-btn:focus-visible { outline: 2px solid #14718c; outline-offset: -5px; }
@media (min-width: 801px) and (max-width: 1140px) {
  .is_location-walkable-town .h__menu { display: none; }
  .is_location-walkable-town .menu-btn { display: block; }
  .is_location-walkable-town .l-h__links__menu2 { right: 110px; }
  .is_location-walkable-town .h__menu__list_sub { right: 115px; }
  .is_location-walkable-town .l-sitemenu { top: 98px; height: calc(100% - 98px); }
}