/******************************************************

common

******************************************************/
.section-title { font-family: "Raleway", serif; font-size: 4.5rem; font-weight: 500; text-align: center; }
.section-title::after { display: block; background-color: rgba(0, 0, 0, 0.5); content: ''; width: 86px; height: 1px; margin-inline: auto; margin-top: 2rem; margin-bottom: 2rem; }

.section { padding: 8rem 0; }

.section-title + .text { font-size: 15px; text-align: center; line-height: 2.2; }

.section-inner { width: 90%; max-width: 1100px; margin-inline: auto; }

@media (max-width: 960px) { .section-title::after { width: 76px; } }
@media (max-width: 520px) { .section-title::after { width: 66px; } }
/******************************************************

location list

******************************************************/
.location-list { max-width: 1100px; width: 90%; margin-inline: auto; margin-top: 2rem; font-size: 12px; }
.location-list ul { display: flex; }
.location-list ul li:not(:last-of-type) a { text-decoration: underline; }
.location-list ul li:not(:last-of-type)::after { content: "\03e"; margin: 0 5px; }

/******************************************************

main visual

******************************************************/
.main-visual { border: 2px solid #000000; border-width: 2px 0; max-width: 1100px; width: 90%; margin-inline: auto; display: grid; grid-template-columns: 36.88% 57.22%; align-items: flex-start; gap: 0 5.88%; padding: 3rem 0; margin-top: 2rem; }
.main-visual .cg { grid-row: span 2; }
.main-visual .cg .note { position: absolute; right: 4px; bottom: 4px; color: #fff; text-shadow: 0 0 2px rgba(0, 0, 0, 0.7), 0 0 2px rgba(0, 0, 0, 0.7), 0 0 2px rgba(0, 0, 0, 0.7), 0 0 2px rgba(0, 0, 0, 0.7), 0 0 2px rgba(0, 0, 0, 0.7); }
.main-visual .logo { text-align: center; align-self: flex-end; }
.main-visual .logo img { max-width: 340px; }
.main-visual .text { margin-top: 3rem; }
.main-visual .text .description { font-size: 15px; line-height: 1.6; text-align: center; }
.main-visual .text .merit-list { display: flex; flex-direction: column; flex-wrap: wrap; gap: 0.5rem; margin-top: 2rem; }
.main-visual .text .merit-list li { font-feature-settings: "palt"; background-color: #d4bd9f; font-size: 1.8rem; line-height: 1.4; color: #fff; text-align: center; padding: 10px 5px; }
.main-visual .to-station { margin-top: 2rem; }

@media (max-width: 960px) { .main-visual { grid-template-columns: 1fr; }
  .main-visual .cg { width: 80%; margin-inline: auto; grid-row: span 1; }
  .main-visual .logo { margin-top: 5rem; }
  .main-visual .logo img { max-width: 280px; } }
@media (max-width: 520px) { .main-visual .cg { width: 100%; }
  .main-visual .logo img { max-width: 240px; }
  .main-visual .text .note { text-align: left; } }
/******************************************************

about ensuite

******************************************************/
#about-ensuite { background-color: #eae4d1; color: #000000; padding: 7rem 0 7.5rem; margin-top: 6rem; }
#about-ensuite .section-title + .text { font-size: 16px; }
#about-ensuite .img-list { max-width: 738px; margin-inline: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem 3.25203252%; margin-top: 3rem; }
#about-ensuite .img-list .note { position: absolute; right: 4px; bottom: 4px; color: #fff; text-shadow: 0 0 2px rgba(0, 0, 0, 0.7), 0 0 2px rgba(0, 0, 0, 0.7), 0 0 2px rgba(0, 0, 0, 0.7), 0 0 2px rgba(0, 0, 0, 0.7), 0 0 2px rgba(0, 0, 0, 0.7); }

@media (max-width: 520px) { #about-ensuite { padding: 8rem 0; }
  #about-ensuite .section-title + .text { font-size: 14px; } }
/******************************************************

plan

******************************************************/
#plan { padding-bottom: 0; }
#plan .point-list { display: grid; grid-template-columns: 1fr repeat(2, 0.4fr); gap: 5px; margin-top: 4rem; }
#plan .point-list .point { background-color: #f2f1f1; display: grid; place-content: center; text-align: center; font-size: 17px; font-weight: 500; padding: 1rem 10px; }
#plan .point-list .point:first-of-type .note { width: 100%; margin-top: 4px; text-align: right; }
#plan .point-list .point strong { font-size: 150%; color: #94252a; }
#plan .plan-list { margin-top: 6rem; }
#plan .plan-list .tab { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 1.5rem; cursor: pointer; }
#plan .plan-list .tab li { border-radius: 2px; font-size: 1.8rem; color: #715941; border: 1px solid #715941; padding: 1rem; text-align: center; transition: color 0.2s linear, background-color 0.2s linear; }
#plan .plan-list .tab li:hover, #plan .plan-list .tab li.current { color: #ffffff; background-color: #715941; }
#plan .plan-list .plan { grid-template-columns: 0.46fr 1fr; gap: 4rem; display: none; margin-top: 5rem; }
#plan .plan-list .plan.show { display: grid block; }
#plan .plan-list .plan .figure { max-width: 850px; grid-column: span 2; margin-inline: auto; }
#plan .plan-list .plan .figure .note { position: absolute; left: 0; bottom: 2rem; }
#plan .plan-list .plan .gallery-list { display: flex; flex-direction: column; row-gap: 1rem; }
#plan .plan-list .plan .gallery-list .note { color: #fff; text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.8); position: absolute; right: 4px; bottom: 4px; }
#plan .plan-list .plan .gallery-list .note.b { color: #000; text-shadow: none; }

@media (max-width: 960px) { #plan .point-list { grid-template-columns: repeat(2, 1fr); }
  #plan .point-list .point:first-of-type { grid-column: span 2; }
  #plan .plan-list .plan { gap: 3rem; } }
@media (max-width: 520px) { #plan .plan-list .tab { column-gap: 5px; }
  #plan .plan-list .plan { grid-template-columns: 1fr; }
  #plan .plan-list .plan .figure { grid-column: span 1; }
  #plan .plan-list .plan .figure .note { bottom: 0; }
  #plan .plan-list .plan .spec { max-width: 240px; margin-inline: auto; } }
/******************************************************

common space

******************************************************/
#common-space { background-color: #f2f1f1; margin-top: 8rem; }
#common-space .floor-map { max-width: 950px; margin-inline: auto; margin-top: 4rem; }
#common-space .floor-map .note { position: absolute; left: 0; bottom: 0; }
#common-space .facility { display: grid; column-gap: 4rem; align-items: flex-start; }
#common-space .facility .copy .name { font-family: "Raleway", serif; color: #715941; font-size: 3rem; font-weight: 600; }
#common-space .facility .copy .title { font-size: 2.5rem; line-height: 1.4; font-feature-settings: "palt"; letter-spacing: 0.02em; margin-top: 1.5rem; }
#common-space .facility .copy .text { font-size: 15px; line-height: 2; margin-top: 1.5rem; }
#common-space .facility .img .note { position: absolute; right: 4px; bottom: 4px; color: #fff; text-shadow: 0 0 2px rgba(0, 0, 0, 0.7), 0 0 2px rgba(0, 0, 0, 0.7), 0 0 2px rgba(0, 0, 0, 0.7), 0 0 2px rgba(0, 0, 0, 0.7), 0 0 2px rgba(0, 0, 0, 0.7); }
#common-space .facility01 { margin-top: 6rem; grid-template-columns: 1fr 0.42fr; }
#common-space .facility02 { margin-top: 8rem; grid-template-columns: 0.59fr 1fr; }
#common-space .facility02 .img { order: 2; }
#common-space .facility02 .copy { order: 1; }
#common-space .facility03 { margin-top: 8rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 3rem 1rem; }
#common-space .facility03 .name { color: #715941; text-align: center; font-size: 19px; font-weight: 600; margin-top: 1.5rem; font-feature-settings: "palt"; letter-spacing: 0.02em; }

@media (max-width: 520px) { #common-space .facility01, #common-space .facility02, #common-space .facility03 { grid-template-columns: 1fr; }
  #common-space .facility01 .copy, #common-space .facility02 .copy, #common-space .facility03 .copy { margin-top: 3rem; }
  #common-space .facility02 .img { order: 1; }
  #common-space .facility02 .copy { order: 2; } }
/******************************************************

spec

******************************************************/
#spec .item-list { margin-top: 4rem; display: grid; /*grid-template-columns: repeat(2, 1fr) 0.48fr;*/ grid-template-columns: 300px 1fr; gap: 3rem 1rem; }
#spec .item-list .name { color: #715941; text-align: center; font-size: 19px; font-weight: 600; margin-top: 1.5rem; font-feature-settings: "palt"; letter-spacing: 0.02em; }
#spec .item-list.item-list02 { display: flex; justify-content: space-between; gap: 2rem 4%; }
#spec .item-list.item-list02 .item { width: 48%; padding-left: 1rem; text-align: left; line-height: 1.4; font-feature-settings: "palt"; letter-spacing: 0.02em; border-left: 5px solid #715941; }
#spec .item-list.item-list02 .item .name { margin: 0 auto 1rem; text-align: left; }
#spec .item-list.item-list02 .item .text { font-size: 15px; }
#spec .item-list.item-list02 .item02 { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; }
#spec .item-list.item-list02 .item02 .img { display: flex; justify-content: center; max-width: 80px; padding: 1rem; border: 1px solid #715941; }
#spec .security { background-color: #fdf5ea; padding: 2.5rem; display: grid; /*grid-template-columns: 250px 1fr;*/ gap: 2.5rem; /*margin-top: 6rem;*/ }
#spec .security .copy .title { font-family: "Raleway", serif; color: #715941; font-size: 2.3rem; font-weight: 500; }
#spec .security .copy .text { font-size: 15px; line-height: 1.6; margin-top: 1rem; }
#spec .point-list { display: grid; grid-template-areas: "point01 point01" "point02 point03" "point04 point05"; grid-template-columns: repeat(2, 1fr); gap: 5px; margin-top: 4rem; }
#spec .point-list .point { background-color: #fdf5ea; display: grid; place-content: center; text-align: center; font-size: 17px; font-weight: 500; padding: 1rem 10px; }
#spec .point-list .point.point01 { grid-area: point01; }
#spec .point-list .point.point02 { grid-area: point02; }
#spec .point-list .point.point03 { grid-area: point03; }
#spec .point-list .point.point04 { grid-area: point04; }
#spec .point-list .point.point05 { grid-area: point05; }

@media (max-width: 960px) { #spec .item-list { grid-template-columns: 1fr; }
  #spec .item-list .item { max-width: 416px; margin: 0 auto; }
  #spec .item-list.item-list02 { flex-direction: column; }
  #spec .item-list.item-list02 .item { width: 100%; max-width: inherit; }
  #spec .item-list.item-list02 .item02 .img { width: 55%; max-width: 108px; }
  #spec .security { grid-template-columns: 1fr; } }
@media (max-width: 520px) { #spec .item-list { /*grid-template-columns: 1fr 0.52fr;*/ /*.item:first-of-type { grid-column: span 2;
}*/ }
  #spec .item-list .item { width: 100%; max-width: 100%; }
  #spec .item-list .name { font-size: 16px; }
  #spec .security { grid-template-columns: 1fr; }
  #spec .security .copy .title { text-align: center; }
  #spec .security .copy .text { margin-top: 2rem; }
  #spec .security .flow { max-width: 180px; margin-inline: auto; }
  #spec .point-list { grid-template-columns: 1fr; grid-template-areas: "point01" "point02" "point03" "point04" "point05"; } }
/******************************************************

access

******************************************************/
#access { background-color: #f2f1f1; }
#access .route-map { margin-top: 5rem; max-width: 650px; margin-inline: auto; }
#access .route-map .note { text-align: left; }
#access .to-station { max-width: 900px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.5rem; margin-top: 4rem; margin-inline: auto; }
#access .to-station > .note { grid-column: span 4; }
#access .station { text-align: center; }
#access .station .img .note { position: absolute; right: 4px; bottom: 4px; color: #fff; text-shadow: 0 0 2px rgba(0, 0, 0, 0.7), 0 0 2px rgba(0, 0, 0, 0.7), 0 0 2px rgba(0, 0, 0, 0.7), 0 0 2px rgba(0, 0, 0, 0.7), 0 0 2px rgba(0, 0, 0, 0.7); }
#access .station .line { font-size: 11px; border-bottom: 1px solid rgba(0, 0, 0, 0.5); padding: 10px 0; }
#access .station .minutes { margin-top: 10px; }
#access .station .minutes img { max-width: 213px; width: 100%; height: auto; }
#access .airport { max-width: 650px; margin-top: 6rem; margin-inline: auto; }
#access .airport .title { font-family: "Raleway", serif; color: #715941; font-size: 2rem; font-weight: 500; }
#access .airport .img { margin-top: 1rem; }
#access .airport .img .note { position: absolute; right: 4px; bottom: 4px; color: #000; }
#access .airport > .note { margin-top: 2rem; }

@media (max-width: 960px) { #access .to-station { grid-template-columns: repeat(2, 1fr); max-width: 650px; }
  #access .to-station > .note { grid-column: span 2; } }
@media (max-width: 520px) { #access .to-station { gap: 3rem 2rem; }
  #access .station .minutes img { height: 20px; width: auto; }
  #access .airport .img .note { position: static; } }
/******************************************************

location

******************************************************/
#location .map-image, #location .walk-to-station, #location .note { max-width: 720px; margin-inline: auto; }
#location .map-image { margin-top: 6rem; }
#location .walk-to-station { margin-top: 2rem; }
#location .note { margin-top: 6rem; }

@media (max-width: 520px) { #location .walk-to-station { max-width: 375px; } }
/******************************************************

outline

******************************************************/
#outline { padding-top: 0; }
#outline .section-inner { max-width: 720px; }
#outline .section-header { position: relative; }
#outline .section-header .bg img { object-fit: cover; height: 280px; width: 100%; }
#outline .section-header .bg .note { position: absolute; right: 4px; bottom: 4px; color: #fff; text-shadow: 0 0 2px rgba(0, 0, 0, 0.7), 0 0 2px rgba(0, 0, 0, 0.7), 0 0 2px rgba(0, 0, 0, 0.7), 0 0 2px rgba(0, 0, 0, 0.7), 0 0 2px rgba(0, 0, 0, 0.7); }
#outline .section-header .section-title { position: absolute; left: 50%; top: 50%; translate: -50% -50%; color: #fff; }
#outline .section-header .section-title::after { display: none; }
#outline .data { font-size: 14px; width: 100%; margin-top: 10rem; }
#outline .data caption { margin-bottom: 2rem; }
#outline .data caption::before { content: '\025a0'; }
#outline .data tr { border-bottom: 1px solid rgba(0, 0, 0, 0.5); display: grid; grid-template-columns: 18rem 1fr; }
#outline .data tr:first-of-type { border-top: 1px solid rgba(0, 0, 0, 0.5); }
#outline .data th { font-weight: normal; padding: 1.5rem 0; line-height: 1.6; }
#outline .data td { padding: 1.5rem 0; line-height: 1.6; }

@media (max-width: 960px) { #outline .section-header .bg img { height: 240px; } }
@media (max-width: 520px) { #outline .section-header .bg img { height: 180px; }
  #outline .data { margin-top: 6rem; } }