@charset "UTF-8";
/******************************************************

common

******************************************************/
.section-title { font-family: "Raleway", sans-serif; font-size: 4.5rem; font-weight: 500; text-align: center; }
.section-title.ttl-s { font-size: 3.5rem; }
.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, .sub-title + .text { font-size: 15px; text-align: center; line-height: 2.2; }

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

/*[data-aos] { filter: blur(10px);
} */
/*.aos-animate { animation: blur 1s forwards;
} */
/*@keyframes blur { 0% { filter: blur(10px); } 50% { filter: blur(10px); } 100% { filter: blur(0px); }
} */
@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; margin-bottom: 5rem; display: grid; grid-template-columns: 43% 1fr; align-items: flex-start; gap: 0 5.88%; padding: 3rem 0; margin-top: 2rem; }
#main-visual .cg { grid-row: span 3; }
#main-visual .cg .note { position: absolute; right: 5px; bottom: 5px; color: #ffffff; text-shadow: 0 0 3px rgba(0, 0, 0, 0.4); line-height: 1; }
#main-visual .logo { text-align: center; }
#main-visual .logo img { max-width: 277px; }
#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: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; margin-top: 2rem; }
#main-visual .text .merit-list li { font-feature-settings: "palt"; background-color: #545b66; font-size: 1.4rem; line-height: 1.4; color: #fff; text-align: center; padding: 10px 5px; }
#main-visual .text .merit-list li.li-l { grid-column: 1 / 3; }
#main-visual .to-station { margin-top: 2rem; }
#main-visual .to-station .note { margin-top: 1rem; width: 50%; }

@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: 240px; } }
@media (max-width: 520px) { #main-visual .cg { width: 100%; }
  #main-visual .logo img { max-width: 200px; }
  #main-visual .text .note { text-align: left; }
  #main-visual .text .merit-list { grid-template-columns: 1fr; }
  #main-visual .text .merit-list li.li-l { grid-column: 1 / 2; } }
/******************************************************

floor plan

******************************************************/
#floor-plan { background-color: #f7f8f8; }
#floor-plan .sub-title { font-family: "Raleway", sans-serif; font-size: 3rem; font-weight: 500; text-align: center; position: relative; z-index: 2; padding: 3rem 0; }
#floor-plan .fp-img { max-width: 1000px; margin: 2rem auto 0 auto; }
#floor-plan .figure-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3.8rem; max-width: 800px; margin: 5rem auto 0; }
#floor-plan .figure-list .f-ttl { display: flex; align-items: center; justify-content: center; text-align: center; gap: 5px; position: relative; padding-bottom: 2rem; }
#floor-plan .figure-list .f-ttl .txt { font-family: "Raleway", sans-serif; font-size: 2rem; font-weight: 500; }
#floor-plan .figure-list .f-ttl::before, #floor-plan .figure-list .f-ttl::after { content: ""; flex: 0 0 20px; height: 1px; background-color: #000; }
#floor-plan .figure-list .figure { position: relative; }
#floor-plan .figure-list .name { color: #274773; font-feature-settings: "palt"; letter-spacing: 0.02em; font-size: 1.33333333rem; line-height: 1.2; margin-top: 1rem; text-align: center; }
#floor-plan .figure-list .name + .note { display: block; font-size: 1rem; text-align: center; }
#floor-plan .figure-list .legend { text-align: right; position: absolute; bottom: 0; right: 0; }
#floor-plan .figure-list .legend li { display: inline-block; margin-left: 6px; line-height: 1.2; }
#floor-plan .figure-list .legend li:first-of-type { margin-left: 0; }
#floor-plan .figure-list .legend .icon img { width: auto; height: 6px; vertical-align: baseline; }
#floor-plan .spec { max-width: 800px; margin: 4rem auto 0; display: grid; grid-template-columns: 36.66% 59.33%; gap: 3% 4%; }
#floor-plan .spec .scale { background-color: #e1dfe7; padding: 1.2rem; grid-row: span 2; }
#floor-plan .spec .scale .img:not(:first-of-type) { margin-top: 2rem; }
#floor-plan .spec .point-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; }
#floor-plan .spec .point-list .point { display: grid; place-content: center; place-items: center; font-size: 13px; font-weight: 500; text-align: center; background-color: #ffffff; padding: 0.8rem; }
#floor-plan .spec .point-list .point strong { padding-right: 1px; font-size: 130%; color: #94252a; }
#floor-plan .spec .point-list .point.point-f { grid-column: span 2; gap: 0; grid-template-columns: 20% 1fr; }
#floor-plan .spec .point-list .point.point-f .note-block { margin-top: 5px; display: block; text-align: left; }
#floor-plan .spec .point-list .point.point-f .f { position: relative; width: 100%; text-align: center; }
#floor-plan .spec .point-list .point.point-f .f::after { content: ""; display: block; width: 1px; height: 100%; background: #000; position: absolute; top: 0; right: 0; }
#floor-plan .spec .merit-list { display: flex; flex-direction: column; flex-wrap: wrap; gap: 5px; }
#floor-plan .spec .merit-list .merit { color: #ffffff; font-size: 21px; font-weight: 600; font-feature-settings: "palt"; text-align: center; background-color: #274773; padding: 1.5rem; }
#floor-plan .note { text-align: right; margin-top: 1rem; }

@media (max-width: 960px) { #floor-plan .spec { align-items: flex-start; gap: 2rem 4%; } }
@media (max-width: 520px) { #floor-plan .figure-list { grid-template-columns: 1fr; }
  #floor-plan .spec { align-items: flex-start; grid-template-columns: 1fr; }
  #floor-plan .spec .scale { text-align: center; }
  #floor-plan .spec .scale img { max-width: 240px; }
  #floor-plan .spec .point-list { margin-top: 5px; }
  #floor-plan .spec .point-list .point { font-size: 15px; }
  #floor-plan .spec .merit-list .merit { font-size: 18px; } }
/******************************************************

setup plan

******************************************************/
.hanrei-area { margin: 2rem auto 0 auto; padding: .5rem; border: solid 1px #222; max-width: 300px; text-align: center; }
.hanrei-area .hanrei { display: inline-block; margin-right: 2rem; }
.hanrei-area .hanrei:last-of-type { margin-right: 0; }
.hanrei-area .hanrei .color { display: inline-block; width: 30px; height: 1rem; margin-right: 1rem; }
.hanrei-area .hanrei.hanrei-wb .color { background: #E8E6EE; }
.hanrei-area .hanrei.hanrei-ys .color { background: #FCE8E4; }

#setup-plan { padding-bottom: 0; }
#setup-plan .section-title { font-size: 3rem; }
#setup-plan .sup-img { margin: 2rem auto 0 auto; max-width: 405px; }
#setup-plan .sup-img .name { color: #274773; font-feature-settings: "palt"; letter-spacing: 0.02em; font-size: 1.33333333rem; line-height: 1.2; margin-top: 1rem; text-align: center; }
#setup-plan .stp-title { position: relative; width: 100%; max-width: 350px; margin: 0 auto; text-align: center; }
#setup-plan .stp-title::after { content: ''; display: block; background-color: rgba(0, 0, 0, 0.5); width: 100%; height: 1px; margin-inline: auto; position: absolute; top: calc(50% - .5px); left: 0; }
#setup-plan .stp-title .txt { font-family: "Raleway", sans-serif; font-size: 3rem; font-weight: 500; text-align: center; position: relative; z-index: 2; display: inline-block; padding: 0 2rem; background: #fff; margin: auto; }
#setup-plan .wb, #setup-plan .ys { margin-top: 5rem; }
#setup-plan .wb .wb-list { max-width: 900px; margin: 2rem auto 0 auto; display: grid; gap: 2rem; grid-template-columns: repeat(2, 1fr); }
#setup-plan .ys .ys-tab { width: 90%; max-width: 800px; margin-inline: auto; margin-top: 4rem; }
#setup-plan .ys .ys-tab ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; }
#setup-plan .ys .ys-tab li { color: white; cursor: pointer; font-feature-settings: "palt"; padding: 10px; background-color: #9897b0; font-size: 2rem; text-align: center; transition: background-color .2s linear; }
#setup-plan .ys .ys-tab li:hover, #setup-plan .ys .ys-tab li.current { background-color: #274773; }
#setup-plan .ys .ys-item { max-width: 900px; margin: 5rem auto 0 auto; }
#setup-plan .ys .ys-item .ys-item-box { display: none; }
#setup-plan .ys .ys-item .ys-item-box.show { display: block; }
#setup-plan .ys .ys-item .content { display: grid; grid-template-columns: 47.24% 40%; gap: 4rem 12.47%; }
#setup-plan .ys .ys-item .spec { display: grid; place-content: center; }
#setup-plan .ys .ys-item .lead { font-size: 1.6rem; line-height: 1.8; }
#setup-plan .ys .ys-item .spec-txt { margin-top: 3rem; border: solid #274773; border-width: 1px 1px 1px 4px; }
#setup-plan .ys .ys-item .img-list .img { margin-top: 3rem; }
@media (max-width: 960px) { #setup-plan .ys .ys-tab ul { gap: 2rem; }
  #setup-plan .ys .ys-tab ul li { font-size: 1.6rem; } }
@media (max-width: 520px) { #setup-plan .ys .ys-tab ul { gap: 1rem; grid-template-columns: 1fr; }
  #setup-plan .ys .ys-item .content { grid-template-columns: 1fr; gap: 2rem; }
  #setup-plan .ys .ys-item .spec { gap: 2rem; }
  #setup-plan .ys .ys-item .img-list { grid-row: 1 / 2; }
  #setup-plan .ys .ys-item .figure { grid-row: 2 / 3; } }

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

spec

******************************************************/
#spec .overview { max-width: 900px; margin: 6rem auto 0 auto; display: grid; gap: 2rem; grid-template-columns: repeat(2, 1fr); }
#spec .overview .img-box-l { grid-column: span 2; }
@media (max-width: 520px) { #spec .overview { grid-template-columns: 1fr; }
  #spec .overview .img-box-l { grid-column: span 1; } }

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

bcp

******************************************************/
#bcp { background-color: #f7f8f8; }
#bcp .section-title { font-size: 3rem; }
#bcp .item-list { margin-top: 4rem; display: grid; /*grid-template-columns: repeat(3, 1fr);*/ grid-template-columns: repeat(2, 1fr); gap: 3rem; }
#bcp .item-list .title { background-color: #274773; color: #ffffff; text-align: center; font-size: 20px; font-feature-settings: "palt"; letter-spacing: 0.02em; padding: 2rem 0.5rem; line-height: 1.3; }
#bcp .item-list .text { font-size: 15px; line-height: 1.8; margin-top: 1rem; }

@media (max-width: 960px) { #bcp .item-list { gap: 2.5rem; } }
@media (max-width: 520px) { #bcp .item-list { grid-template-columns: repeat(2, 1fr); gap: 3.5rem 2.5rem; }
  #bcp .item-list .title { font-size: 15px; padding: 2rem .2rem; }
  #bcp .item-list .text { font-size: 12px; } }
/******************************************************

common space

******************************************************/
#common-space { padding-bottom: 10rem; }
#common-space .section-inner { max-width: 100%; }
#common-space .facility { display: grid; margin-top: 12rem; margin-right: auto; margin-left: auto; position: relative; }
#common-space .facility:first-of-type { margin-top: 8rem; }
#common-space .facility .name { font-family: "Raleway", sans-serif; font-size: 3rem; font-weight: 600; }
#common-space .facility .name + .img { margin-top: 1rem; }
#common-space .facility .title { font-size: 2.5rem; line-height: 1.4; font-feature-settings: "palt"; letter-spacing: 0.02em; margin-top: 1.5rem; }
#common-space .facility .text { font-size: 15px; line-height: 2; margin-top: 1.5rem; }
#common-space .facility01 { max-width: 1800px; gap: 5rem 8rem; grid-template-columns: repeat(2, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "cpy fig" "img fig"; }
#common-space .facility01 .copy { grid-area: cpy; }
#common-space .facility01 .copy .text { margin: 0 0 0 auto; display: block; max-width: 500px; }
#common-space .facility01 .image { grid-area: img; }
#common-space .facility01 .image .name { text-align: right; }
#common-space .facility01 .figure { grid-area: fig; }
#common-space .facility01 .figure .img { max-width: 400px; }
#common-space .facility02 { max-width: 1800px; gap: 5rem; grid-template-columns: repeat(2, 1fr); }
#common-space .facility02 .img-box .name { text-align: right; }
#common-space .facility02 .img-box .image { margin-top: 1rem; }
#common-space .facility03 { max-width: 1800px; gap: 3rem 5rem; grid-template-columns: 40% 1fr; grid-template-rows: auto 1fr; grid-template-areas: "cpy fig" "img fig"; }
#common-space .facility03 .copy { grid-area: cpy; }
#common-space .facility03 .copy .txt-box { display: block; max-width: 400px; margin: 0 0 0 auto; }
#common-space .facility03 .image { grid-area: img; }
#common-space .facility03 .image .img { max-width: 800px; margin: 0 0 0 auto; }
#common-space .facility03 .figure { grid-area: fig; }
@media (max-width: 960px) { #common-space .facility01 { gap: 2rem; }
  #common-space .facility02 { gap: 2rem; }
  #common-space .facility03 { gap: 2rem; grid-template-columns: repeat(2, 1fr); grid-template-areas: "cpy cpy" "img fig"; }
  #common-space .facility03 .copy .txt-box { max-width: 100%; margin: auto; }
  #common-space .facility03 .image .img { max-width: 100%; margin: auto; } }
@media (max-width: 520px) { #common-space .facility01 { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; grid-template-areas: "cpy" "img" "fig"; }
  #common-space .facility01 .copy .text { margin: auto; }
  #common-space .facility01 .image .name { text-align: left; }
  #common-space .facility01 .figure .img { margin: auto; }
  #common-space .facility02 { grid-template-columns: 1fr; }
  #common-space .facility02 .img-box .name { text-align: left; }
  #common-space .facility03 { grid-template-columns: 1fr; grid-template-areas: "cpy" "img" "fig"; } }

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

access

******************************************************/
#access { background-color: #f7f8f8; }
#access .section-inner { max-width: 822px; }
#access .route-map { margin-top: 5rem; }
#access .to-station { max-width: 720px; margin-inline: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; margin-top: 6rem; }
#access .station { text-align: center; }
#access .station .img .note { position: absolute; right: 5px; bottom: 5px; color: #fff; text-shadow: 0 0 3px rgba(0, 0, 0, 0.4); line-height: 1; }
#access .station .line { font-size: 11px; font-feature-settings: "palt"; letter-spacing: 0.02em; border-bottom: 1px solid rgba(0, 0, 0, 0.5); padding: 10px 0; }
#access .station .minutes { margin-top: 10px; }
#access .airport { max-width: 720px; margin-top: 5rem; margin-inline: auto; }
#access .airport + .note { max-width: 720px; margin-top: 3rem; margin-inline: auto; }

@media (max-width: 960px) { #access .to-station { grid-template-columns: repeat(2, 1fr); }
  #access .station .minutes img { height: 20px; width: auto; } }
@media (max-width: 520px) { #access { /*.route-map { img { height: 400px; width: auto; }
} */ }
  #access .to-station { grid-template-columns: repeat(2, 1fr); gap: 3rem 2rem; } }
/******************************************************

location

******************************************************/
#location .map-image { margin: 6rem auto 0 auto; max-width: 790px; }
#location .walk-to-station { max-width: 681px; margin-inline: auto; margin-top: 6rem; display: grid; grid-template-columns: repeat(2, 1fr); }
#location .walk-to-station .img { position: relative; text-align: center; display: grid; place-content: center; }
#location .walk-to-station .img img { display: block; max-width: 144px; }
#location .walk-to-station .img + .note { margin-top: 1rem; line-height: 1.4; }
#location .walk-to-station .img::before { display: block; content: ''; width: 1px; height: 100%; background-color: #000000; position: absolute; left: 0; top: 0; }
#location .walk-to-station .img:last-of-type::after { display: block; content: ''; width: 1px; height: 100%; background-color: #000000; position: absolute; right: 0; top: 0; }
#location .note { max-width: 681px; margin-inline: auto; margin-top: 4rem; }

@media (max-width: 960px) { #location .walk-to-station .img { padding: 0 1rem; } }
@media (max-width: 520px) { #location .walk-to-station { grid-template-columns: repeat(2, 1fr); row-gap: 4rem; } }
/******************************************************

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 .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; } }
/******************************************************

works

******************************************************/
#works .works-section { background-color: #565c68; color: #ffffff; padding: 8rem 0; }
#works .works-section .section-inner { max-width: 1140px; width: 90%; margin-inline: auto; }
#works .section-title { font-family: 'Noto Sans JP', sans-serif; font-weight: normal; -webkit-font-smoothing: antialiased; font-size: 20px; font-weight: bold; }
#works .section-title::after { display: none; }
#works .work-list { display: grid; grid-template-columns: repeat(5, 1fr); margin: 4rem auto 0; }
#works .work { padding: 2rem 2rem 0; border-right: thin solid #fff; position: relative; display: grid; grid-template-rows: subgrid; grid-row: span 4; /*   &:nth-child(2n+2){ &::after { display: block; content: ''; width: 1px; height: 100%; background-color: #fff; position: absolute; right: 0; top: 0; } } */ /*&::before { display: block; content: ''; width: 1px; height: 100%; background-color: #fff; position: absolute; left: 0; top: 0;
} */ /* .img { .note { position: absolute; right: 5px; bottom: 5px; text-shadow: 0 0 2px #000000; } } */ }
#works .work.coming-soon { display: block; }
#works .work:first-of-type { border-left: thin solid #fff; }
#works .work .image { padding: 0 1rem; }
#works .work .logo { margin-inline: auto; margin-top: 3rem; text-align: center; }
#works .work .logo img { width: auto; max-height: 44px; }
#works .work .data { font-size: 11px; font-weight: bold; line-height: 1.4; margin-top: 3rem;    /*   tr { display: grid;
//        grid-template-columns: 5em 1fr; grid-template-columns: 4.25em 1fr; gap: 1rem; } */ }
#works .work .data th, #works .work .data td { vertical-align: top; }
#works .work .data th { width: 100%; position: relative; padding: 4px 4px 4px 1.6rem; }
#works .work .data th::before { content: ''; display: inline-block; position: absolute; top: calc(0.2rem + 4px); left: 0; width: 0.91666667rem; height: 0.91666667rem; background-color: #fff; }
#works .work .data td { width: 100%; position: relative; /*&::before { content: '：'; display: inline-block; position: absolute; top: 0; left: -1rem; width: 1rem; height: auto; white-space: nowrap; text-align: center;
} */ }
#works .work .detail { width: max-content; font-size: 12px; border: 1px solid #ffffff; margin-top: 1.5rem; margin-inline: auto; }
#works .work .detail a { display: inline-block; color: #ffffff; padding: 5px 10px; font-weight: bold; }
#works .work .detail a:hover { background-color: #ffffff; color: #565c68; }
#works .coming-soon { padding-bottom: 3rem; }
#works .coming-soon .text { display: grid; place-content: center; height: 100%; background-color: #b2b6bc; letter-spacing: 0.02em; color: #000000; font-size: 1.8rem; }
#works .works-section + .note { max-width: 1140px; width: 90%; margin-inline: auto; margin-top: 6rem; }

@media (max-width: 1200px) { #works .work .logo img { max-height: 32px; } }
@media (max-width: 1024px) { #works .work .logo img { max-height: 28px; }
  #works .work .data { font-size: 10px; /*tr{ gap: 0.75rem;
} */ } }
@media (max-width: 960px) { #works .work-list { grid-template-columns: 1fr; }
  #works .work { border-bottom: 1px solid #ffffff; border-right: none; padding: 5rem 0; grid-template-rows: inherit; grid-row: inherit; grid-template-columns: 200px 1fr; grid-template-rows: 1fr repeat(3, max-content); column-gap: 4rem; align-items: flex-start; /*  &:nth-child(2n+2){ &::after { display: none; } } */ }
  #works .work::before { display: none; }
  #works .work:first-of-type { padding-top: 0; border-left: none; }
  #works .work:last-of-type { padding-bottom: 0; border-bottom: 0; }
  #works .work .image { grid-row: span 4; }
  #works .work .logo { grid-column-start: 2; grid-row-start: 2; margin-top: 0; }
  #works .work .logo img { max-height: 44px; }
  #works .work .data { grid-column-start: 2; grid-row-start: 3; font-size: 14px; /*tr{ grid-template-columns: 7em 1fr; gap: 14px 8px;
} */ /*td{ padding-left: 4px;
} */ }
  #works .work .data th::before { top: calc(0.6rem + 4px); }
  #works .work .detail { grid-column-start: 2; grid-row-start: 4; margin-inline: inherit; font-size: 14px; margin-top: 3rem; }
  #works .coming-soon { height: 300px; } }
@media (max-width: 520px) { #works .works-section { padding: 6rem 0; }
  #works .work-list { margin-top: 6rem; }
  #works .work { grid-template-columns: 150px 1fr; grid-template-rows: repeat(3, max-content); column-gap: 2rem; }
  #works .work .img { grid-row: span 3; }
  #works .work .logo, #works .work .data, #works .work .detail { grid-column-start: inherit; grid-row-start: inherit; }
  #works .work .data { font-size: 12px; /*tr{ grid-template-columns: 4em 1fr;
} */ }
  #works .work .detail { font-size: 12px; }
  #works .coming-soon { height: 220px; } }