@charset "utf-8";

body {
  width: 100%;
  /* height: 100lvh; */
  /* background-color: #4e778f; */
}
body:has(#js-status-checker.is-loading) {
  height: 100vh;
  overflow: hidden;
}

sup {
  font-size: 0.5em;
  letter-spacing: 0.05em;
}


#intro_skip {
  display: block;
  position: fixed;
  left: 20px;
  bottom: 20px;
  padding: 10px 30px;
  font-size: 16px;
  color: #fff;
  background: linear-gradient(to bottom, #2a93ad, #214270);
  border-radius: 100vmax;
}
@media screen and (max-width:768px) {
  #intro_skip {
    font-size: calc((( 16 / var(--media_sp)) * 100) * var(--vw));
  }
}

#intro_bg_mov {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100vw;
  min-height: 56.25vw; /* 16:9 = 9 / 16 = 0.5625 = 56.25% */
  width: 100%;
  height: 100%;
}
#intro_bg_mov iframe,
#intro_bg_mov video {
  display: block;
  border: none;
  width: 100%;
  height: 100%;
  object-position: center;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}
@media screen and (max-width:768px) {
  #intro_bg_mov {
    aspect-ratio: 9 / 16;
      min-width: 100%;
      min-height: 100vh; /* 16:9 = 9 / 16 = 0.5625 = 56.25% */
  }
}

.intro {
  /* --introGrad: linear-gradient(to bottom, #edf9f9, #d4f0f1); */
  position: fixed;
  top: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  z-index: 9999;
  background-color: #fff;
  overflow: hidden;
  user-select: none;
  opacity: 1;
}
.opA .intro,
.opA .intro-wrap {
  background: #000;
}
.intro-wrap {
  background-image: var(--introGrad);
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.intro-inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
}
.intro-ripples-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.intro_img_ripples,
.intro_img_ripples0 {
  position: absolute;
  transform-origin: center;
  translate: -50% -50%;
  opacity: 0.6;
  scale: 0;
}
.intro_logo,
.intro_txt {
  position: absolute;
  inset: 0;
  margin: auto;
  width: fit-content;
  height: fit-content;
}
.intro_txt {
  font-family: "リュウミン R-KL", serif;
  color: #fff;
  opacity: 0;
  visibility: hidden;
  text-align: center;
}
.intro_logo.intro_txtB,
.intro_logo.intro_txtC {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 56.75%;
  height: fit-content;
}
@media screen and (min-width:769px) {
  .intro_logo {
    width: 350px;
  }
  .intro_logo.intro_txtB,
  .intro_logo.intro_txtC {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 56.75%;
    height: fit-content;
  }
  .intro_txt {
    font-size: 32px;
    /* line-height: 1; */
    line-height: 1.888;
    letter-spacing: 0.5em;
  }
  .intro_img_ripples {
    width: 54.125vw;
    height: auto;
    aspect-ratio: 1 / 1;
  }
  /* .intro_img_ripples0.ripple0-01 {
    position: absolute;
    top: -37.777%;
    left: -18.75%;
  }
  .intro_img_ripples0.ripple0-02 {
    position: absolute;
    bottom: -4.111%;
    right: -5.1875%;
  }
  .intro_img_ripples0.ripple0-03 {
    position: absolute;
    bottom: -28.111%;
    right: 18.4375%;
  }
  .intro_img_ripples0.ripple0-04 {
    position: absolute;
    bottom: -28.111%;
    right: 18.4375%;
  } */
  .intro_img_ripples.ripple01 {
    position: absolute;
    top: 25.56%;
    left: 19.5%;
    width: 54.125vw;
  }
  .intro_img_ripples.ripple02 {
    position: absolute;
    top: 37.22%;
    left: 79.375%;
    width: 32.562vw;
  }
  .intro_img_ripples.ripple03 {
    position: absolute;
    top: 86.11%;
    left: 58.75%;
    width: 26.5vw;
  }
}
@media screen and (max-width:768px) {
  .intro_logo {
    width: 57.333vw;
  }
  .intro_txt {
    font-size: 4.8vw;
    line-height: 1.888;
    letter-spacing: 0.52em;
    padding-left: 1.45em;
  }
  .intro_img_ripples {
    width: 108.933vw;
    height: auto;
    aspect-ratio: 1 / 1;
  }
  .intro_img_ripples.ripple01 {
    position: absolute;
    top: 25.56%;
    left: 19.5%;
    width: 108.933vw;
  }
  .intro_img_ripples.ripple02 {
    position: absolute;
    top: 65.56%;
    left: 79.375%;
    width: 66.4vw;
  }
  .intro_img_ripples.ripple03 {
    position: absolute;
    top: 86.11%;
    left: 58.75%;
    width: 54.533vw;
  }
}

.mv_bg-wrap {
  position: relative;
  width: 100%;
  height: 100vh;
  /* height: 100svh; */
  height: 100lvh;
  height: var(--100lvh);
  z-index: 10;
  overflow: hidden;
}
.mv_bg {
  background-image: url(/content/dam/31sumai/mfr/K2201/assets/img/top/mv_bg_pc.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  /* height: 100svh; */
  height: 100lvh;
  height: var(--100lvh);
  transform-origin: top center;
  /* scale: 1.15; */
  pointer-events: none;
}
.mv_bg-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to bottom, #fff, #def3f4);
}
.mv_atn-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
}
.mv_ttl-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  height: 100svh;
  /* height: 100lvh; */
  z-index: 12;
  user-select: none;
}
.mv_ttl-inner {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
}
.mv_ttl {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  margin-inline: auto;
}
.mv_scroll-atn-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.mv_scroll-atn {
  position: relative;
  display: block;
  width: 1px;
  height: 100%;
  margin-inline: auto;
  overflow: hidden;
}
.mv_scroll-atn::before,
.mv_scroll-atn::after {
  content: "";
  display: block;
  width: 1px;
  height: 100%;
}
.mv_scroll-atn::before {
  background-color: #999;
}
.mv_scroll-atn::after {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  animation: scrollAtn 3s infinite;
}
@keyframes scrollAtn {
  0% {
    translate: 0 -100%;
    animation-timing-function: cubic-bezier(0.85, 0, 0.15, 1);
  }
  40% {
    translate: 0 0;
  }
  60% {
    translate: 0 0;
    animation-timing-function: cubic-bezier(0.85, 0, 0.15, 1);
  }
  100% {
    translate: 0 100%;
  }
}
@media screen and (min-width:769px) {
  .mv_bg {
    background-image: url(/content/dam/31sumai/mfr/K2201/assets/img/top/mv_bg_pc.jpg);
  }
  .mv_ttl {
    width: max(30.062%, 481px);
    top: 77%;
  }
  .mv_scroll-atn-wrap {
    height: 40px;
  }
}
@media screen and (max-width:768px) {
  .mv_bg {
    background-image: url(/content/dam/31sumai/mfr/K2201/assets/img/top/mv_bg_sp.jpg);
  }
  .mv_ttl {
    width: 64.133vw;
    bottom: 17.061%;
  }
  .mv_scroll-atn-wrap {
    height: 7.898%;
  }
}

.concept {
  padding-top: 100vh;
  position: relative;
  z-index: 11;
  width: 100%;
  min-height: 100vh;
  min-height: 100lvh;
  user-select: none;
  pointer-events: none;
  /* --movShort: 120;
  --movLong: 213.333; */
}
.concept_bg {
  position: absolute;
  z-index: 11;
  top: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  /* height: calc(1vh * var(--movShort));
  height: calc(1lvh * var(--movShort)); */
  overflow: hidden;

  --mask-pos-y: 0%;
  mask-image: url(/content/dam/31sumai/mfr/K2201/assets/img/top/entry_bg_mask.png);
  /* mask-image: url(/content/dam/31sumai/mfr/K2201/assets/img/top/mask_dummy.png); */
  /* mask-size: cover; */
  mask-size: 1600px auto;
  mask-size: 100% auto;
  mask-repeat: repeat-x;
  mask-position: center var(--mask-pos-y);
}
/* @media screen and (min-width: 769px) and (max-width: 1600px) {
  .concept_bg {
    mask-size: 100% auto;
  }
} */
@media screen and (max-width:768px) {
  .concept_bg {
    mask-size: 200vw auto;
  }
}
.concept_bg_mov-wrap {
  user-select: none;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100lvh;
  /* height: calc(1vh * var(--movShort));
  height: calc(1lvh * var(--movShort)); */
  overflow: hidden;
  z-index: -1;
  pointer-events: none;
}
#concept_bg_mov {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;

  /* 高さが足りないときの補正 */
  /* 100 / 0.5625 = 177.78 */
  min-width: 100vw;
  min-width: 100lvw;
  min-height: 56.25vw;
  min-height: 56.25lvw;
}
#concept_bg_mov iframe,
#concept_bg_mov video {
  aspect-ratio: 16 / 9;
  display: block;
  border: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}
@media screen and (max-width:768px) {
    #concept_bg_mov {
    min-width: 100%;
    min-height: 100vh;
    min-height: 100lvh;
  }
  #concept_bg_mov video {
    aspect-ratio: 9 / 16;
    display: block;
    border: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    user-select: none;
  }
  span.img_cap.concept_bg_img_cap {
    bottom: calc(12vw + 5px);
  }
}
.concept_txt {
  margin-top: 50vh;
  position: relative;
  z-index: 11;
  color: #fff;
  text-align: center;
}
.concept_heading,
.concept_copy {
  font-family: "リュウミン R-KL", serif;
}

.concept_entry_hgroup {
  position: relative;
  z-index: 1;
  margin-top: 40vh;
  margin-inline: auto;
  text-align: center;
  color: #fff;
  color: transparent;
  transform-origin: center;
  width: fit-content;
  max-width: 100%;
  opacity: 0;
}
@media screen and (min-width:769px) {
  .concept_txt {
    margin-top: 100vh;
    margin-top: 75vh;
    /* padding-bottom: 520px; */
  }
  .concept_heading {
    font-size: 32px;
    letter-spacing: 0.22em;
  }
  /* .concept_copy-wrap > * + * {
    margin-top: 85px;
  } */
  .concept_copy {
    margin-top: 85px;
    font-size: 17px;
    line-height: 3;
    letter-spacing: 0.1em;
  }
  .concept_entry_hsub {
    font-size: 24px;
    line-height: 1;
    letter-spacing: 0.25em;
    text-indent: 0.25em;
  }
  .concept_entry_heading {
    margin-top: 23px;
    font-size: 40px;
    line-height: 1;
    letter-spacing: 0.25em;
    text-indent: 0.25em;
  }
}
@media screen and (max-width:768px) {
  .concept_txt {
    margin-top: 100vh;
    margin-top: 50vh;
    /* padding-bottom: 50vh; */
  }
  .concept_heading {
    margin-left: 0.22em;
    font-size: 5.6vw;
    letter-spacing: 0.22em;
    line-height: 1.571;
  }
  .concept_copy {
    margin-top: 10.133vw;
    font-size: 3.2vw;
    line-height: 2.833;
    letter-spacing: 0.1em;
    text-align: center;
  }
  .concept_entry_hsub {
    font-size: calc((( 26 / var(--media_sp)) * 100) * var(--vw));
    line-height: 1;
    letter-spacing: 0.25em;
    text-indent: 0.25em;
  }
  .concept_entry_heading {
    margin-top: calc((( 23 / var(--media_sp)) * 100) * var(--vw));
    font-size: calc((( 42 / var(--media_sp)) * 100) * var(--vw));
    line-height: 1;
    letter-spacing: 0.25em;
    text-indent: 0.25em;
  }
}

.entry {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.entry_bg-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 100%;
}
.entry_bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.entry_bg-mask {
  position: absolute;
  width: 100%;
  top: 0;
}
.entry-inner {
  position: relative;
  /* opacity: 0; */
  /* margin-top: 50vh; */
  /* top.js y: ()=>{return window.innerHeight * 0.2}, と連動*/
}
.entry_hgroup {
  position: relative;
  z-index: 11;
  margin-inline: auto;
  text-align: center;
  color: transparent;
  color: #fff;
}
.entry_h_copy {
  color: #fff;
  text-align: center;
}
.entry_hsub-trigger {
  position: absolute;
}
@media screen and (min-width:769px) {
  .entry_hsub-trigger {
    top: max(calc(50vh + 400px), calc(50vh + 25vh));
    height: 87px;
  }
}
@media screen and (max-width:768px) {
  .entry_hsub-trigger {
    top: max(calc(50vh + 400px), calc(50vh + 25vh));
    height: calc((( 45.5 / var(--media_sp)) * 100) * var(--vw));
  }
}
.entry_lnk-wrap {
  margin-inline: auto;
}
.entry_lnk_ttl-sp-wrap {
  display: contents;
}
.entry_lnk:first-of-type {
  border-top: 1px solid #fff;
}
.entry_lnk {
  border-bottom: 1px solid #fff;
}
.entry_lnk a:hover {
  opacity: 0.3;
}
.entry_lnk sup {
  font-size: 0.6em;
  letter-spacing: 0.1em;
}
.entry_lnk_desc {
  color: #fff;
}

.entry_mov_ttl {
  color: #fff;
  text-align: center;
}
.entry_mov {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}
.entry_mov-inner {
  position: relative;
}
.entry_mov_thums {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s, visibility 0.3s;
  cursor: pointer;
}
.entry_mov_thums:hover {
  opacity: 0.7;
}
.entry_mov_thums.play {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.entry_mov_thums.play:hover {
  opacity: 0;
}
.entry_btn_heading {
  color: #fff;
  text-align: center;
}
.entry_btn {
  position: relative;
  border-radius: 100vmax;
  background: linear-gradient(to right, #38de91, #0d94d3);
  display: grid;
  place-items: center;
}
.entry_btn.lim {
  background: linear-gradient(to right, #b79a55, #96793e) 120% 120%;
}
.entry_btn_copy {
  color: #fff;
  text-align: center;
  letter-spacing: 0.25em;
}
.entry_btn_arrow {
  position: absolute;
  display: block;
  aspect-ratio: 1 / 1;
}
.entry_btn_txt {
  display: block;
  width: fit-content;
  color: #fff;
}
@media screen and (min-width:769px) {
  .entry {
    /* margin-top: 100vh; */
    margin-top: -50vh;
    /* padding-block: 50vh 222px; */
    padding-bottom: 190px;
  }
  .entry-inner {
    padding-top: max( calc( 50vh + 400px), calc(50vh + 25vh));
  }
  .entry_bg {
    background: url(/content/dam/31sumai/mfr/K2201/assets/img/top/entry_bg_pc.png) no-repeat top center/cover;
    background: url(/content/dam/31sumai/mfr/K2201/assets/img/top/entry_bg_pc.webp) no-repeat top center/cover;
  }
  .entry_hsub {
    font-size: 24px;
    line-height: 1;
    letter-spacing: 0.25em;
    text-indent: 0.25em;
  }
  .entry_heading {
    margin-top: 23px;
    font-size: 42px;
    line-height: 1;
    letter-spacing: 0.25em;
    text-indent: 0.25em;
  }
  .entry_sub_ttl {
    margin-top: 16px;
    margin-inline: auto;
    width: 308px;
  }
  .entry_h_copy {
    margin-top: 65px;
    font-size: 27px;
    line-height: 1.5;
    letter-spacing: 0.15em;
  }
  .entry_lnk-wrap {
    margin-top: 66px;
    max-width: 800px;
  }
  .entry_lnk a {
    display: grid;
    grid-template-columns: 5.5% 53.5% 38% 3%;
    justify-content: space-between;
    align-items: center;
  }
  .entry_lnk-num.num-01 {
    width: 16px;
  }
  .entry_lnk-num.num-02 {
    width: 19px;
  }
  .entry_lnk-num.num-03 {
    width: 19px;
  }
  .entry_lnk-num.num-04 {
    width: 20px;
  }
  .entry_lnk_txt {
    margin-left: 0.2em;
    margin-bottom: 10px;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0.2em;
  }
  .entry_lnk_txt-sm {
    margin-bottom: 10px;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.05em;
  }
  .entry_lnk_txt-lg {
    font-size: 25px;
    line-height: 1;
    letter-spacing: 0.1em;
  }
  .entry_lnk.urban a {
    height: 139px;
  }
  .entry_lnk.urban .entry_lnk_ttl {
    margin-top: -10px;
    width: 144px;
  }
  .entry_lnk.front a {
    height: 127px;
  }
  .entry_lnk.front .entry_lnk_ttl {
    /* margin-top: 17px; */
    width: 259px;
  }
  .entry_lnk.front .entry_lnk_txt-lg {
    margin-left: 0.2em;
  }
  .entry_lnk.design a {
    height: 124px;
  }
  .entry_lnk.design .entry_lnk_ttl {
    margin-top: 17px;
    width: 155px;
  }
  .entry_lnk.view a {
    height: 124px;
  }
  .entry_lnk.view .entry_lnk_ttl {
    /* margin-top: 18px; */
    width: 249px;
  }

  .entry_mov-wrap {
    margin-top: 139px;
    margin-inline: auto;
    max-width: 800px;
  }
  .entry_mov_ttl {
    margin-bottom: 60px;
    font-size: 27px;
    line-height: 1;
    letter-spacing: 0.15em;
  }

  .entry_btn-wrap {
    margin-top: 130px;
  }
  .entry_btn_heading {
    font-size: 32px;
    line-height: 1;
    letter-spacing: 0.2em;
    text-indent: 0.2em;
  }
  .entry_btn_copy {
    font-size: 17px;
    line-height: 2;
  }
  .entry_btn_inner {
    margin-top: 30px;
    max-width: 800px;
    margin-inline: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .entry_btn {
    max-width: 390px;
    width: 48.75%;
    height: 70px;
  }
  .entry_btn_arrow {
    width: 23px;
    height: 23px;
    right: 20px;
  }
  .entry_btn_txt {
    font-size: 18px;
    line-height: 1;
    letter-spacing: 0.1em;
    text-indent: 0.1em;
  }
}
@media screen and (max-width:768px) {
  .entry {
    /* margin-top: 100vh; */
    margin-top: -50vh;
    /* padding-block: 50vh calc((( 190 / var(--media_sp)) * 100) * var(--vw)); */
    padding-bottom: calc((( 190 / var(--media_sp)) * 100) * var(--vw));
    /* background: url(/content/dam/31sumai/mfr/K2201/assets/img/top/entry_bg_sp.webp) no-repeat top center/cover; */
  }
  /* 30vhでOK? */
  .entry-inner {
    padding-top: calc(30vh + (( 467 / var(--media_sp)) * 100) * var(--vw));
  }
  .entry_bg {
    background: url(/content/dam/31sumai/mfr/K2201/assets/img/top/entry_bg_sp.png) no-repeat top center/cover;
  }
  .entry_hsub {
    font-size: calc((( 26 / var(--media_sp)) * 100) * var(--vw));
    line-height: 1;
    letter-spacing: 0.25em;
    text-indent: 0.25em;
  }
  .entry_heading {
    margin-top: calc((( 23 / var(--media_sp)) * 100) * var(--vw));
    font-size: calc((( 48 / var(--media_sp)) * 100) * var(--vw));
    line-height: 1;
    letter-spacing: 0.25em;
    text-indent: 0.25em;
  }
  .entry_sub_ttl {
    margin-top: calc((( 22 / var(--media_sp)) * 100) * var(--vw));
    margin-inline: auto;
    width: calc((( 342 / var(--media_sp)) * 100) * var(--vw));
  }
  .entry_h_copy {
    margin-top: calc((( 72 / var(--media_sp)) * 100) * var(--vw));
    font-size: calc((( 36 / var(--media_sp)) * 100) * var(--vw));
    line-height: 1.5;
    letter-spacing: 0.15em;
  }
  .entry_lnk-wrap {
    margin-top: calc((( 60 / var(--media_sp)) * 100) * var(--vw));
    width: 93.333%;
  }
  .entry_lnk a {
    position: relative;
    display: block;
    width: 100%;
  }
  .entry_lnk_ttl-sp-wrap {
    margin-inline: auto;
    width: fit-content;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .entry_lnk-num {
    margin-inline: auto;
  }
  .entry_lnk-num.num-01 {
    margin-right: calc((( 26 / var(--media_sp)) * 100) * var(--vw));
    width: calc((( 21 / var(--media_sp)) * 100) * var(--vw));
  }
  .entry_lnk-num.num-02 {
    margin-right: calc((( 23 / var(--media_sp)) * 100) * var(--vw));
    width: calc((( 24 / var(--media_sp)) * 100) * var(--vw));
  }
  .entry_lnk-num.num-03 {
    margin-right: calc((( 22 / var(--media_sp)) * 100) * var(--vw));
    width: calc((( 24 / var(--media_sp)) * 100) * var(--vw));
  }
  .entry_lnk-num.num-04 {
    margin-top: calc((( -14 / var(--media_sp)) * 100) * var(--vw));
    margin-right: calc((( 22 / var(--media_sp)) * 100) * var(--vw));
    width: calc((( 26 / var(--media_sp)) * 100) * var(--vw));
  }
  .entry_lnk_txt {
    margin-bottom: calc((( 18 / var(--media_sp)) * 100) * var(--vw));
    font-size: calc((( 28 / var(--media_sp)) * 100) * var(--vw));
    line-height: 1;
    letter-spacing: 0.25em;
    text-align: center;
  }
  .entry_lnk_txt-sm {
    margin-bottom: calc((( 18 / var(--media_sp)) * 100) * var(--vw));
    font-size: calc((( 24 / var(--media_sp)) * 100) * var(--vw));
    line-height: 1;
    letter-spacing: 0.05em;
    text-align: center;
  }
  .entry_lnk_txt-lg {
    font-size: calc((( 46 / var(--media_sp)) * 100) * var(--vw));
    line-height: 1;
    letter-spacing: 0.05em;
    text-align: center;
  }
  .entry_lnk_arrow {
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    right: 0;
    width: calc((( 30 / var(--media_sp)) * 100) * var(--vw));
    height: calc((( 30 / var(--media_sp)) * 100) * var(--vw));
  }
  .entry_lnk.urban a {
    padding-block: calc((( 58 / var(--media_sp)) * 100) * var(--vw)) calc((( 62 / var(--media_sp)) * 100) * var(--vw));
  }
  .entry_lnk_ttl {
    margin-inline: auto;
  }
  .entry_lnk.urban .entry_lnk_ttl {
    /* margin-top: calc((( 50 / var(--media_sp)) * 100) * var(--vw)); */
    width: calc((( 112 / var(--media_sp)) * 100) * var(--vw));
  }
  .entry_lnk.urban .entry_lnk_txt {
    margin-top: calc((( 42 / var(--media_sp)) * 100) * var(--vw));
  }

  .entry_lnk.front a {
    padding-block: calc((( 59 / var(--media_sp)) * 100) * var(--vw)) calc((( 57 / var(--media_sp)) * 100) * var(--vw));
  }
  .entry_lnk.front .entry_lnk_ttl {
    /* margin-top: calc((( 52 / var(--media_sp)) * 100) * var(--vw)); */
    width: calc((( 203 / var(--media_sp)) * 100) * var(--vw));
  }
  .entry_lnk.front .entry_lnk_txt {
    margin-top: calc((( 41 / var(--media_sp)) * 100) * var(--vw));
  }
  .entry_lnk.front .entry_lnk_txt-lg {
    letter-spacing: 0.15em;
  }
  
  .entry_lnk.design a {
    padding-block: calc((( 59 / var(--media_sp)) * 100) * var(--vw)) calc((( 57 / var(--media_sp)) * 100) * var(--vw));
  }
  .entry_lnk.design .entry_lnk_ttl {
    /* margin-top: calc((( 54 / var(--media_sp)) * 100) * var(--vw)); */
    width: calc((( 122 / var(--media_sp)) * 100) * var(--vw));
  }
  .entry_lnk.design .entry_lnk_txt {
    margin-top: calc((( 27 / var(--media_sp)) * 100) * var(--vw));
  }
  .entry_lnk.design .entry_lnk_txt-lg {
    letter-spacing: 0.15em;
  }

  .entry_lnk.view a {
    padding-block: calc((( 60 / var(--media_sp)) * 100) * var(--vw)) calc((( 56 / var(--media_sp)) * 100) * var(--vw));
  }
  .entry_lnk.view .entry_lnk_ttl {
    /* margin-top: calc((( 54 / var(--media_sp)) * 100) * var(--vw)); */
    width: calc((( 194 / var(--media_sp)) * 100) * var(--vw));
  }
  .entry_lnk.view .entry_lnk_txt {
    margin-top: calc((( 40 / var(--media_sp)) * 100) * var(--vw));
  }
  .entry_lnk.view .entry_lnk_txt-lg {
    letter-spacing: 0.07em;
  }

  .entry_mov-wrap {
    margin-top: calc((( 88 / var(--media_sp)) * 100) * var(--vw));
    margin-inline: auto;
    width: 94%;
  }
  .entry_mov_ttl {
    margin-bottom: calc((( 63 / var(--media_sp)) * 100) * var(--vw));
    font-size: calc((( 36 / var(--media_sp)) * 100) * var(--vw));
    line-height: 1;
    letter-spacing: 0.15em;
  }

  .entry_btn-wrap {
    margin-top: calc((( 76 / var(--media_sp)) * 100) * var(--vw));
  }
  .entry_btn_copy {
    font-size: calc((( 24 / var(--media_sp)) * 100) * var(--vw));
    letter-spacing: 0.2em;
    line-height: 2;
  }
  .entry_btn_heading {
    font-size: calc((( 38 / var(--media_sp)) * 100) * var(--vw));
    line-height: 1;
    letter-spacing: 0.25em;
    text-indent: 0.25em;
  }
  .entry_btn_inner {
    margin-top: calc((( 37 / var(--media_sp)) * 100) * var(--vw));
  }

  .entry_btn {
    margin-inline: auto;
    width: calc((( 500 / var(--media_sp)) * 100) * var(--vw));
    height: calc((( 90 / var(--media_sp)) * 100) * var(--vw));
  }
  .entry_btn.lim {
    margin-top: calc((( 30 / var(--media_sp)) * 100) * var(--vw));
  }
  .entry_btn_arrow {
    width: calc((( 23 / var(--media_sp)) * 100) * var(--vw));
    height: calc((( 23 / var(--media_sp)) * 100) * var(--vw));
    right: calc((( 30 / var(--media_sp)) * 100) * var(--vw));
  }
  .entry_btn_txt {
    font-size: calc((( 26 / var(--media_sp)) * 100) * var(--vw));
    line-height: 1;
    letter-spacing: 0.2em;
    text-indent: 0.2em;
  }
}

/* information */
.information .info-wrap {
  margin-inline: auto;
  max-width: 800px;
}
.information .info_ttl {
  margin-inline: auto;
  width: 166px;
}
.info-container {
  border-top: 1px solid #385e7b;
  /* border-bottom: 1px solid #fff; */
}
.info-container .b-date,
.info-container .b-txt {
  display: inline-block;
  font-size: 15px;
  line-height: 2;
  color: #fff;
}
@media screen and (min-width:769px) {
  .information {
    margin-top: 130px;
  }
  .info-container  {
    margin-top: 41px;
  }
  .info-container .b-date,
  .info-container .b-txt {
    padding-block: 24px;
    border-bottom: 1px solid #385e7b;
  }
  .info-container dl dd dl {
    display: flex;
    flex-wrap: wrap;
  }
  .info-container .b-date {
    width: 12.5%;
    letter-spacing: 0.2em;
  }
  .info-container .b-txt {
    width: 87.5%;
    letter-spacing: 0.1em;
  }
}
@media screen and (max-width:768px) {
  .information {
    margin-top: calc((( 104 / var(--media_sp)) * 100) * var(--vw));
  }
  .information .info-wrap {
    margin-inline: auto;
    width: 93.333%;
  }
  .information .info_ttl {
    margin-inline: auto;
    width: calc((( 199 / var(--media_sp)) * 100) * var(--vw));
  }
  .info-container {
    margin-top: calc((( 41 / var(--media_sp)) * 100) * var(--vw));
    border-top: 1px solid #385e7b;
  }
  .info-container .b-date {
    display: block;
    padding-top: calc((( 36 / var(--media_sp)) * 100) * var(--vw));
    font-size: calc((( 24 / var(--media_sp)) * 100) * var(--vw));
    letter-spacing: 0.2em;
    line-height: 1;
  }
  .info-container .b-txt {
    display: block;
    padding-block: calc((( 12 / var(--media_sp)) * 100) * var(--vw)) calc((( 30 / var(--media_sp)) * 100) * var(--vw));
    font-size: calc((( 24 / var(--media_sp)) * 100) * var(--vw));
    letter-spacing: 0.1em;
    line-height: 1.666;
    border-bottom: 1px solid #385e7b;
  }
}
/* information */

/* section common */
/* PC コンテンツ幅は .sec_cont-wrap grid-template-columns: repeat(12, minmax(100px, 1fr)); で管理 */
#urban {z-index: 1;}
#front {z-index: 2;}
#view {z-index: 3;}
#design {z-index: 4;}
#top_plan{z-index: 5;}
#footer_gnav,.notes-wrap,.footer_contact {position: relative;z-index: 10;}

.sec_cont-container {
  position: relative;
  display: grid;
  overflow: hidden;
}
.sec-container {
  position: relative;
}
.sec_insert_ttl-layer {
  position: fixed;
  /* z-index: 999; */
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  opacity: 0;
  pointer-events: none;
  user-select: none;
}
.sec_insert_ttl-layer .sec_insert_ttl.sec_ttl {
  position: absolute;
  inset: 0;
  margin: auto;
  display: block;
  height: fit-content;
}
.sec_visual {
  position: relative;
  overflow: hidden;
}
.sec_visual_bg {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-origin: center;
}
@media screen and (max-width:768px) {
  .sec_visual_bg {
    width: auto;
    max-width: none;
    height: 100%;
    object-position: 100%;
    object-fit: cover;
  }
  .sec_visual_bg img {
    width: auto;
    max-width: none;
    height: 100%;
    object-position: 100%;
    object-fit: cover;
  }
}
.sec_cont-grad-layer {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: linear-gradient(to bottom, #def3f4, #fff);
}
.sec_catch {
  color: #000000;
  letter-spacing: 0.05em;
}
.sec_catch_sub {
  color: #51bcc6;
  letter-spacing: 0.05em;
  display: block;
  width: fit-content;
  margin-inline: auto;
}
.sec_cont-wrap .lnk-wrap a {
  display: grid;
  align-items: center;
  border-radius: 100vmax;
  background: linear-gradient(to right, #38de91, #0d94d3) 120% 100%;
  color: #fff;
}
.sec_cont-wrap .lnk-wrap a .txt {
  grid-column: 2 / 3;
  color: #fff;
}
.sec_cont-wrap .lnk-wrap a .arw {
  grid-column: 3 / 4;
}
section .img-wrap {
  position: relative;
}
.img-wrap[data-prx] {
  overflow: hidden;
  transform-origin: center;
}
section .img-wrap video {
  font-size: 0;
  display: block;
  width: 100%;
	max-width: 100%;
	height: auto;
	vertical-align: top;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
  image-rendering: auto;
  will-change: transform;
}
.sec_insert_ttl{
  margin: auto;
  position: absolute;
  inset: 0;
  height: fit-content;
}
@media screen and (min-width:769px) {
  .sec_cont-container {
    grid-template-columns:
    minmax(40px, 1fr)
    minmax(689px, 1200px)
    minmax(40px, 1fr);
  }
  .sec_cont-grad-layer {
    aspect-ratio: 1 / 0.22;
  }
  .sec_cont-wrap {
    grid-column: 2 / 3;
    display: grid;
    align-items: start;
    grid-template-columns: repeat(12, minmax(0, 100px));
  }
  .sec_catch-wrap {
    grid-column: 1 / 13;
    text-align: center;
  }
  .sec_catch {
    font-size: 42px;
    letter-spacing: 0.05em;
    line-height: 1;
  }
  .sec_catch_sub {
    font-size: 30px;
    letter-spacing: 0.15em;
    line-height: 1;
  }
  .sec_copy {
    font-size: 17px;
    letter-spacing: 0.1em;
    line-height: 3;
  }
  .sec_cont-wrap .lnk-wrap a {
    grid-template-columns: 45px auto 45px;
    height: 70px;
  }
  .sec_cont-wrap .lnk-wrap a .txt {
    text-align: center;
    font-size: 19px;
    letter-spacing: 0.1em;
    line-height: 1;
  }
  .sec_cont-wrap .lnk-wrap a .arw {
    margin-right: 22px;
    width: 23px;
    height: 23px;
  }
  .sec_insert_ttl-01 .sec_insert_ttl{width: 9.063%;}
  .sec_insert_ttl-02 .sec_insert_ttl{width: 10.4376%;}
  .sec_insert_ttl-03 .sec_insert_ttl{width: 10.375%;}
  .sec_insert_ttl-04 .sec_insert_ttl{width: 11.125%;}
  /* .sec_insert_ttl-Plan .sec_insert_ttl{width: 11.0625%;} */
}
@media screen and (max-width:768px) {
  .sec_cont-grad-layer {
    aspect-ratio: 1 / 0.588;
  }
  .sec_cont-container {
    margin-inline: auto;
    width: 100%;
  }
  .sec_cont-wrap {
    grid-column: 2 / 3;
    display: grid;
    align-items: start;
    grid-template-columns: 3.333% repeat(14, 1fr) 3.333%;
  }
  .sec_catch-wrap {
    grid-column: 1 / 17;
    text-align: center;
  }
  .sec_catch {
    font-size: calc((( 52 / var(--media_sp)) * 100) * var(--vw));
    letter-spacing: 0.05em;
    line-height: 1;
  }
  .sec_catch_sub {
    font-size: calc((( 48 / var(--media_sp)) * 100) * var(--vw));
    letter-spacing: 0.05em;
    line-height: 1;
  }
  .sec_copy {
    font-size: calc((( 24 / var(--media_sp)) * 100) * var(--vw));
    letter-spacing: 0.05em;
    line-height: 2.5;
  }
  .sec_cont-wrap .lnk-wrap {
    justify-self: center;
    width: calc((( 390 / var(--media_sp)) * 100) * var(--vw));
  }
  .sec_cont-wrap .lnk-wrap a {
    grid-template-columns: calc((( 45 / var(--media_sp)) * 100) * var(--vw)) auto calc((( 45 / var(--media_sp)) * 100) * var(--vw));
    height: calc((( 80 / var(--media_sp)) * 100) * var(--vw));
  }
  .sec_cont-wrap .lnk-wrap a .txt {
    font-size: calc((( 26 / var(--media_sp)) * 100) * var(--vw));
    letter-spacing: 0.15em;
    line-height: 1;
    text-align: center;
  }
  .sec_cont-wrap .lnk-wrap a .arw {
    margin-right: calc((( 22 / var(--media_sp)) * 100) * var(--vw));
    width: calc((( 23 / var(--media_sp)) * 100) * var(--vw));
    height: calc((( 23 / var(--media_sp)) * 100) * var(--vw));
  }
  .sec_insert_ttl-01 .sec_insert_ttl{width: 23.2%;}
  .sec_insert_ttl-02 .sec_insert_ttl{width: 26.667%;}
  .sec_insert_ttl-03 .sec_insert_ttl{width: 26.533%;}
  .sec_insert_ttl-04 .sec_insert_ttl{width: 28.4%;}
  /* .sec_insert_ttl-Plan .sec_insert_ttl{width: 27.866%;} */
}
/* section common */


/* urban */
.urban .sec_visual {
  width: 100%;
}
.urban .sec_catch_sub span {
  display: block;
}
@media screen and (min-width:769px) {
  .urban .sec_visual {
    /* background: url(/content/dam/31sumai/mfr/K2201/assets/img/top/urban_bg_pc.jpg) no-repeat center top/cover; */
    aspect-ratio: 16 / 9;
    padding-top: 4.875%;
  }
  .urban .sec_ttl {
    margin-inline: auto 5.188%;
    width: 15.938%;
  }
  .urban .sec_cont-wrap {
    padding-block: 119px 198px;
  }
  .urban .sec_catch {
    letter-spacing: 0.12em;
    text-indent: 0.3em;
  }
  .urban .sec_catch_sub {
    margin-top: 49px;
  }
  .urban .sec_catch_sub .from {
    margin-left: 0.4em;
    font-size: 16px;
    letter-spacing: 0.05em;
    text-align: left;
  }
  .urban .sec_catch_sub .to {
    margin-top: 8px;
    font-size: 39px;
    letter-spacing: 0.1em;
  }
  .urban .sec_catch_sub .minute {
    margin-top: 5px;
    font-size: 16px;
    letter-spacing: 0.05em;
    text-align: right;
  }
  .urban .img-wrap.img01 {
    margin-top: 98px;
    grid-column: 1 / 8;
  }
  .urban .txt-wrap.txt01 {
    margin-top: 98px;
    grid-column: 9 / 13;
    align-self: center;
  }
  .urban .img-wrap.img02 {
    margin-top: 100px;
    grid-row: 3 / 4;
    grid-column: 9 / 13;
  }
  .urban .img-wrap.img03 {
    margin-top: calc(100px + 177px);
    grid-row: 3 / 4;
    grid-column: 2 / 7;
  }
  .urban .lnk-wrap.lnk-access {
    margin-top: calc(100px + 462px);
    grid-row: 3 / 4;
    grid-column: 10 / 13;
  }
  .urban .txt-wrap.txt02 {
    margin-top: 190px;
    grid-column: 1 / 6;
    align-self: center;
  }
  .urban .img-wrap.img04 {
    margin-top: 190px;
    grid-column: 6 / 13;
  }
  .urban .img-wrap.img05 {
    grid-row: 5 / 6;
    margin-top: 149px;
    grid-column: 1 / 7;
  }
  .urban .img-wrap.img06 {
    grid-row: 5 / 6;
    margin-top: calc(149px + 379px);
    grid-column: 9 / 13;
  }
  .urban .lnk-wrap.lnk-location {
    margin-top: calc(149px + 584px);
    grid-row: 5 / 6;
    grid-column: 1 / 4;
  }
}
@media screen and (max-width:768px) {
  .urban .sec_visual {
    /* background: url(/content/dam/31sumai/mfr/K2201/assets/img/top/urban_bg_sp.jpg) no-repeat center top/cover; */
    aspect-ratio: 1 / 1.5;
    padding-top: 10.533%;
  }
  .urban .sec_cont-grad-layer {
    aspect-ratio: 1 / 0.628;
  }
  .urban .sec_ttl {
    margin-inline: auto 6.667%;
    width: 40.266%;
  }
  .urban .sec_cont-wrap {
    padding-block: calc((( 147 / var(--media_sp)) * 100) * var(--vw)) calc((( 200 / var(--media_sp)) * 100) * var(--vw));
  }
  .urban .sec_catch {
    letter-spacing: 0.12em;
    text-indent: 0.3em;
  }
  .urban .sec_catch_sub {
    margin-top: calc((( 48 / var(--media_sp)) * 100) * var(--vw));
  }
  .urban .sec_catch_sub .from {
    margin-left: 0.4em;
    font-size: calc((( 20 / var(--media_sp)) * 100) * var(--vw));
    letter-spacing: 0.07em;
    text-align: left;
  }
  .urban .sec_catch_sub .to {
    margin-top: calc((( 8 / var(--media_sp)) * 100) * var(--vw));
    font-size: calc((( 48 / var(--media_sp)) * 100) * var(--vw));
    letter-spacing: 0.09em;
  }
  .urban .sec_catch_sub .minute {
    margin-top: calc((( 7 / var(--media_sp)) * 100) * var(--vw));
    margin-right: calc((( 6 / var(--media_sp)) * 100) * var(--vw));
    font-size: calc((( 20 / var(--media_sp)) * 100) * var(--vw));
    letter-spacing: 0.05em;
    text-align: right;
  }
  .urban .img-wrap.img01 {
    margin-top: calc((( 121 / var(--media_sp)) * 100) * var(--vw));
    grid-column: 1 / 15;
  }
  .urban .txt-wrap.txt01 {
    margin-top: calc((( 132 / var(--media_sp)) * 100) * var(--vw));
    grid-column: 3 / 17;
    align-self: center;
  }
  .urban .img-wrap.img02 {
    margin-top: calc((( 134 / var(--media_sp)) * 100) * var(--vw));
    grid-column: 9 / 17;
  }
  .urban .img-wrap.img03 {
    margin-top: calc((( 149 / var(--media_sp)) * 100) * var(--vw));
    grid-column: 3 / 13;
  }
  .urban .lnk-wrap.lnk-access {
    margin-top: calc((( 125 / var(--media_sp)) * 100) * var(--vw));
    grid-column: 5 / 13;
  }
  .urban .txt-wrap.txt02 {
    margin-top: calc((( 133 / var(--media_sp)) * 100) * var(--vw));
    grid-row: 8 / 9;
    grid-column: 3 / 17;
    align-self: center;
  }
  .urban .img-wrap.img04 {
    margin-top: calc((( 198 / var(--media_sp)) * 100) * var(--vw));
    grid-column: 3 / 17;
  }
  .urban .img-wrap.img05 {
    margin-top: calc((( 134 / var(--media_sp)) * 100) * var(--vw));
    grid-column: 1 / 12;
  }
  .urban .img-wrap.img06 {
    margin-top: calc((( 150 / var(--media_sp)) * 100) * var(--vw));
    grid-column: 9 / 15;
  }
  .urban .lnk-wrap.lnk-location {
    margin-top: calc((( 115 / var(--media_sp)) * 100) * var(--vw));
    grid-column: 5 / 13;
  }
}
/* urban */

/* front */
.front .sec_visual {
  width: 100%;
}
.front .sec_catch sup {
  font-size: 0.3em;
  vertical-align: text-top;
}
@media screen and (min-width:769px) {
  .front .sec_visual {
    /* background: url(/content/dam/31sumai/mfr/K2201/assets/img/top/front_bg_pc.jpg) no-repeat center top/cover; */
    aspect-ratio: 16 / 9;
    padding-top: 46.438%;
  }
  .front .sec_ttl {
    margin-inline: auto 3.5%;
    width: 29%;
  }
  .front .sec_cont-wrap {
    padding-block: 121px 198px;
  }
  .front .sec_catch {
    letter-spacing: 0.09em;
    text-indent: 0.55em;
  }
  .front .sec_catch sup {
    margin-left: -1em;
  }
  .front .sec_catch_sub {
    margin-top: 39px;
  }
  .front .sub_ttl-front {
    margin-bottom: 42px;
    width: 240px;
  }
  .front .sub_ttl-legacy {
    margin-bottom: 33px;
    width: 88px;
  }
  .front .img-wrap.img01 {
    margin-top: 118px;
    grid-column: 1 / 8;
  }
  .front .txt-wrap.txt01 {
    margin-top: 132px;
    grid-column: 9 / 13;
    align-self: center;
  }
  .front .img-wrap.img02 {
    margin-top: 100px;
    grid-row: 3 / 4;
    grid-column: 9 / 13;
  }
  .front .img-wrap.img03 {
    margin-top: calc(100px + 177px);
    grid-row: 3 / 4;
    grid-column: 2 / 7;
  }
  .front .txt-wrap.txt02 {
    margin-top: 175px;
    grid-column: 1 / 6;
    align-self: center;
  }
  .front .img-wrap.img04 {
    margin-top: 160px;
    grid-column: 6 / 13;
  }
  .front .img-wrap.img05 {
    margin-top: 149px;
    grid-row: 5 / 6;
    grid-column: 1 / 7;
  }
  .front .img-wrap.img06 {
    grid-row: 5 / 6;
    margin-top: calc(149px + 379px);
    grid-column: 9 / 13;
  }
  .front .lnk-wrap.lnk-front {
    margin-top: calc(149px + 584px);
    grid-row: 5 / 6;
    grid-column: 1 / 4;
  }
  .front .lnk-wrap.lnk-front a {
    grid-template-columns: 1fr 55px;
  }
  .front .lnk-wrap.lnk-front a .txt {
    grid-column:  1 / 3;
  }
}
@media screen and (max-width:768px) {
  .front .sec_visual {
    /* background: url(/content/dam/31sumai/mfr/K2201/assets/img/top/front_bg_sp.jpg) no-repeat center top/cover; */
    aspect-ratio: 1 / 1.5;
    padding-top: 127.067%;
  }
  .front .sec_ttl {
    margin-inline: 6.533% auto;
    width: 73.067%;
  }
  .front .sec_cont-wrap {
    padding-block: calc((( 146 / var(--media_sp)) * 100) * var(--vw)) calc((( 200 / var(--media_sp)) * 100) * var(--vw));
  }
  .front .sec_catch {
    letter-spacing: 0.09em;
    text-indent: 0.38em;
  }
  .front .sec_catch sup {
    margin-left: calc((( -23 / var(--media_sp)) * 100) * var(--vw));
    font-size: 0.4em;
    letter-spacing: -0.01em;
  }
  .front .sec_catch_sub {
    margin-top: calc((( 48 / var(--media_sp)) * 100) * var(--vw));
    letter-spacing: 0.15em;
  }
  .front .sub_ttl-front {
    margin-bottom: calc((( 30 / var(--media_sp)) * 100) * var(--vw));
    width: calc((( 288 / var(--media_sp)) * 100) * var(--vw));
  }
  .front .sub_ttl-legacy {
    margin-bottom: calc((( 20 / var(--media_sp)) * 100) * var(--vw));
    width: calc((( 106 / var(--media_sp)) * 100) * var(--vw));
  }
  .front .img-wrap.img01 {
    margin-top: calc((( 147 / var(--media_sp)) * 100) * var(--vw));
    grid-column: 1 / 15;
  }
  .front .txt-wrap.txt01 {
    margin-top: calc((( 140 / var(--media_sp)) * 100) * var(--vw));
    grid-column: 3 / 15;
    align-self: center;
  }
  .front .img-wrap.img02 {
    margin-top: calc((( 134 / var(--media_sp)) * 100) * var(--vw));
    grid-column: 9 / 17;
  }
  .front .img-wrap.img03 {
    margin-top: calc((( 148 / var(--media_sp)) * 100) * var(--vw));
    width: calc((( 500 / var(--media_sp)) * 100) * var(--vw));
    grid-column: 1 / 12;
  }
  .front .txt-wrap.txt02 {
    margin-top: calc((( 150 / var(--media_sp)) * 100) * var(--vw));
    grid-row: 7 / 8;
    grid-column: 3 / 15;
    align-self: center;
  }
  .front .img-wrap.img04 {
    margin-top: calc((( 150 / var(--media_sp)) * 100) * var(--vw));
    grid-row: 6 / 7;
    grid-column: 3 / 17;
  }
  .front .img-wrap.img05 {
    margin-top: calc((( 130 / var(--media_sp)) * 100) * var(--vw));
    grid-column: 1 / 12;
  }
  .front .img-wrap.img06 {
    margin-top: calc((( 150 / var(--media_sp)) * 100) * var(--vw));
    grid-column: 9 / 15;
  }
  .front .lnk-wrap.lnk-front {
    margin-top: calc((( 115 / var(--media_sp)) * 100) * var(--vw));
    grid-column: 5 / 13;
  }
  .front .lnk-wrap.lnk-front a {
    grid-template-columns: 1fr calc((( 55 / var(--media_sp)) * 100) * var(--vw));
  }
  .front .lnk-wrap.lnk-front a .txt {
    grid-column:  1 / 3;
  }
}
/* front */

/* design */
.design .sec_visual {
  width: 100%;
}
@media screen and (min-width:769px) {
  .design .sec_visual {
    /* background: url(/content/dam/31sumai/mfr/K2201/assets/img/top/design_bg_pc.jpg) no-repeat center top/cover; */
    aspect-ratio: 16 / 9;
    padding-top: 46.375%;
  }
  .design .sec_ttl {
    width: 17.313%;
    margin-left: 4.875%;
  }
  .design .sec_cont-wrap {
    padding-block: 121px 240px;
  }
  .design .sec_catch {
    letter-spacing: 0.12em;
    text-indent: 0.3em;
  }
  .design .sec_catch_sub {
    margin-top: 39px;
  }
  .design .img-wrap.img01 {
    margin-top: 121px;
    grid-column: 1 / 8;
  }
  .design .txt-wrap.txt01 {
    margin-top: 121px;
    grid-column: 9 / 13;
    align-self: center;
  }
  .design .img-wrap.img02 {
    margin-top: 100px;
    grid-row: 3 / 4;
    grid-column: 9 / 13;
  }
  .design .img-wrap.img03 {
    margin-top: calc(100px + 177px);
    grid-row: 3 / 4;
    grid-column: 2 / 7;
  }
  .design .lnk-wrap.lnk-design {
    margin-top: calc(100px + 276px + 175px);
    grid-row: 3 / 4;
    grid-column: 10 / 13;
  }
  .design .txt-wrap.txt02 {
    margin-top: 270px;
    grid-column: 1 / 6;
    align-self: center;
  }
  .design .img-wrap.img04 {
    margin-top: 270px;
    grid-column: 6 / 13;
  }
  .design .img-wrap.img05 {
    grid-row: 5 / 6;
    margin-top: 151px;
    grid-column: 1 / 8;
  }
  .design .img-wrap.img06 {
    grid-row: 5 / 6;
    margin-top: calc(151px + 482px + 131px);
    grid-column: 6 / 13;
  }
  .design .lnk-wrap.lnk-commonArea {
    margin-top: calc(151px + 584px);
    grid-row: 5 / 6;
    grid-column: 1 / 4;
  }
}
@media screen and (max-width:768px) {
  .design .sec_visual {
    /* background: url(/content/dam/31sumai/mfr/K2201/assets/img/top/design_bg_sp.jpg) no-repeat center top/cover; */
    aspect-ratio: 1 / 1.5;
    padding-top: 128.533%;
  }
  .design .sec_ttl {
    width: 43.733%;
    margin-left: 6.533%;
  }
  .design .sec_cont-wrap {
    padding-block: calc((( 147 / var(--media_sp)) * 100) * var(--vw)) calc((( 200 / var(--media_sp)) * 100) * var(--vw));
  }
  .design .sec_catch {
    letter-spacing: 0.12em;
    text-indent: 0.3em;
  }
  .design .sec_catch_sub {
    margin-top: calc((( 47 / var(--media_sp)) * 100) * var(--vw));
  }
  .design .img-wrap.img01 {
    margin-top: calc((( 148 / var(--media_sp)) * 100) * var(--vw));
    grid-column: 1 / 15;
  }
  .design .txt-wrap.txt01 {
    margin-top: calc((( 132 / var(--media_sp)) * 100) * var(--vw));
    grid-column: 3 / 15;
    align-self: center;
  }
  .design .img-wrap.img02 {
    margin-top: calc((( 130 / var(--media_sp)) * 100) * var(--vw));
    grid-column: 9 / 17;
  }
  .design .img-wrap.img03 {
    margin-top: calc((( 149 / var(--media_sp)) * 100) * var(--vw));
    width: calc((( 670 / var(--media_sp)) * 100) * var(--vw));
    grid-column: 1 / 15;
  }
  .design .lnk-wrap.lnk-design {
    margin-top: calc((( 127 / var(--media_sp)) * 100) * var(--vw));
    grid-column: 5 / 13;
  }
  .design .txt-wrap.txt02 {
    margin-top: calc((( 130 / var(--media_sp)) * 100) * var(--vw));
    grid-row: 6 / 7;
    grid-column: 3 / 15;
    align-self: center;
  }
  .design .img-wrap.img04 {
    margin-top: calc((( 200 / var(--media_sp)) * 100) * var(--vw));
    grid-row: 7 / 8;
    grid-column: 3 / 17;
  }
  .design .img-wrap.img05 {
    margin-top: calc((( 130 / var(--media_sp)) * 100) * var(--vw));
    width: calc((( 670 / var(--media_sp)) * 100) * var(--vw));
    grid-column: 1 / 15;
  }
  .design .img-wrap.img06 {
    margin-top: calc((( 151 / var(--media_sp)) * 100) * var(--vw));
    width: calc((( 670 / var(--media_sp)) * 100) * var(--vw));
    grid-column: 3 / 17;
  }
  .design .lnk-wrap.lnk-commonArea {
    margin-top: calc((( 115 / var(--media_sp)) * 100) * var(--vw));
    grid-column: 5 / 13;
  }
}
/* design */

/* view */
.view .sec_visual {
  width: 100%;
}

.view_tab_panel-container {
  position: relative;
}

/* plan */
.top_plan {
  position: relative;
}
.top_plan-container {
  position: relative;
}
.top_plan_btn-wrap {
  margin-inline: auto;
}
.top_plan_btn {
  background-color: #eeeeee;
  display: grid;
  place-items: center;
  transition: background-color .4s;
}
.top_plan_btn_txt {
  line-height: 1;
  color: #000;
  transition: color .4s;
}
.top_plan_btn.current {
  cursor: auto;
  pointer-events: none;
}
.top_plan_btn.current,
.top_plan_btn:hover {
  background-color: #25688d;
  opacity: 1;
}
.top_plan_btn.executive.current,
.top_plan_btn.executive:hover {
  background-color: #4a8c4a;
  opacity: 1;
}
.top_plan_btn.premium.current,
.top_plan_btn.premium:hover {
  background-color: #93865c;
  opacity: 1;
}
.top_plan_btn.current .top_plan_btn_txt,
.top_plan_btn:hover .top_plan_btn_txt {
  color: #fff;
}
.top_plan_panel-wrap {
  position: relative;
  margin-inline: auto;
}
.top_plan_panel {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  min-height: 632px;
  /* aspect-ratio: 1 / 0.933; */
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s, visibility .4s;
}
.top_plan_btn.current {
  opacity: 1;
  background-color: #25688d;
  color: #fff;
}
.top_plan_btn_txt {
  transition: color .4s;
}
.top_plan_btn .topPlan-cls-1 {
  transition: fill .4s;
  fill-rule: evenodd;
}
.top_plan_btn:hover .topPlan-cls-1,
.top_plan_btn.current .topPlan-cls-1 {
  fill: #fafdfd;
  fill-rule: evenodd;
}
.top_plan_panel.current {
  position: static;
  opacity: 1;
  visibility: visible;
}
.top_plan_spec-ttl-wrap {
  border-bottom: 1px solid #000;
}
.top_plan_fig {
  width: 100%;
}
.top_plan_panel_notes-wrap {
  margin-inline: auto;
}
.top_plan_nav-wrap {
  position: absolute;
  left: 0;
  right: 0;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-inline: auto;
  width: 100%;
  user-select: none;
}
.top_plan_nav_prev.disable,
.top_plan_nav_next.disable {
  opacity: .35;
  pointer-events: none;
}
.plan_lnk-wrap {
  margin-inline: auto;
}
.top_plan .lnk-wrap a {
  display: grid;
  align-items: center;
  border-radius: 100vmax;
  background: linear-gradient(to right, #38de91, #0d94d3) 120% 100%;
  color: #fff;
}
.top_plan .lnk-wrap a .txt {
  grid-column: 2 / 3;
  color: #fff;
}
.top_plan .lnk-wrap a .arw {
  grid-column: 3 / 4;
}
@media screen and (min-width:769px) {
  .view .sec_visual {
    /* background: url(/content/dam/31sumai/mfr/K2201/assets/img/top/view_bg_pc.jpg) no-repeat center top/cover; */
    aspect-ratio: 16 / 7;
    padding-top: 4.938%;
  }
  .view .sec_ttl {
    margin-inline: auto 4.938%;
    width: 27.563%;
  }
  .view .sec_cont-wrap {
    padding-block: 121px 146px;
  }
  .view .sec_catch_sub {
    margin-top: 41px;
  }
  .view .img-wrap.img01 {
    margin-top: 119px;
    grid-column: 1 / 8;
  }
  .view .txt-wrap.txt01 {
    margin-top: 119px;
    grid-column: 9 / 13;
    align-self: center;
  }
  .view .img-wrap.img02 {
    margin-top: 130px;
    grid-row: 3 / 4;
    grid-column: 6 / 13;
  }
  .view .img-wrap.img03 {
    margin-top: calc(101px + 190px);
    grid-row: 3 / 4;
    grid-column: 2 / 7;
  }
  .view .lnk-wrap.lnk-view {
    margin-top:  calc(174px + 223px + 107px);
    grid-row: 3 / 4;
    grid-column: 10 / 13;
  }
  .top_plan {
    /* margin-top: 236px; */
    grid-column: 1 / 13;
  }
  .top_plan .sec_visual {
    aspect-ratio: 16 / 9;
    padding-top: 5%;
  }
  .top_plan .sec_ttl {
    margin-inline: auto 5%;
    width: 11.0625%;
  }
  .top_plan .sec_cont-container {
    display: block;
    padding-bottom: 140px;
  }
  .top_plan .hgroup {
    margin-top: 130px;
    grid-column: 1 / 13;
  }
  .top_plan_ttl {
    margin-inline: auto;
    width: 57px;
  }
  .top_plan_txt {
    margin-top: 52px;
    font-size: 42px;
    letter-spacing: 0.05em;
    line-height: 1;
    text-align: center;
  }
  .top_plan-container {
    grid-column: 1 / 13;
  }
  .top_plan_btn-wrap {
    margin-top: 120px;
    max-width: 1000px;
    width: 83.333%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 20px;
  }
  .top_plan_btn {
    align-content: center;
    padding-inline: 20px;
    height: 140px;
  }
  .top_plan_btn_txt {
    border-top: 1px solid #b2b2b2;
    transition: border-color .4s, color .4s;
    padding-top: 20px;
    width: 100%;
    font-size: 24px;
    letter-spacing: 0.05em;
  }
  .top_plan_btn:hover .top_plan_btn_txt,
  .top_plan_btn.current .top_plan_btn_txt {
    border-color: #ffffff;
  }
  .top_plan_btn_txt-type {
    margin-left: 0.25em;
    font-size: 15px;
  }
  .top_plan_btn .topPlan-cls-1 {
    transition: fill .4s;
    fill-rule: evenodd;
  }
  .top_plan_btn:hover .topPlan-cls-1,
  .top_plan_btn.current .topPlan-cls-1 {
    fill: #fafdfd;
    fill-rule: evenodd;
  }
  
  .top_plan_btn.standard-superior .top_plan_btn_grade {width: 211px; padding-bottom: 10px;}
  .top_plan_btn.executive .top_plan_btn_grade {width: 104px; padding-bottom: 20px;}
  .top_plan_btn.premium .top_plan_btn_grade {width: 100px; padding-bottom: 20px;}
  .top_plan_panel-wrap {
    max-width: 1000px;
    width: 83.333%;
  }
  .top_plan_panel_legend {
    width: 150px;
  }
  .top_plan_spec-ttl-wrap {
    padding-block: 58px 13px;
  }
  .top_plan_spec-ttl {
    display: inline-block;
    font-size: 44px;
    letter-spacing: normal;
    line-height: 1;
  }
  .top_plan_spec-ttl small {
    margin-left: 0.25em;
    font-size: 25px;
    letter-spacing: 0.05em;
  }
  .top_plan_spec-txt {
    display: inline-block;
    margin-left: 1.25em;
    font-size: 27px;
    line-height: 1;
  }
  .top_plan_spec-txt small {
    font-size: 19px;
    letter-spacing: 0.02em;
  }
  .top_plan_spec-detail {
    padding-block: 18px 50px;
  }
  .top_plan_spec-floor_area {
    font-size: 38px;
    letter-spacing: 0.025em;
    line-height: 1;
  }
  .top_plan_spec-floor_area .sub {
    font-size: 25px;
    line-height: 1;
  }
  .top_plan_spec-floor_area small {
    font-size: 14px;
    line-height: 1;
  }
  .top_plan_spec_area {
    margin-top: 10px;
    font-size: 15px;
    letter-spacing: 0.025em;
    line-height: 1;
  }
  .top_plan_nav-wrap {
    top: min(675px, 42.1875vw);
    max-width: 1200px;
  }
  .top_plan_nav_prev {
    display: block;
    aspect-ratio: 1 / 1;
    width: 40px;
    height: auto;
  }
  .top_plan_nav_next {
    display: block;
    margin-left: auto;
    aspect-ratio: 1 / 1;
    width: 40px;
    height: auto;
  }
  
  .top_plan_panel_notes-wrap {
    margin-top: 70px;
    box-sizing: content-box;
    padding-inline: 20px;
    max-width: 1000px;
  }
  .top_plan_panel_notes {
    margin-top: 5px;
  }
  .top_plan_panel_notes .notes_txt {
    font-size: 12px;
    line-height: 1.666;
  }
  .plan_lnk-wrap {
    margin-top: 63px;
    width: 300px;
  }
  .top_plan .lnk-wrap a {
    grid-template-columns: 45px auto 45px;
    height: 70px;
  }
  .top_plan .lnk-wrap a .txt {
    text-align: center;
    font-size: 19px;
    letter-spacing: 0.1em;
    line-height: 1;
  }
  .top_plan .lnk-wrap a .arw {
    margin-right: 22px;
    width: 23px;
    height: 23px;
  }
}
@media screen and (max-width:768px) {
  .view .sec_visual {
    /* background: url(/content/dam/31sumai/mfr/K2201/assets/img/top/view_bg_sp.jpg) no-repeat center top/cover; */
    aspect-ratio: 1 / 1;
    padding-top: 10.8%;
  }
  .view .sec_ttl {
    width: 69.6%;
    margin-inline: auto;
  }
  .view .sec_cont-wrap {
    padding-block: calc((( 148 / var(--media_sp)) * 100) * var(--vw)) calc((( 155 / var(--media_sp)) * 100) * var(--vw));
  }
  .view .sec_catch_sub {
    margin-top: calc((( 46 / var(--media_sp)) * 100) * var(--vw));
  }
  .view .img-wrap.img01 {
    margin-top: calc((( 148 / var(--media_sp)) * 100) * var(--vw));
    grid-column: 1 / 15;
  }
  .view .txt-wrap.txt01 {
    margin-top: calc((( 130 / var(--media_sp)) * 100) * var(--vw));
    grid-column: 3 / 15;
  }
  .view .img-wrap.img02 {
    margin-top: calc((( 135 / var(--media_sp)) * 100) * var(--vw));
    width: calc((( 670 / var(--media_sp)) * 100) * var(--vw));
    justify-self: end;
    grid-column: 3 / 17;
  }
  .view .img-wrap.img03 {
    margin-top: calc((( 149 / var(--media_sp)) * 100) * var(--vw));
    grid-column: 3 / 13;
  }
  .view .lnk-wrap.lnk-view {
    margin-top: calc((( 115 / var(--media_sp)) * 100) * var(--vw));
    grid-column: 5 / 13;
  }
  .top_plan {
    /* margin-top: calc((( 200 / var(--media_sp)) * 100) * var(--vw)); */
    grid-column: 1 / 17;
  }
  .top_plan .sec_visual {
    aspect-ratio: 1 / 1.5;
    padding-top: 6.666%;
  }
  .top_plan .sec_ttl {
    margin-inline: auto 6.666%;
    width: 27.866%;
  }
  .top_plan .sec_cont-container {
    display: block;
    padding-bottom: calc((( 140 / var(--media_sp)) * 100) * var(--vw));
  }
  .top_plan .hgroup {
    grid-column: 1 / 17;
  }
  .top_plan_ttl {
    margin-inline: auto;
    width: calc((( 68 / var(--media_sp)) * 100) * var(--vw));
  }
  .top_plan_txt {
    margin-top: calc((( 130 / var(--media_sp)) * 100) * var(--vw));
    font-size: calc((( 52 / var(--media_sp)) * 100) * var(--vw));
    letter-spacing: 0.05em;
    line-height: 1.615;
    text-align: center;
  }
  .top_plan-container {
    grid-column: 1 / 17;
  }
  .top_plan_btn-wrap {
    margin-top: calc((( 135 / var(--media_sp)) * 100) * var(--vw));
    width: 100%;
    display: block;
  }
  .top_plan_btn-wrap > * + * {
    margin-top: calc((( 10 / var(--media_sp)) * 100) * var(--vw));
  }
  .top_plan_btn {
    margin-inline: auto;
    padding-inline: calc((( 30 / var(--media_sp)) * 100) * var(--vw));
    width: 93.333%;
    height: calc((( 80 / var(--media_sp)) * 100) * var(--vw));
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .top_plan_btn_txt {
    font-size: calc((( 30 / var(--media_sp)) * 100) * var(--vw));
    letter-spacing: 0.05em;
  }
  .top_plan_btn_txt-type {
    margin-left: 0.25em;
    font-size: calc((( 20 / var(--media_sp)) * 100) * var(--vw));
  }
  .top_plan_btn_grade {
    display: block;
    order: 2;
  }
  .top_plan_btn.standard-superior .top_plan_btn_grade {width: calc((( 211 / var(--media_sp)) * 100) * var(--vw));}
  .top_plan_btn.executive .top_plan_btn_grade {width: calc((( 104 / var(--media_sp)) * 100) * var(--vw));}
  .top_plan_btn.premium .top_plan_btn_grade {width: calc((( 100 / var(--media_sp)) * 100) * var(--vw));}
  .top_plan_panel {
    min-height: auto;
  }
  .top_plan_panel-wrap {
    margin-top: 0;
    margin-inline: auto;
    width: 100%;
  }
  .top_plan_panel_legend {
    width: calc((( 250 / var(--media_sp)) * 100) * var(--vw));
  }
  .top_plan_spec-ttl-wrap {
    padding-block: calc((( 60 / var(--media_sp)) * 100) * var(--vw)) calc((( 23 / var(--media_sp)) * 100) * var(--vw));
    width: 93.333%;
    margin-inline: auto;
  }
  .top_plan_spec-ttl {
    font-size: calc((( 60 / var(--media_sp)) * 100) * var(--vw));
    letter-spacing: 0.025em;
    line-height: 1;
  }
  .top_plan_spec-ttl small {
    font-size: calc((( 28 / var(--media_sp)) * 100) * var(--vw));
    letter-spacing: 0.05em;
  }
  .top_plan_spec-txt {
    margin-top: calc((( 18 / var(--media_sp)) * 100) * var(--vw));
    font-size: calc((( 40 / var(--media_sp)) * 100) * var(--vw));
    line-height: 1;
  }
  .top_plan_spec-txt small {
    font-size: calc((( 28 / var(--media_sp)) * 100) * var(--vw));
    letter-spacing: 0.02em;
  }
  .top_plan_spec-detail {
    width: 93.333%;
    margin-inline: auto;
    padding-block: calc((( 22 / var(--media_sp)) * 100) * var(--vw)) calc((( 49 / var(--media_sp)) * 100) * var(--vw));
  }
  .top_plan_spec-floor_area {
    font-size: calc((( 50 / var(--media_sp)) * 100) * var(--vw));
    letter-spacing: 0.025em;
    line-height: 1;
  }
  .top_plan_spec-floor_area .sub {
    font-size: calc((( 24 / var(--media_sp)) * 100) * var(--vw));
    line-height: 1;
  }
  .top_plan_spec-floor_area small {
    font-size: calc((( 24 / var(--media_sp)) * 100) * var(--vw));
    line-height: 1;
  }
  .top_plan_spec_area {
    margin-top: calc((( 26 / var(--media_sp)) * 100) * var(--vw));
    font-size: calc((( 24 / var(--media_sp)) * 100) * var(--vw));
    letter-spacing: 0.025em;
    line-height: 1;
  }
  .top_plan_nav-wrap {
    position: relative;
    margin-top: calc((( 50 / var(--media_sp)) * 100) * var(--vw));
    margin-inline: auto;
    width: calc((( 140 / var(--media_sp)) * 100) * var(--vw));
  }
  .top_plan_nav_prev {
    display: block;
    aspect-ratio: 1 / 1;
    width: calc((( 40 / var(--media_sp)) * 100) * var(--vw));
    height: auto;
  }
  .top_plan_nav_next {
    display: block;
    margin-left: auto;
    aspect-ratio: 1 / 1;
    width: calc((( 40 / var(--media_sp)) * 100) * var(--vw));
    height: auto;
  }
  .top_plan_nav_prev:hover,
  .top_plan_nav_next:hover {
    opacity: 1;
  }
  .top_plan_nav_prev:hover.disable,
  .top_plan_nav_next:hover.disable {
    opacity: .35;
    pointer-events: none;
  }
  .top_plan_panel_notes-wrap {
    margin-top: calc((( 50 / var(--media_sp)) * 100) * var(--vw));
    padding-inline: 3.333%;
  }
  .top_plan_panel_notes {
    margin-top: calc((( 14 / var(--media_sp)) * 100) * var(--vw));
  }
  .top_plan_panel_notes .notes_txt {
    padding-left: 1em;
    text-indent: -1em;
    font-size: calc((( 20 / var(--media_sp)) * 100) * var(--vw));
    line-height: 1.5;
  }
  .plan_lnk-wrap {
    margin-top: calc((( 105 / var(--media_sp)) * 100) * var(--vw));
    width: calc((( 390 / var(--media_sp)) * 100) * var(--vw));
  }
  .top_plan .lnk-wrap a {
    grid-template-columns: calc((( 45 / var(--media_sp)) * 100) * var(--vw)) auto calc((( 45 / var(--media_sp)) * 100) * var(--vw));
    height: calc((( 80 / var(--media_sp)) * 100) * var(--vw));
  }
  .top_plan .lnk-wrap a .txt {
    font-size: calc((( 26 / var(--media_sp)) * 100) * var(--vw));
    letter-spacing: 0.15em;
    line-height: 1;
    text-align: center;
  }
  .top_plan .lnk-wrap a .arw {
    margin-right: calc((( 22 / var(--media_sp)) * 100) * var(--vw));
    width: calc((( 23 / var(--media_sp)) * 100) * var(--vw));
    height: calc((( 23 / var(--media_sp)) * 100) * var(--vw));
  }
}

/* view plan fig size */
.top_plan_panel .top_plan_fig-wrap img {margin-inline: auto;}
.top_plan_panel.S-74J .top_plan_fig-wrap img {width: 72.9%;}
.top_plan_panel.E-89O .top_plan_fig-wrap img {width: 80.6%;}
.top_plan_panel.E-101R .top_plan_fig-wrap img {width: 80.6%;}
.top_plan_panel.P-125A .top_plan_fig-wrap img {width: 97.2%;}
.top_plan_panel.P-156C .top_plan_fig-wrap img {width: 99.4%;}
@media screen and (max-width:768px) {
  .top_plan_panel.S-74J .top_plan_fig-wrap img {width: calc((( 700 / var(--media_sp)) * 100) * var(--vw));}
  .top_plan_panel.E-89O .top_plan_fig-wrap img {width: calc((( 700 / var(--media_sp)) * 100) * var(--vw));}
  .top_plan_panel.E-101R .top_plan_fig-wrap img {width: calc((( 700 / var(--media_sp)) * 100) * var(--vw));}
  .top_plan_panel.P-125A .top_plan_fig-wrap img {width: calc((( 700 / var(--media_sp)) * 100) * var(--vw));}
  .top_plan_panel.P-156C .top_plan_fig-wrap img {width: calc((( 700 / var(--media_sp)) * 100) * var(--vw));}
}
/* view plan fig size */

/* view tab section */
.view_tab-section {
  padding-bottom: 204px;
  grid-column:  1 / 13;
}
.view_tab_ttl {
  margin-inline: auto;
  width: 66px;
}
.view_tab_txt {
  margin-top: 52px;
  font-size: 30px;
  line-height: 1;
  text-align: center;
}
@media screen and (max-width:768px) {
  .view_tab_ttl {
    width: calc((( 79 / var(--media_sp)) * 100) * var(--vw));
  }
  .view_tab_txt {
    margin-top: calc((( 49 / var(--media_sp)) * 100) * var(--vw));
    font-size: calc((( 30 / var(--media_sp)) * 100) * var(--vw));
  }
}

.view_tab_btn-wrap {
  position: relative;
  max-width: 1200px;
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  align-items: start;
}
@media screen and (min-width:769px) {
  .view_tab_btn-wrap {
    margin-top: 70px;
    padding-inline: 20px;
    box-sizing: content-box;
  }
}
@media screen and (max-width:768px) {
  .view_tab_btn-wrap {
    margin-top: calc((( 56 / var(--media_sp)) * 100) * var(--vw));
  }
}
.view_tab_btn {
  position: relative;
  width: 31.666%;
  padding-block: 26px;
  background-color: #dfeef2;
  transition: background-color 0.4s;
}
.view_tab_panel-container {
  margin-top: 47px;
}

.view_tab_panel-wrap {
  position: relative;
  width: 100%;
  min-height: 700px;
  /* aspect-ratio: 1 / 0.4375; */
}
.view_tab-panel-inner {
  position: relative;
  width: 100%;
  height: 700px;
  overflow-y: hidden;
  overflow-x: auto;
  scrollbar-width: none;
  --webkit-scrollbar-width: none;
  cursor: move;
}
.view_tab-panel-inner::-webkit-scrollbar {
  display: none;
}
.view_tab-panel_scroll-container {
  position: absolute;
  width: 3600px;
  height: auto;
  pointer-events: none;
}
.view_tab-29fN .view_tab-panel_scroll-container {
  position: absolute;
  width: 3600px;
  height: auto;
  pointer-events: none;
}
.view_tab_panel.view_soon::before {
  display: block;
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  margin: auto;
  background-color: #000;
  opacity: 0.4;
  width: 100%;
  height: 100%;
}
.view_tab_panel.view_soon::after {
  display: block;
  content: "夜景に差し替え";
  position: absolute;
  z-index: 2;
  inset: 0;
  margin: auto;
  padding: 18px 118px;
  width: fit-content;
  height: fit-content;
  font-size: 22.6px;
  color: #000;
  background-color: #fff;
}
.view_tab-panel_scroll-container img {
  width: 3600px;
  height: auto;
  pointer-events: none;
}
.view_tab-29fN .view_tab-panel_scroll-container img {
  max-width: 4857.5px;
  width: 4857.5px;
  height: auto;
  pointer-events: none;
}
.view_tab_panel {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  /* aspect-ratio: 1 / 0.933; */
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s, visibility .4s;
  user-select: none;
  -webkit-user-select: none;
}
.view_tab_panel.current {
  opacity: 1;
  visibility: visible;
}
.view_tab_panel-container .tab_panel_nav {
  position: absolute;
  z-index: 1;
  top: 50%;
  translate: 0 -50%;
  display: block;
  width: 60px;
  height: 60px;
  cursor: pointer;
  transform-origin: center;
  transition: scale .3s;
}
.view_tab_panel-container .tab_panel_nav:hover {
  scale: 1.25;
}
.view_tab_btn_txt {
  font-size: 24px;
  letter-spacing: 0.1em;
  line-height: 1;
  text-align: center;
  color: #25688d;
  transition: color 0.4s;
}
.view_tab_btn_txt small {
  font: inherit;
}
.view_tab_btn_arrow {
  background: url(/content/dam/31sumai/mfr/K2201/assets/img/view/tab_arrow.png) no-repeat center center/cover;
  position: absolute;
  display: block;
  width: 23px;
  height: 23px;
  top: 50%;
  translate: 0 -50%;
  right: 20px;
}
.view_tab_btn:hover,
.view_tab_btn.current {
  opacity: 1;
  background-color: #25688d;
}
.view_tab_btn:hover .view_tab_btn_txt,
.view_tab_btn.current .view_tab_btn_txt {
  opacity: 1;
  line-height: 1;
  text-align: center;
  color: #dfeef2;
}
.view_tab_btn:hover .view_tab_btn_arrow,
.view_tab_btn.current .view_tab_btn_arrow {
  background: url(/content/dam/31sumai/mfr/K2201/assets/img/view/tab_arrow_current.png) no-repeat center center/cover;
  position: absolute;
  display: block;
  top: 50%;
  translate: 0 -50%;
  right: 20px;
}


.tab_panel_nav-prev {
  left: 40px;
}
.tab_panel_nav-next {
  right: 40px;
}
.tab_panel_nav-circle {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 100vmax;
  background-color: #fff;
  opacity: 0.8;
}
.tab_panel_nav-prev::after,
.tab_panel_nav-next::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  margin: auto;
  transform-origin: center;
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  border-top: 2px solid #25688d;
  border-left: 2px solid #25688d;
}
.tab_panel_nav-prev::after {
  rotate: -45deg;
  translate: 25% 0;
}
.tab_panel_nav-next::after {
  translate: -25% 0;
  rotate: -225deg;
}
@media screen and (max-width:768px) {
  .view_tab-section {
    padding-bottom: calc((( 196 / var(--media_sp)) * 100) * var(--vw));
    grid-column:  1 / 73;
  }
  .view_tab_btn-wrap {
    margin-top: calc((( 56 / var(--media_sp)) * 100) * var(--vw));
    width: 93.333%;
    margin-inline: auto;
    display: flex;
    justify-content: space-between;
    align-items: start;
  }
  .view_tab_btn {
    position: relative;
    width: 31.428%;
    padding-block: calc((( 26 / var(--media_sp)) * 100) * var(--vw));
    background-color: #dfeef2;
    transition: background-color 0.4s;
  }
  .view_tab_panel-container {
    margin-top: calc((( 26 / var(--media_sp)) * 100) * var(--vw));
  }
  .view_tab-panel-inner {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 0.933;
    overflow-x: auto;
  }
  .view_tab-panel_scroll-container {
    position: absolute;
    width: auto;
    height: 100%;
  }
  .view_tab-panel_scroll-container img {
    max-width: none;
    width: auto;
    height: 100%;
  }
  .view_tab_btn_txt {
    font-size: calc((( 28 / var(--media_sp)) * 100) * var(--vw));
    letter-spacing: 0.1em;
    line-height: 1;
    text-align: center;
    color: #25688d;
    transition: color 0.4s;
  }
  .view_tab_btn.view_tab-29fD .view_tab_btn_txt,
  .view_tab_btn.view_tab-29fN .view_tab_btn_txt {
    padding-right: 1.1em;
  }
  .view_tab_btn_txt small {
    position: relative;
    top: -0.1em;
    font-size: calc((( 22 / var(--media_sp)) * 100) * var(--vw));
  }
  .view_tab_btn_arrow {
    position: absolute;
    display: block;
    width: calc((( 23 / var(--media_sp)) * 100) * var(--vw));
    height: calc((( 23 / var(--media_sp)) * 100) * var(--vw));
    top: 50%;
    translate: 0 -50%;
    right: calc((( 20 / var(--media_sp)) * 100) * var(--vw));
  }
  .view_tab_btn:hover,
  .view_tab_btn.current {
    opacity: 1;
    background-color: #25688d;
  }
  .view_tab_btn:hover .view_tab_btn_txt,
  .view_tab_btn.current .view_tab_btn_txt {
    opacity: 1;
    line-height: 1;
    text-align: center;
    color: #dfeef2;
  }
  .view_tab_btn:hover .view_tab_btn_arrow,
  .view_tab_btn.current .view_tab_btn_arrow {
    position: absolute;
    display: block;
    top: 50%;
    translate: 0 -50%;
    right: 20px;
  }
  .view_tab_panel-wrap {
    width: 100%;
    aspect-ratio: 1 / 0.933;
  }
  .view_tab_panel-container .tab_panel_nav {
    position: absolute;
    z-index: 1;
    top: 50%;
    translate: 0 -50%;
    display: block;
    width: calc((( 60 / var(--media_sp)) * 100) * var(--vw));
    height: calc((( 60 / var(--media_sp)) * 100) * var(--vw));
    cursor: pointer;
  }
  .tab_panel_nav-prev {
    left: calc((( 40 / var(--media_sp)) * 100) * var(--vw));
  }
  .tab_panel_nav-next {
    right: calc((( 40 / var(--media_sp)) * 100) * var(--vw));
  }
  .tab_panel_nav-circle {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 100vmax;
    background-color: #fff;
    opacity: 0.8;
  }
  .tab_panel_nav-prev::after,
  .tab_panel_nav-next::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    margin: auto;
    transform-origin: center;
    content: "";
    display: block;
    width: calc((( 20 / var(--media_sp)) * 100) * var(--vw));
    height: calc((( 20 / var(--media_sp)) * 100) * var(--vw));
    border-top: 2px solid #25688d;
    border-left: 2px solid #25688d;
  }
}
/* view tab section */ 
/* view */

/* foot entry */
.foot_entry {
  position: relative;
  background: linear-gradient(to bottom, #50778f, #25425f);
  padding-block: 145px 140px;
  z-index: 9;
}
.fEntry_ttl {
  color: #fff;
  font-size: 37px;
  letter-spacing: 0.25em;
  line-height: 1;
  text-align: center;
}
.foot_entry .entry_btn_copy {
  margin-top: 32px;
}
.fEntry_btn_inner {
  margin-top: 36px;
  margin-inline: auto;
}
.fEntry_btn_inner.lim {
  margin-top: 70px;
}
.entry_btn.fEntry_btn {
  margin-inline: auto;
  max-width: 600px;
  height: 90px;
}
.entry_btn.fEntry_btn .entry_btn_txt {
  font-size: 24px;
}
.entry_btn.fEntry_btn .entry_btn_arrow {
  right: 27px;
}
.fEntry_step-wrap {
  margin-top: 70px;
  background: url(/content/dam/31sumai/mfr/K2201/assets/img/top/foot_entry_step_bg_pc.png) no-repeat center center/cover;
  box-sizing: content-box;
  /* padding-inline: 40px; */
  max-width: 1000px;
  width: 100%;
  margin-inline: auto;
}
.fEntry_notes {
  margin-top: 64px;
  max-width: 1000px;
  margin-inline: auto;
  font-size: 12px;
  letter-spacing: 0.05em;
  line-height: 1.833;
  color: #fff;
}
@media screen and (max-width:768px) {
  .foot_entry {
    background: linear-gradient(to bottom, #50778f, #25425f);
    padding-block: calc((( 143 / var(--media_sp)) * 100) * var(--vw));
  }
  .fEntry_ttl {
    font-size: calc((( 48 / var(--media_sp)) * 100) * var(--vw));
    letter-spacing: 0.25em;
    line-height: 1;
    text-align: center;
  }
  .foot_entry .entry_btn_copy {
    margin-top: calc((( 38 / var(--media_sp)) * 100) * var(--vw));
  }
  .fEntry_btn_inner {
    margin-top: calc((( 36 / var(--media_sp)) * 100) * var(--vw));
    margin-inline: auto;
  }
  .fEntry_btn_inner.lim {
    margin-top: calc((( 70 / var(--media_sp)) * 100) * var(--vw));
  }
  .entry_btn.fEntry_btn {
    margin-inline: auto;
    height: calc((( 90 / var(--media_sp)) * 100) * var(--vw));
  }
  .entry_btn.fEntry_btn .entry_btn_txt {
    font-size: calc((( 26 / var(--media_sp)) * 100) * var(--vw));
  }
  .entry_btn.fEntry_btn .entry_btn_arrow {
    right: calc((( 27 / var(--media_sp)) * 100) * var(--vw));
  }
  .fEntry_step-wrap {
    background: url(/content/dam/31sumai/mfr/K2201/assets/img/top/foot_entry_step_bg_sp.png) no-repeat center center/cover;
    padding-inline: 0;
    width: 80%;
    max-width: 1000px;
  }
  .fEntry_notes {
    margin-top: calc((( 64 / var(--media_sp)) * 100) * var(--vw));
    width: 80%;
    margin-inline: auto;
    font-size: calc((( 20 / var(--media_sp)) * 100) * var(--vw));
    letter-spacing: 0.05em;
    line-height: 1.5;
    color: #fff;
  }
}
/* foot entry */


/* bels */
.bels_wrap {
  display: block;
  margin-bottom: 68px;
  width: 300px;
  margin-inline: auto;
}
@media screen and (max-width:768px) {
  .bels_wrap {
    display: block;
    width: calc((( 499 / var(--media_sp)) * 100) * var(--vw));
    /* margin-top: calc((( 100 / var(--media_sp)) * 100) * var(--vw)); */
    margin-bottom: calc((( 80 / var(--media_sp)) * 100) * var(--vw));
    margin-inline: auto;
  }
}
/* bels */

[data-fade="fade"],
[data-fade="fadeUp"],
[data-fade="ttl"],
[data-insert="ttl"] {
  opacity: 0;
}