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

common

******************************************************/
.section-title { font-family: 'Noto Sans JP', sans-serif; font-weight: normal; -webkit-font-smoothing: antialiased; font-size: 4rem; font-weight: 500; text-align: center; }
.section-title .en { font-family: "Raleway", serif; font-size: 4.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 { font-size: 18px; text-align: center; line-height: 2.2; font-weight: bold; }

.text2 { font-size: 14px; text-align: center; line-height: 2.2; }

.section-title + .text2, .text + .text2 { margin-top: 1rem; }

.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; margin-bottom: 5rem; 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; align-self: flex-end; }
.main-visual .cg .note { position: absolute; right: 4px; bottom: 4px; }
.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: #d6e5d3; font-size: 1.8rem; line-height: 1.4; color: #000; 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; } }
/******************************************************

video

******************************************************/
#video { padding-top: 5rem; }
#video .section-inner { border: 2px solid #000000; padding: 5rem 5rem 2rem; display: grid; grid-template-columns: 39.44% 56.52%; gap: 3rem 4.02%; }
#video .img { order: 2; grid-row: span 3; }
#video .title { order: 1; font-size: 2.7rem; font-feature-settings: "palt"; letter-spacing: 0.02em; }
#video .text { order: 3; font-size: 1.9rem; line-height: 1.6; letter-spacing: 0.02em; }
#video .watch { order: 4; font-size: 1.5rem; }
#video .watch a { padding: 1rem 1.5rem; display: inline-block; background-color: #0d6541; color: #ffffff; }
#video .watch a:hover { filter: brightness(120%); }
#video .note { grid-column: span 2; order: 5; border-top: 1px solid #000000; padding-top: 1rem; }
#video .wip { max-width: 600px; margin: auto; }
#video .wip .img::before { content: ""; display: block; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.56); position: absolute; top: 0; left: 0; mix-blend-mode: multiply; }
#video .wip .img .wip-box { background-color: rgba(0, 0, 0, 0.8); width: 100%; padding: 1rem 2rem; text-align: center; line-height: 1.2; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; }
#video .wip .img .wip-box p { font-size: 1re; text-align: center; color: #fff; line-height: 1.36; letter-spacing: 0.05em; mix-blend-mode: screen; }
#video .wip .img .wip-box p .txt-l { font-family: "Raleway", serif; font-size: 160%; }
@media (max-width: 960px) { #video .section-inner { grid-template-columns: 1fr; padding: 3rem 3rem 2rem; }
  #video .img { order: 1; grid-row: span 1; margin-inline: -3rem; margin-block-start: -3rem; }
  #video .title { order: 2; text-align: center; }
  #video .text { order: 3; text-align: center; }
  #video .watch { text-align: center; }
  #video .watch a { padding: 1rem 3rem; }
  #video .note { grid-column: span 1; } }

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

concept

******************************************************/
#concept { background-color: #d6e5d3; }
#concept .image { max-width: 800px; margin: 4rem auto 0; }
#concept .image > .note { margin-top: 2rem; }

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

design

******************************************************/
#design .fig { margin-top: 4rem; margin-bottom: 2rem; display: grid; grid-template-columns: calc((328/1100)*100%) calc((732/1100)*100%); gap: 16px calc((40/1100)*100%); }
#design .fig .block img { width: 100%; height: auto; }
#design .fig .block1 { background-color: #b6cab3; text-align: center; display: flex; justify-content: center; align-items: center; }
#design .fig .block2 { grid-row: span 2; }
#design .fig .block3 { align-self: flex-end; text-align: center; }

@media (max-width: 520px) { #design .fig { grid-template-columns: 1fr; }
  #design .fig .block1 img { width: 80%; } }
/******************************************************

plan

******************************************************/
#plan { background-color: #d6e5d3; }
#plan .plan-sec { margin-top: 6rem; }
#plan .plan-sec .section-title .en { font-size: 3.5rem; }
#plan .plan-sec .note { margin-top: 2rem; }
#plan .plan-sec .note.intro { text-align: center; }
#plan .floor-plan-list { padding-top: 4rem; }
#plan .floor-plan-list > ul { max-width: 984px; margin-inline: auto; display: flex; flex-flow: row wrap; justify-content: space-between; }
#plan .floor-plan-list > ul > li { width: calc((440/984)*100%); }
#plan .plan-list { max-width: 1040px; margin-top: 4rem; margin-inline: auto; }
#plan .plan-list .tab { max-width: 800px; margin-inline: auto; display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 1.5rem; justify-content: center; cursor: pointer; }
#plan .plan-list .tab li { font-family: "Raleway", serif; border-radius: 2px; font-size: 1.8rem; color: #0d6541; border: 1px solid #0d6541; 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: #0d6541; }
#plan .plan-list .plan { display: none; margin-top: 5rem; }
#plan .plan-list .plan.show { display: block; }
#plan .plan-list .plan .plan-inner { display: grid; grid-template-columns: calc((400/1040)*100%) calc((560/1040)*100%); gap: 24px calc((80/1040)*100%); place-content: center; place-items: center; }
#plan .plan-list .plan .plan-inner .images { display: flex; flex-direction: row wrap; justify-content: space-between; }
#plan .plan-list .plan .plan-inner .images > .image { width: 49.5%; }
#plan .plan-list .plan .plan-inner .img1 { order: 1; }
#plan .plan-list .plan .plan-inner .fig { order: 2; grid-row: span 3; align-self: center; }
#plan .plan-list .plan .plan-inner .fig .cap.out { margin-top: 8px; }
#plan .plan-list .plan .plan-inner .fig .icon { display: inline-block; width: 26px; aspect-ratio: 26/10; background-color: #fce4d6; border: thin solid #9dc195; margin-right: 4px; line-height: 1; vertical-align: middle; }
#plan .plan-list .plan .plan-inner .spec { order: 3; }
#plan .plan-list .plan .plan-inner .spec .plan-name { font-size: clamp(20px, 24px, 32px); line-height: 1.44; margin-bottom: 8px; color: #0d6541; }
#plan .plan-list .plan .plan-inner .spec .plan-name .en { font-family: "Raleway", serif; font-weight: 600; }
#plan .plan-list .plan .plan-inner .spec .text { font-size: clamp(14px, 16px, 20px); }
#plan .plan-list .plan .plan-inner .img2 { order: 4; }

@media (max-width: 520px) { #plan .floor-plan-list > ul > li { width: 80%; margin: 0 auto 40px; }
  #plan .floor-plan-list > ul > li:last-of-type { margin-bottom: 0; }
  #plan .plan-list .tab { column-gap: 5px; }
  #plan .plan-list .plan .plan-inner { display: block; }
  #plan .plan-list .plan .plan-inner .fig { width: 80%; margin: 32px auto; }
  #plan .plan-list .plan .plan-inner .spec { margin-top: 2rem; } }
/******************************************************

entrance hall

******************************************************/
#entrance-hall .images { margin-top: 4rem; display: flex; flex-flow: row wrap; justify-content: space-between; }
#entrance-hall .images > .image { width: 49.5%; }
@media (max-width: 520px) { #entrance-hall .images { grid-row-gap: 16px; }
  #entrance-hall .images > .image { width: 100%; } }

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

common space

******************************************************/
#common-space .common-sp-sec { margin-top: 6rem; }
#common-space .facility { display: grid; column-gap: calc((40/1100)*100%); align-items: flex-start; }
#common-space .facility .name { color: #0d6541; font-size: clamp(24px, 2.5rem, 32px); font-weight: 600; margin-bottom: 1rem; }
#common-space .facility .name .en { font-family: "Raleway", serif; }
#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 .facility .text2 { text-align: left; }
#common-space .facility .text2 .note { margin-top: 1rem; }
#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 .lounge1 { grid-template-columns: auto calc((684/1100)*100%); }
#common-space .lounge1 .name { order: 1; }
#common-space .lounge1 .text2 { order: 3; }
#common-space .lounge1 .image { grid-row: span 3; order: 2; }
#common-space .lounge2 { position: relative; grid-template-columns: calc((536/1100)*100%) auto; align-items: flex-end; padding-top: 1rem; }
#common-space .lounge2 .name { order: 1; }
#common-space .lounge2 .text2 { order: 3; grid-column-start: 1; hanging-punctuation: allow-end; }
#common-space .lounge2 .fig { order: 2; grid-row: span 3; width: calc((482/1100)*100%); position: absolute; right: 0; top: 0; }
#common-space .lounge2 .fig .note { text-align: right; margin-top: 1rem; }
#common-space .lounge2 .image { order: 4; grid-column-start: 1; margin-top: 4rem; }
#common-space .lounge3 { margin-top: 3.5rem; grid-template-columns: calc((536/1100)*100%) calc((536/1100)*100%); }

@media (max-width: 520px) { #common-space .facitliy .text2 .aw { display: inline; }
  #common-space .lounge1, #common-space .lounge2, #common-space .lounge3 { grid-template-columns: 1fr; }
  #common-space .lounge1 .copy, #common-space .lounge2 .copy, #common-space .lounge3 .copy { margin-top: 3rem; }
  #common-space .lounge1 .name { order: 1; text-align: left; }
  #common-space .lounge1 .text2 { order: 2; }
  #common-space .lounge1 .image { order: 3; margin-top: 16px; }
  #common-space .lounge2 .name, #common-space .lounge2 .text2 { margin-right: 0; }
  #common-space .lounge2 .name { order: 1; }
  #common-space .lounge2 .text2 { order: 2; }
  #common-space .lounge2 .fig { order: 3; position: static; width: 88%; margin: 24px 0 0 auto; }
  #common-space .lounge3 { margin-top: 0; }
  #common-space .lounge3 .image { margin-top: 16px; width: 100% !important; } }
/******************************************************

spec

******************************************************/
#spec { background-color: #efefef; }
#spec .item-list > ul { margin-top: 4rem; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
#spec .item-list > ul > li { background-color: #efefef; mix-blend-mode: multiply; display: flex; flex-direction: column; justify-content: center; padding: 1rem 1.5rem 1.25rem; }
#spec .item-list > ul > li.cell2 { grid-column: span 2; }
#spec .item-list > ul > li.cell5 { grid-column: span 5; }
#spec .item-list .name, #spec .item-list .text, #spec .item-list .note { color: #0d6541; text-align: center; line-height: 1.2; }
#spec .item-list .text, #spec .item-list .note { margin-top: 1rem; }
#spec .item-list .name { font-size: clamp(16px, 1.25rem, 1.5rem); line-height: 1.28; }
#spec .item-list .text { font-size: clamp(14px, 1rem, 1.25rem); }
#spec .item-list .security { display: flex; flex-flow: row wrap; justify-content: space-between; }
#spec .item-list .security .name, #spec .item-list .security .text, #spec .item-list .security .note { text-align: left; }
#spec .item-list .security .left-wrap { width: 24%; padding-right: 0.75rem; }
#spec .item-list .security .right-wrap { width: 76%; padding-left: 0.75rem; align-self: center; }
#spec .item-list .security .right-wrap .fig { margin-top: 1rem; color: #0d6541; }
#spec .item-list .security .right-wrap .fig img { width: 100%; height: auto; }

@media (max-width: 960px) { #spec .item-list > ul { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  #spec .item-list > ul > li.cell2, #spec .item-list > ul > li.cell5 { grid-column: span 2; }
  #spec .item-list > ul > li:nth-last-of-type(2) { grid-column: 2; grid-row: 4; }
  #spec .item-list .security { display: block; }
  #spec .item-list .security .left-wrap, #spec .item-list .security .right-wrap { width: 100%; padding-left: 0; padding-right: 0; }
  #spec .item-list .security .right-wrap { padding-top: 1rem; } }
@media (max-width: 520px) { #spec .item-list > ul { gap: 6px; }
  #spec .item-list .security { padding: 1.5rem 2rem; }
  #spec .item-list .security .right-wrap .fig { width: 88%; margin: 16px auto 0; } }
/******************************************************

bcp

******************************************************/
#bcp { background-color: #efefef; padding-top: 0; }
#bcp .bcp-list { margin-top: 4rem; }
#bcp .bcp-list > ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px 24px; }
#bcp .bcp-list > ul .title { border: thin solid #0d6541; border-width: thin 0; text-align: center; line-height: 1.2; padding: 8px; }
#bcp .bcp-list > ul .title p { font-size: clamp(16px, 1.5rem, 2rem); color: #0d6541; }
#bcp .bcp-list > ul .text { margin-top: 12px; font-size: clamp(14px, 1.25rem, 1.5rem); line-height: 1.44; }

@media (max-width: 960px) { #bcp .bcp-list > ul { max-width: 544px; margin: auto; grid-template-columns: repeat(2, 1fr); } }
/******************************************************

access

******************************************************/
#access { background-color: #fff; }
#access .route-map { margin-top: 5rem; max-width: 720px; margin-inline: auto; }
#access .route-map .note { text-align: left; }
#access .to-station { max-width: 720px; display: grid; grid-template-columns: repeat(3, 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 { width: 100%; height: auto; }

@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 .airport .img .note { position: static; } }
/******************************************************

location

******************************************************/
#location { background-color: #d6e5d3; }
#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 .walk-to-station .cap { bottom: 49%; }
#location .walk-to-station .cap:nth-of-type(1) { right: 51%; }
#location .note { margin-top: 6rem; }

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

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; } }