@charset "UTF-8";
@keyframes bounce {0% {transform: translateY(0) scale(1);}10% {transform: translateY(-4px) scale(1.04);}15% {transform: translateY(0) scale(0.98);}20% {transform: translateY(-2px) scale(1.02);}30% {transform: translateY(0) scale(1);}100% {transform: translateY(0) scale(1);}}

#Pagetop a {padding: 0;}
#Colophon .container {max-width: 100%;}

#Main .block-life-stage-housing-01 {position: relative;}
#Main .block-life-stage-housing-01 h2 img {width: auto;height: 4.25em;margin: 3em auto;}
#Main .block-life-stage-housing-01 ul {display: flex;justify-content: center;flex-wrap: wrap;max-width: 70em;margin: 0 auto;}
#Main .block-life-stage-housing-01 ul li {position: relative;margin: 0.5em 0.75em;padding: 1em 0;width: calc(33.33% - 1.5em);background: linear-gradient(0deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,1) 100%);box-shadow: 0 0 1em rgb(0 0 0 / 10%);border-radius: 3px;font-weight: bold;text-align: center;line-height: 1;white-space: nowrap;color: #1d6598;}
#Main .block-life-stage-housing-01 ul li::before {content: "Q";position: absolute;top: 0;left: 0;transform: translate(-40%, -20%);width: 2em;height: 2em;background-color: #1d6598;border-radius: 100%;text-align: center;line-height: 2;font-weight: 400;font-family: 'Jost', sans-serif;font-size: 150%;color: #fcfd08;}
#Main .block-life-stage-housing-01 .container {position: absolute;top: 50%;left: 2em;right: 2em;transform: translateY(-50%);z-index: 2;}

#Main .block-life-stage-housing-02 {background: transparent url(../img/life-stage-housing/bg_07.webp) no-repeat 50% / cover;}
#Main .block-life-stage-housing-02 p {text-align: center;font-size: 112.5%;line-height: 2;}
#Main .block-life-stage-housing-02 ul {display: flex;justify-content: center;margin-top: 3em;}
#Main .block-life-stage-housing-02 ul li {width: 16em;margin: 0;}
#Main .block-life-stage-housing-02 ul li a {position: relative;padding: 1em 2em 1em 1em;text-align: center;font-weight: bold;font-size: 125%;color: #fff;}
#Main .block-life-stage-housing-02 ul li a::after {content: "＞";position: absolute;top: 50%;right: 1.5em;transform: rotate(90deg) scaleY(2) translateX(-50%);font-size: 70%;font-weight: normal;}
#Main .block-life-stage-housing-02 ul li a small {display: block;font-size: 50%;}
#Main .block-life-stage-housing-02 ul li a[href="#Dinks"] {background-color: #1d6598;border-radius: 5px 0 0 5px;}
#Main .block-life-stage-housing-02 ul li a[href="#Family"] {background-color: #d27730;}
#Main .block-life-stage-housing-02 ul li a[href="#Senior"] {background-color: #64892e;border-radius: 0 5px 5px 0;}
#Main .block-life-stage-housing-02 .container {width: calc(100% - 4em);max-width: 1200px;margin: 0 auto;padding: 4em 0;}

#Main .block-life-stage-housing-03 h3 {padding: 1.5em 0;line-height: 1;text-align: center;font-size: 125%;color: #fff;}
#Main .block-life-stage-housing-03 h3 small {display: block;max-width: 12em;margin: 1em auto 0;padding-top: 1em;border-top: 1px solid #fff;font-size: 50%;}
#Main .block-life-stage-housing-03 h4 {background: linear-gradient(90deg, rgba(253,255,222,1) 0%, rgba(255,255,255,1) 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;font-weight: bold;font-size: 200%;}
#Main .block-life-stage-housing-03 h5 {position: relative;max-width: 38em;margin: 2em 0 0.5em;padding: 0.5em 0 0.5em 2.5em;border-bottom: 1px solid rgb(255 255 255 / 40%);font-weight: bold;font-size: 125%;color: #f9ff99;}
#Main .block-life-stage-housing-03 h5::before {content: "Q";position: absolute;top: 50%;left: 0;transform: translate(0, -50%);width: 2em;height: 2em;background-color: #fff;border-radius: 100%;text-align: center;line-height: 2;font-weight: 400;font-family: 'Jost', sans-serif;font-size: 85%;}
#Main .block-life-stage-housing-03 h6 {padding: 1em;text-align: center;font-size: 125%;font-weight: bold;color: #f9ff99;}
#Main .block-life-stage-housing-03 ul {padding-left: 0.25em;}
#Main .block-life-stage-housing-03 ul li {margin: 0 0 0 0.75em;list-style: disc;font-size: 112.5%;color: #fff;}
#Main .block-life-stage-housing-03 ul.column {display: flex;flex-wrap: wrap;}
#Main .block-life-stage-housing-03 ul.column li {width: 50%;white-space: nowrap;}
#Main .block-life-stage-housing-03 dl {display: flex;flex-wrap: wrap;font-size: 112.5%;}
#Main .block-life-stage-housing-03 dl dt {width: 22em;border-bottom: 1px dotted #fff;margin: 0 0 0.25em;padding-bottom: 0.25em;box-sizing: border-box;color: #fff;}
#Main .block-life-stage-housing-03 dl dt strong {margin-right: 0.25em;font-family: 'Jost', sans-serif;font-weight: 400;font-size: 150%;line-height: 1;}
#Main .block-life-stage-housing-03 dl dd {width: calc(100% - 22em);border-bottom: 1px dotted #fff;margin: 0 0 0.25em;padding: 0 0 0.25em 4em;box-sizing: border-box;position: relative;color: #fff;}
#Main .block-life-stage-housing-03 dl dd::before {content: "→";position: absolute;top: 50%;left: 0;transform: translateY(-50%);}
#Main .block-life-stage-housing-03 .container {width: calc(100% - 4em);max-width: 1200px;margin: 0 auto;padding: 4em 0 5em;position: relative;}

#Main .block-life-stage-housing-03 .accordion {padding-top: 1px;}
#Main .block-life-stage-housing-03 .accordion-header {position: relative;z-index: 2;background: #f9ff99 none!important;max-width: 22em;margin: -2em auto 0;padding: 1.5em 1.5em 1.5em 0;border-radius: 3em;text-align: center;font-size: 125%;font-weight: bold;animation: bounce 3s ease infinite;cursor: pointer;}
#Main .block-life-stage-housing-03 .accordion-header::before {content: "";position: absolute;top: 100%;left: 50%;z-index: -1;transform: translate(-50%, -100%);border: 1em solid transparent; border-color: #f9ff99 transparent transparent;transition: transform var(--easing) 200ms;}
#Main .block-life-stage-housing-03 .accordion-header::after {content: "＞";position: absolute;top: 50%;right: 2.25em;transform: rotate(90deg) scaleY(2) translateX(-50%);font-size: 70%;font-weight: normal;}
#Main .block-life-stage-housing-03 .accordion-header.active {animation: none;}
#Main .block-life-stage-housing-03 .accordion-header.active::before {transform: translate(-50%, -10%);}

#Main .block-life-stage-housing-03 .accordion-content {padding-top: 1.5em;max-height: 0;overflow: hidden;transition: max-height 0.3s ease-in-out;}
#Main .block-life-stage-housing-03 .accordion-content .frame {border: 1px solid #fff;border-radius: 5px;}
#Main .block-life-stage-housing-03 .accordion-content .frame + h5 {margin-top: 1em;}
#Main .block-life-stage-housing-03 .accordion-content .frame ul {margin: 1em 2em;}
#Main .block-life-stage-housing-03 .accordion-content .frame dl {margin: 1em 2em;}
#Main .block-life-stage-housing-03 .accordion-content button {position: relative;display: block;border: 2px solid #fff;border-radius: 5px;background-color: transparent;margin: 3em auto 0;padding: 1em 5em;text-align: center;cursor: pointer;font-size: 112.5%;font-weight: bold;color: #fff;}
#Main .block-life-stage-housing-03 .accordion-content button::after {content: "＞";position: absolute;top: 50%;right: 2.5em;transform: rotate(-90deg) scaleY(2) translateX(50%);font-size: 70%;font-weight: normal;}

#Main .block-life-stage-housing-04 {background-color: #f0f5f7;}
#Main .block-life-stage-housing-04 .container {width: calc(100% - 4em);max-width: 1200px;margin: 0 auto;padding: 4em 0 5em;position: relative;}
#Main .block-life-stage-housing-04 .grid-list {justify-content: space-between;}
#Main .block-life-stage-housing-04 .grid-list > div {width: calc(50% - 2em);margin: 1em;}
#Main .block-life-stage-housing-04 .grid-list > div a {display: flex;justify-content: center;align-items: center;min-height: 22em;}
#Main .block-life-stage-housing-04 .grid-list > div:nth-child(1) a {position: relative;background: transparent url(../img/life-stage-housing/btn_bg_01.webp) no-repeat 50% / cover;}
#Main .block-life-stage-housing-04 .grid-list > div:nth-child(1) a::before {content: "";position: absolute;top: 1.5em;left: 1.5em;right: 1.5em;bottom: 1.5em;border: 1px solid #fff;}
#Main .block-life-stage-housing-04 .grid-list > div:nth-child(1) a p {color: #002f53;font-weight: bold;font-size: 125%;text-align: center;}
#Main .block-life-stage-housing-04 .grid-list > div:nth-child(1) a p strong {display: block;padding-top: 1em;color: #fff;font-size: 200%;font-weight: bold;text-shadow: 0 0 0.2em rgb(116 158 137);}
#Main .block-life-stage-housing-04 .grid-list > div:nth-child(1) a p small {display: block;position: relative;background: #002f53;margin: 1.5em auto 0;padding: 1em;width: 16em;border-radius: 3em;text-align: center;font-family: 'Jost', sans-serif;font-weight: 400;font-size: 80%;letter-spacing: 0.1em;line-height: 1;color: #fff;}
#Main .block-life-stage-housing-04 .grid-list > div:nth-child(1) a p small::before {content: "→";position: absolute;top: 50%;right: 1.5em;transform: translateY(-50%);}
#Main .block-life-stage-housing-04 .grid-list > div:nth-child(1) a p span {text-shadow: 0 0 5px #fff, 0 0 2px #fff;}
#Main .block-life-stage-housing-04 .grid-list > div:nth-child(2) a {background: linear-gradient(90deg, rgba(200,200,200,1) 0%, rgba(240,240,240,1) 100%);cursor: default;pointer-events: none;}
#Main .block-life-stage-housing-04 .grid-list > div:nth-child(2) a p {font-family: 'Jost', sans-serif;font-weight: 400;font-size: 200%;letter-spacing: 0.1em;color: #666;}

#Dinks h3 {background: linear-gradient(90deg, rgba(23,82,132,1) 0%, rgba(35,120,172,1) 100%);}
#Dinks h5::before {color: #1d6598;}
#Dinks .accordion {background: #1d6598 url(../img/life-stage-housing/bg_07.webp) no-repeat 50% / cover;background-blend-mode: color-burn;}
#Dinks .accordion-header {color: #1d6598!important;}
#Dinks .accordion-content h6 {background-color: #357eb1;}
#Dinks .accordion-content .frame {background-color: #1d6598;}
#Dinks .introduction ul.column {max-width: 50em;}
#Dinks .introduction dl dt:last-of-type,
#Dinks .introduction dl dd:last-of-type {color: #f9ff99;}
#Dinks article:nth-of-type(1) .introduction {background: transparent url(../img/life-stage-housing/bg_01.webp) no-repeat 50% / cover;}
#Dinks article:nth-of-type(1) .introduction .container::before {content: "";position: absolute;top: 5em;right: 0;bottom: 15em;background: transparent url(../img/life-stage-housing/img_01.webp) no-repeat 100% 0 / contain;aspect-ratio: 1 / 2;}
#Dinks article:nth-of-type(2) .introduction {background: transparent url(../img/life-stage-housing/bg_02.webp) no-repeat 50% / cover;}
#Dinks article:nth-of-type(2) .introduction .container::before {content: "";position: absolute;top: 5em;right: 0;bottom: 15em;background: transparent url(../img/life-stage-housing/img_02.webp) no-repeat 100% 0 / contain;aspect-ratio: 1 / 2;}
#Dinks article:nth-of-type(1) .introduction dl dt {width: 20em;}
#Dinks article:nth-of-type(1) .introduction dl dd {width: calc(100% - 20em);}
#Dinks article:nth-of-type(1) .frame dl dt {width: 17em;}
#Dinks article:nth-of-type(1) .frame dl dd {width: calc(100% - 17em);}
#Dinks article:nth-of-type(2) .frame dl dt {width: 11em;}
#Dinks article:nth-of-type(2) .frame dl dd {width: calc(100% - 11em);}

#Family h3 {background: linear-gradient(90deg, rgba(204,103,42,1) 0%, rgba(216,135,54,1) 100%);}
#Family h5::before {color: #d27730;}
#Family .accordion {background: #dd8a46 url(../img/life-stage-housing/bg_07.webp) no-repeat 50% / cover;background-blend-mode: color-burn;}
#Family .accordion-header {color: #d27730!important;}
#Family .accordion-content h6 {background-color: #e29a61;}
#Family .accordion-content .frame {background-color: #dd8a46;}
#Family .introduction ul.column {max-width: 50em;}
#Family .introduction dl dt:last-of-type,
#Family .introduction dl dd:last-of-type {color: #f9ff99;}
#Family article:nth-of-type(1) .introduction {background: transparent url(../img/life-stage-housing/bg_03.webp) no-repeat 50% / cover;}
#Family article:nth-of-type(1) .introduction .container::before {content: "";position: absolute;top: 1em;right: 0;bottom: 19em;background: transparent url(../img/life-stage-housing/img_03.webp) no-repeat 100% 0 / contain;aspect-ratio: 1 / 2;}
#Family article:nth-of-type(2) .introduction {background: transparent url(../img/life-stage-housing/bg_04.webp) no-repeat 50% / cover;}
#Family article:nth-of-type(2) .introduction .container::before {content: "";position: absolute;top: 5em;right: 0;bottom: 15em;background: transparent url(../img/life-stage-housing/img_04.webp) no-repeat 100% 0 / contain;aspect-ratio: 1 / 2;}
#Family article:nth-of-type(1) .introduction dl dt {width: 8em;}
#Family article:nth-of-type(1) .introduction dl dd {width: calc(100% - 8em);padding-left: 3em;}
#Family article:nth-of-type(2) .introduction dl dt {width: 23em;}
#Family article:nth-of-type(2) .introduction dl dd {width: calc(100% - 23em);}
#Family article:nth-of-type(1) .introduction dl dd::before {top: 1em;}
#Family article:nth-of-type(1) .introduction dl dd:last-of-type {color: #fff!important;}
#Family article:nth-of-type(1) .introduction dl dd:last-of-type span {color: #f9ff99;}
#Family article:nth-of-type(1) .frame dl dt {width: 10em;}
#Family article:nth-of-type(1) .frame dl dd {width: calc(100% - 10em);}
#Family article:nth-of-type(2) .frame dl dt {width: 9em;}
#Family article:nth-of-type(2) .frame dl dd {width: calc(100% - 9em);}

#Senior h3 {background: linear-gradient(90deg, rgba(81,115,37,1) 0%, rgba(119,159,55,1) 100%);}
#Senior h5::before {color: #64892e;}
#Senior .accordion {background: #64892e url(../img/life-stage-housing/bg_07.webp) no-repeat 50% / cover;background-blend-mode: color-burn;}
#Senior .accordion-header {color: #64892e!important;}
#Senior .accordion-content h6 {background-color: #64892e;}
#Senior .accordion-content .frame {background-color: #53761f;}
#Senior .introduction ul.column {max-width: 50em;}
#Senior .introduction dl dt:last-of-type,
#Senior .introduction dl dd:last-of-type {color: #f9ff99;}
#Senior article:nth-of-type(1) .introduction {background: transparent url(../img/life-stage-housing/bg_05.webp) no-repeat 50% / cover;}
#Senior article:nth-of-type(1) .introduction .container::before {content: "";position: absolute;top: 3em;right: 0;bottom: 17em;background: transparent url(../img/life-stage-housing/img_05.webp) no-repeat 100% 0 / contain;aspect-ratio: 1 / 2;}
#Senior article:nth-of-type(2) .introduction {background: transparent url(../img/life-stage-housing/bg_06.webp) no-repeat 50% / cover;}
#Senior article:nth-of-type(2) .introduction .container::before {content: "";position: absolute;top: 5em;right: 0;bottom: 15em;background: transparent url(../img/life-stage-housing/img_06.webp) no-repeat 100% 0 / contain;aspect-ratio: 1 / 2;}
#Senior article:nth-of-type(1) .introduction dl dt {width: 15.75em;letter-spacing: 0;}
#Senior article:nth-of-type(1) .introduction dl dd {width: calc(100% - 15.75em);padding-left: 1.5em;letter-spacing: 0;}
#Senior article:nth-of-type(2) .introduction dl dt {width: 16em;}
#Senior article:nth-of-type(2) .introduction dl dd {width: calc(100% - 16em);padding-left: 3em;letter-spacing: 0;}
#Senior article:nth-of-type(1) .frame dl dt {width: 11em;}
#Senior article:nth-of-type(1) .frame dl dd {width: calc(100% - 11em);}
#Senior article:nth-of-type(2) .frame dl dt {width: 11em;}
#Senior article:nth-of-type(2) .frame dl dd {width: calc(100% - 11em);}

@media all and (min-width: 769px) {}
@media all and (min-width: 769px) and (max-width: 1500px) {
  #Main .block-life-stage-housing-01 .swiper-slide img {object-fit: cover;min-height: 33.4375em;}
}
@media all and (min-width: 769px) and (max-width: 1230px) {
  #Main .block-life-stage-housing-03 h5 {max-width: 26em;}
  #Dinks .introduction ul.column {max-width: 35em;}
  #Dinks .introduction ul.column li {width: 100%;}
}
@media all and (min-width: 769px) and (max-width: 1100px) {
  #Main .block-life-stage-housing-03 ul li {letter-spacing: 0.02em;}
}

@media all and (max-width: 768px) {
  #Main .block-life-stage-housing-01 h2 img {width: 100%;height: auto;margin: 2em 0;}
  #Main .block-life-stage-housing-01 ul {margin: 0 -1.5em;}
  #Main .block-life-stage-housing-01 ul li {width: calc(50% - 1em);margin: 0.5em;letter-spacing: 0;}
  #Main .block-life-stage-housing-01 ul li::before {font-size: 100%;}
  #Main .block-life-stage-housing-01 .swiper-slide img {object-fit: cover;height: 34em;}

  #Main .block-life-stage-housing-02 ul {justify-content: space-between;}
  #Main .block-life-stage-housing-02 ul li:nth-child(1) {width: 30%;}
  #Main .block-life-stage-housing-02 ul li:nth-child(2) {width: 30%;}
  #Main .block-life-stage-housing-02 ul li:nth-child(3) {width: 40%;}
  #Main .block-life-stage-housing-02 ul li a {padding: 1em 1em 1em 0;letter-spacing: 0;}
  #Main .block-life-stage-housing-02 ul li a::after {font-size: 50%;}

  #Main .block-life-stage-housing-03 h4 {float: right;height: 17.5em;margin-right: 1em;writing-mode: vertical-rl;line-height: 1.4;}
  #Main .block-life-stage-housing-03 h5 {clear: both;}
  #Main .block-life-stage-housing-03 ul li {letter-spacing: 0;}
  #Main .block-life-stage-housing-03 ul.column li {width: 100%;}
  #Main .block-life-stage-housing-03 dl {display: block;}
  #Main .block-life-stage-housing-03 dl dt {width: 100%!important;margin-bottom: 0;border-bottom: 0 none transparent;}
  #Main .block-life-stage-housing-03 dl dd {width: 100%!important;margin-bottom: 0.75em;padding-left: 1.65em!important;padding-bottom: 0.75em;letter-spacing: 0;}
  #Main .block-life-stage-housing-03 dl dd::before {top: 1em;}
  #Main .block-life-stage-housing-03 .introduction .container::before {height: 35em;bottom: inherit!important;top: 2em!important;left: 2em;}

  #Main .block-life-stage-housing-04 .grid-list {gap: 2em;}
  #Main .block-life-stage-housing-04 .grid-list > div {width: 100%;margin: 0;}
}