@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;600&family=Noto+Serif+JP:wght@300;600&display=swap");
section { width: 100%; max-width: 100%; }
section .text { font-size: 1.6rem; }
section .section-header { text-align: center; position: relative; width: fit-content; margin-inline: auto; }
section .section-header .icon { position: absolute; width: clamp(80px, calc(8vw + 49px), 120px); translate: -100% -50%; }
section .section-header .en { font-family: 'EB Garamond', serif; font-weight: 300; font-style: normal; letter-spacing: 0.05em; -webkit-font-smoothing: antialiased; color: #3D3F54; font-size: clamp(54px, calc(4vw + 37px), 86px); line-height: 1; }
section .section-header .jp { font-size: clamp(24px, calc(1vw + 19px), 34px); margin-top: 1rem; line-height: 1.4; }
@media screen and (max-width: 640px) { section .text { font-size: 1.4rem; }
  section .section-header .icon { position: static; translate: 0 0; margin-inline: auto; margin-bottom: 1rem; } }

.section-inner:has(.category-header) { padding: 8rem 0; }

.overview { max-width: 100%; width: 100%; margin-top: 6rem; }
.overview > .img { margin-top: 4rem; }
@media screen and (max-width: 640px) { .overview { margin-top: 3rem; } }

.azamino { margin-top: 8rem; }
.azamino .text { font-size: 1.8rem; line-height: 2.4; margin-top: 4rem; }
.azamino .figure { margin-top: 6rem; max-width: 900px; margin-inline: auto; }
.azamino .map-image { margin: 0 calc(50% - 50vw + 8.5px); margin-top: 6rem; }
.azamino .facility-list.list01 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 6rem; max-width: 900px; margin-inline: auto; }
.azamino .facility-list.list01 .cap { width: 100%; left: 0; bottom: 0; text-align: right; padding: 5px 10px; display: block; background: #000000; background: linear-gradient(170deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%); }
.azamino .facility-list + .note { max-width: 900px; margin-inline: auto; margin-top: 2rem; padding-bottom: 8rem; }
@media screen and (max-width: 640px) { .azamino { margin-top: 6rem; }
  .azamino > .text { font-size: 1.6rem; line-height: 2; }
  .azamino > .facility-list { grid-template-columns: 1fr; } }

.category { font-family: '游ゴシック', 'Yu Gothic', 'YuGothic', 'Hiragino Kaku Gothic ProN', 'メイリオ', 'Meiryo', sans-serif; font-weight: 300; -webkit-font-smoothing: antialiased; max-width: 900px; margin-inline: auto; }
.category .category-header { display: flex; align-items: center; gap: 1rem 2rem; }
.category .category-header .en { font-weight: bold; letter-spacing: 0.1em; background-color: #aea376; padding: 5px; min-width: 220px; text-align: center; color: #fff; font-size: 2.2rem; line-height: 1; border-radius: 6px; }
.category .category-header .jp { font-feature-settings: "palt"; font-size: 2.6rem; font-weight: bold; line-height: 1.4; flex: 1; }
.category .facility-list { margin-top: 4rem; display: grid; row-gap: 4rem; }
.category .facility .name { font-feature-settings: "palt"; letter-spacing: 0.1em; font-weight: bold; color: #fff; line-height: 1.6; font-size: 2rem; background: #3D3F54; padding: 5px 10px; }
.category .facility .text { line-height: 1.6; margin-top: 1rem; }
@media screen and (max-width: 640px) { .category .category-header { flex-direction: column; justify-content: center; }
  .category .category-header .en { font-size: 1.8rem; min-width: 180px; }
  .category .category-header .jp { text-align: center; }
  .category .facility .name { font-size: 1.6rem; } }

.shopping .facility { display: grid; gap: 2rem; grid-template-columns: 40% 1fr; }
.shopping .facility01 .img-list { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
.shopping .facility01 .img-list .img:first-of-type { grid-column: span 2; }
.shopping .facility02 .img-box { order: -1; }
.shopping .facility03 .img-list { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
.shopping .facility03 .img-list .img:first-of-type { grid-column: span 2; }
.shopping .facility04 { display: grid; grid-template-columns: 1fr .8fr; gap: 4rem 2rem; }
.shopping .facility04 .detail { display: grid; grid-template-columns: 1fr 0.8fr; }
.shopping .facility04 .detail .img img { object-fit: cover; height: 100%; }
.shopping .facility04 .detail .text-block { background-color: #3D3F54; color: #fff; padding: 2rem; display: flex; flex-direction: column; justify-content: center; }
.shopping .facility04 .detail .text-block .title { font-size: 2.2rem; font-weight: bold; text-align: center; }
.shopping .facility04 .detail .text-block .text { font-size: 1,4rem; line-height: 1.4; }
.shopping .facility04 .txt-box .name { margin-top: 1rem; }
.shopping .facility04 .txt-box .name:first-of-type { margin-top: 0; }
@media screen and (max-width: 930px) { .shopping .facility { grid-template-columns: 1fr; }
  .shopping .facility02 .img-box { order: 1; }
  .shopping .facility04 { grid-template-columns: 1fr; }
  .shopping .facility04 .detail { order: -1; grid-row: inherit; } }
@media screen and (max-width: 640px) { .shopping .facility04 .detail .text-block .title { font-size: 1.8rem; }
  .shopping .facility04 .detail .text-block .text { font-size: 1.2rem; } }

.education .facility-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4.4rem; }
.education .facility:not(.park) .img { margin-top: 2rem; }
.education .park { grid-column: span 2; display: grid; grid-template-columns: 1fr 0.708fr; grid-template-rows: repeat(2, auto) 1fr; column-gap: 2rem; }
.education .park .img { grid-row: span 3; }
@media screen and (max-width: 930px) { .education .facility-list { gap: 2.5rem; } }
@media screen and (max-width: 640px) { .education .facility-list { gap: 2.5rem 2rem; } }
@media screen and (max-width: 400px) { .education .facility-list { grid-template-columns: 1fr; }
  .education .park { grid-column: span 1; grid-template-columns: 1fr; gap: 1rem; }
  .education .park .img { order: 3; } }

.others .facility { grid-column: span 2; display: grid; grid-template-columns: 1fr 0.708fr; grid-template-rows: repeat(2, auto) 1fr; column-gap: 2rem; }
.others .facility .img { grid-row: span 3; }
.others .facility04 { display: grid; align-items: flex-start; grid-template-columns: 1fr 0.708fr; grid-template-rows: repeat(3, auto) 1fr; gap: 4rem 2rem; }
.others .facility04 .img { order: 2; grid-row: span 4; }
.others .facility04 .name:nth-of-type(1) { order: 1; }
.others .facility04 .name:nth-of-type(2) { order: 3; }
.others .facility04 .name:nth-of-type(3) { order: 4; }
@media screen and (max-width: 640px) { .others .facility04 { grid-template-columns: 1fr; gap: 3rem; }
  .others .facility04 .img { order: 1; }
  .others .facility04 .name:nth-of-type(1) { order: 2; } }
@media screen and (max-width: 480px) { .others .facility { grid-template-columns: 1fr; }
  .others .facility .name + .img { margin-top: 2rem; } }

.distance-information { margin-top: 8rem; }
.distance-information a { margin-inline: auto; display: block; background-color: #aea376; color: #fff; font-size: 2.2rem; padding: 1rem 2rem; width: fit-content; font-feature-settings: "palt"; line-height: 1.2; text-align: center; }
.distance-information a:hover { filter: brightness(110%); }
.distance-information a::after { content: ''; display: inline-block; width: 1.5rem; height: 1.5rem; border: 1px solid #fff; border-width: 1px 1px 0 0; rotate: 45deg; margin-left: 1rem; }
@media screen and (max-width: 640px) { .distance-information { margin-top: 6rem; }
  .distance-information a { font-size: 1.8rem; position: relative; width: 100%; max-width: 300px; }
  .distance-information a::after { position: absolute; right: 3rem; top: 50%; translate: 0 -50%; width: 1.2rem; height: 1.2rem; margin-left: 1rem; } }

.aobaku { max-width: 100%; width: 100%; background: url("../img/location/aoba-bg.jpg") no-repeat 0% 0%; background-size: cover; color: #fff; margin-top: 10rem; font-family: '游ゴシック', 'Yu Gothic', 'YuGothic', 'Hiragino Kaku Gothic ProN', 'メイリオ', 'Meiryo', sans-serif; font-weight: 300; -webkit-font-smoothing: antialiased; }
.aobaku .inner { max-width: 900px; width: 90%; margin-inline: auto; padding: 0 0 4rem; }
.aobaku .en-title { text-align: center; font-size: 2.4rem; border-radius: 6px; background-color: #3D3F54; color: #fff; padding: 1.5rem 4rem; width: fit-content; margin-inline: auto; margin-top: -2.5rem; position: relative; z-index: 1; }
.aobaku .aobaku-header { font-feature-settings: "palt"; margin-top: 6rem; text-align: center; }
.aobaku .aobaku-header .catch-copy { font-size: clamp(18px, calc(2vw + 12px), 26px); line-height: 1.4; }
.aobaku .aobaku-header .main-copy { font-size: clamp(38px, calc(2vw + 31px), 48px); line-height: 1.2; margin-top: 1rem; }
.aobaku .aobaku-header + .text { margin-top: 3rem; line-height: 1.6; }
.aobaku .merit-list { margin-top: 4rem; display: grid; row-gap: 3rem; }
.aobaku .merit-list + .note { text-align: right; margin-top: 2rem; }
.aobaku .merit { background-color: #fff; border-radius: 6px; padding: 3rem 4rem; display: grid; grid-template-columns: 0.372fr 1fr; gap: 4rem; color: #3D3F54; }
.aobaku .merit .text-block { display: grid; grid-template-columns: 1fr 0.6fr; gap: 1rem 3rem; }
.aobaku .merit .text-block .title { font-size: 2.4rem; font-weight: bold; grid-column: span 2; }
.aobaku .merit .text-block .title .large { font-size: 140%; }
.aobaku .merit .text-block .title .x-large { font-size: 180%; }
.aobaku .merit .text-block .title .distinction { font-weight: normal; margin-left: 1rem; }
.aobaku .merit .text-block .text { line-height: 1.8; }
@media screen and (max-width: 930px) { .aobaku .merit { grid-template-columns: 1fr; }
  .aobaku .merit .ranking { max-width: 320px; margin-inline: auto; } }
@media screen and (max-width: 640px) { .aobaku { margin-top: 6rem; }
  .aobaku > .img .cap { bottom: inherit; top: 5px; }
  .aobaku .en-title { font-size: 2rem; padding: 1rem 3rem; }
  .aobaku .aobaku-header { margin-top: 3rem; }
  .aobaku .merit { padding: 3rem; gap: 3rem; }
  .aobaku .merit .ranking { max-width: 240px; }
  .aobaku .merit .text-block { grid-template-columns: 1fr; }
  .aobaku .merit .text-block .title { font-size: 2.2rem; grid-column: span 1; text-align: center; }
  .aobaku .merit .text-block .title .distinction { display: block; margin-top: 1rem; } }

.banner { margin-top: 4rem; padding-bottom: 4rem; max-width: 600px; margin-inline: auto; }
.banner img { transition: filter 0.3s linear; }
.banner a:hover img { filter: brightness(110%); }