:root {
  --main: #222223;
  --gry: #e0e0e0;
  --gray: #bcbcbc;
  --bk: #ffffff;
  --blk: #333333;
  --footer-bg: #e8e9e7;
  --band: #f0f1f0;
  --font-jp: "dnp-shuei-gothic-gin-std", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-en: "Jost", sans-serif;
  --w-l: 400;
  --w-m: 500;
  --w-b: 600;
  --base: 14px;
  --little: 11px;
  --h5: 43px;
  --h6: 34px;
  --ls-base: 0.0025px;
  --ls-lose: 0.5px;
}

@media (min-width: 768px) {
  .hero {
    position: relative;
    width: 100%;
    aspect-ratio: 1440/800;
    overflow: hidden;
  }
  .hero > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .site-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 32px 22px 24px;
  }
  .side-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 16px;
    text-align: right;
  }
  .side-nav ul {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
  }
  .side-nav a {
    font-family: var(--font-en);
    font-weight: 400;
    line-height: 1;
    display: block;
  }
  .side-nav .nav-lg {
    font-size: 12px;
    letter-spacing: 0.12px;
  }
  .side-nav .nav-sm {
    font-size: var(--little);
    letter-spacing: var(--ls-lose);
  }
  .side-nav .insta {
    display: block;
    line-height: 0;
  }
  .side-nav .insta svg {
    width: 10px;
    height: 10px;
  }
  .intro {
    position: relative;
    height: 1412px;
  }
  .intro .lead {
    position: absolute;
    left: 9.722%;
    top: 200px;
    line-height: 1.6;
    white-space: nowrap;
  }
  .intro .desc {
    position: absolute;
    left: 58.889%;
    top: 200px;
    width: 31.389%;
    gap: 64px;
    align-items: flex-end;
  }
  .intro .desc p {
    text-align: justify;
  }
  .intro .img-living {
    position: absolute;
    left: 0;
    top: 408px;
    width: 42.5%;
    height: 414px;
    object-fit: cover;
  }
  .intro .img-exterior {
    position: absolute;
    left: 58.889%;
    top: 742px;
    width: 23.194%;
    height: 460px;
    object-fit: cover;
    object-position: 6.7% 0;
  }
  .studio {
    margin-left: 9.722%;
    width: 88.889%;
    display: flex;
    flex-direction: column;
    gap: 116px;
  }
  .studio .sec-head .ttl {
    font-size: 23px;
    letter-spacing: 0.92px;
  }
  .studio-rows {
    display: flex;
    flex-direction: column;
    gap: 96px;
  }
  .studio-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  .studio-row + .studio-row {
    border-top: 1px solid var(--gry);
    padding-top: 79px;
  }
  .studio-row .col {
    display: flex;
    flex-direction: column;
    gap: 64px;
    height: 420px;
  }
  .studio-row .txt {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }
  .studio-row .room {
    font-family: var(--font-en);
    font-weight: 400;
    font-size: 18px;
    letter-spacing: 0.36px;
    line-height: 1;
  }
  .studio-row .body-txt {
    width: 334px;
  }
  .studio-row .ph {
    width: 63.125%;
    height: 420px;
    object-fit: cover;
  }
  .sea-wrap {
    margin-top: 216px;
    aspect-ratio: 1440/900;
    overflow: hidden;
  }
  .sea {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .access {
    position: relative;
    height: 1086px;
  }
  .access .sec-head {
    position: absolute;
    left: 9.722%;
    top: 240px;
  }
  .access .sec-head .ttl {
    font-size: 23px;
    letter-spacing: 0.92px;
  }
  .access .addr-block {
    position: absolute;
    left: 9.722%;
    top: 405px;
    width: 280px;
    display: flex;
    flex-direction: column;
    gap: 32px;
  }
  .access .map {
    position: absolute;
    left: 42.5%;
    top: 240px;
    width: 47.778%;
    height: 668px;
    overflow: hidden;
  }
  .access .routes {
    position: absolute;
    left: 9.722%;
    top: 628px;
    width: 31.389%;
  }
  .access .routes p {
    font-size: var(--base);
    line-height: 2;
    letter-spacing: var(--ls-base);
  }
  .cta-bar {
    margin-left: 9.722%;
    width: 81.944%;
    border-top: 1px solid var(--gray);
    border-bottom: 1px solid var(--gray);
    padding: 63px 0;
    display: flex;
    align-items: center;
    gap: 48px;
  }
  .cta-bar .half {
    flex: 1 0 0;
    min-width: 1px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .cta-bar .half .btn .lbl {
    display: none;
  }
  .cta-bar .pair {
    display: flex;
    align-items: center;
    gap: 40px;
  }
  .cta-bar .ttl {
    font-family: var(--font-en);
    font-weight: 400;
    font-size: 23px;
    letter-spacing: 0.92px;
    line-height: 1;
  }
  .cta-bar .body-txt {
    width: 355px;
  }
  .cta-bar .vdiv {
    width: 0;
    height: 88px;
    border-left: 1px solid var(--gray);
  }
  .site-footer {
    position: relative;
    margin-top: 178px;
    height: 462px;
  }
  .site-footer .f-logo {
    font-size: var(--h5);
  }
  .site-footer .f-col1 {
    position: absolute;
    left: 22px;
    top: 130px;
    width: 228px;
    display: flex;
    flex-direction: column;
    gap: 72px;
  }
  .site-footer .f-col2 {
    position: absolute;
    left: 34.306%;
    top: 130px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .site-footer .f-col2 a {
    font-family: var(--font-en);
    font-weight: 400;
    font-size: var(--base);
    letter-spacing: 0.56px;
    line-height: 1;
    display: block;
  }
  .site-footer .f-col2 .insta svg {
    width: 10px;
    height: 10px;
  }
  .site-footer .f-col3 {
    position: absolute;
    left: 49.306%;
    top: 130px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .site-footer .f-col3 a,
  .site-footer .f-col3 .g-ttl {
    font-family: var(--font-en);
    font-weight: 400;
    font-size: var(--base);
    letter-spacing: 0.56px;
    line-height: 1;
    display: block;
  }
  .site-footer .f-col3 .sub {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .site-footer .f-col3 .sub .d {
    width: 8px;
    border-top: 0.5px solid var(--main);
  }
  .site-footer .f-col4 {
    position: absolute;
    left: 67.083%;
    top: 130px;
    width: 31.389%;
    display: flex;
    flex-direction: column;
    gap: 30px;
  }
  .site-footer .f-col4 .hr {
    border-top: 0.5px solid var(--main);
  }
  .site-footer .f-col4 .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .site-footer .f-col4 .row .lbl {
    font-family: var(--font-en);
    font-weight: 300;
    font-size: 24px;
    letter-spacing: 0.96px;
    line-height: 1;
    width: 180px;
  }
}
@media (min-width: 768px) {
  .studio-page {
    min-height: 7906px;
  }
  .studio-page .page-header .ph-right {
    gap: 24px;
  }
  .studio-page .room-sec.first {
    margin-top: 200px;
  }
  .studio-page .carousel .car-main {
    height: 640px;
    aspect-ratio: auto;
  }
  .studio-page .drawing-band {
    position: absolute;
    top: 5545px;
    left: 0;
    width: 100%;
    height: 1225px;
    margin: 0;
  }
  .studio-page .drawing-band .drawing {
    top: 119px;
  }
  .studio-page .drawing-band .spec {
    left: 140px;
    right: auto;
    top: 888px;
    width: 1160px;
    height: 272px;
    display: grid;
    grid-template-columns: 532px 532px;
    grid-template-rows: repeat(4, 54px);
    column-gap: 96px;
    row-gap: 0;
  }
  .studio-page .drawing-band .spec .row {
    height: 54px;
    padding: 20px 0;
    border-top: 0 !important;
    border-bottom: 1px solid var(--gray) !important;
  }
  .studio-page .drawing-band .spec .row:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
    border-top: 1px solid var(--gray) !important;
  }
  .studio-page .drawing-band .spec .row:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
  }
  .studio-page .drawing-band .spec .row:nth-child(3) {
    grid-column: 1;
    grid-row: 3;
  }
  .studio-page .drawing-band .spec .row:nth-child(4) {
    grid-column: 1;
    grid-row: 4;
  }
  .studio-page .drawing-band .spec .row:nth-child(5) {
    grid-column: 2;
    grid-row: 1;
    border-top: 1px solid var(--gray) !important;
  }
  .studio-page .drawing-band .spec .row:nth-child(6) {
    grid-column: 2;
    grid-row: 2;
  }
  .studio-page .drawing-band .spec .row:nth-child(7) {
    grid-column: 2;
    grid-row: 3/span 2;
    height: 108px;
  }
  .studio-page .drawing-band .prop-btn {
    left: 1101px;
    top: 1136px;
    width: 199px;
    height: 44px;
    justify-content: center;
    border: 1px solid var(--main);
    border-radius: 50px;
  }
  .studio-page .cta-bar.wide {
    position: absolute;
    left: 140px;
    top: 7010px;
    width: 1160px;
    height: 216px;
    margin: 0;
    padding: 63px 0;
  }
  .studio-page > .site-footer {
    position: absolute;
    top: 7406px;
    left: 0;
    width: 100%;
    margin: 0;
  }
}
@media (min-width: 768px) {
  .hero-fade {
    position: absolute;
    inset: 0;
  }
  .top-page .hero {
    height: 800px;
    aspect-ratio: auto;
  }
  .top-page .hero > img {
    display: none;
  }
  .top-page {
    position: relative;
    min-height: 7709px;
  }
  .top-page .studio-row .col {
    gap: 48px;
  }
  .top-page .sea-wrap {
    position: absolute;
    top: 4825px;
    left: 0;
    width: 100%;
    height: 900px;
    margin: 0;
    aspect-ratio: auto;
  }
  .top-page .access {
    position: absolute;
    top: 5725px;
    left: 0;
    width: 100%;
    height: 1088px;
  }
  .top-page .access .map {
    top: 240px;
    height: 688px;
  }
  .top-page .access .map-open {
    display: none;
  }
  .top-page .access .addr-block {
    top: 405px;
    gap: 10px;
  }
  .top-page .access .addr-block > .btn {
    margin-top: 22px;
  }
  .top-page .access .routes {
    top: 624px;
  }
  .top-page .access .route-train {
    margin-top: 22px;
  }
  .top-page > .page-main > .cta-bar {
    position: absolute;
    top: 6973px;
    left: 140px;
    margin: 0;
    width: 1160px;
  }
  .top-page > .site-footer {
    position: absolute;
    top: 7209px;
    left: 0;
    width: 100%;
    margin: 0;
  }
  .lower-page,
  .studio-page {
    position: relative;
  }
  .lower-page .page-header,
  .studio-page .page-header {
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 10;
    height: 64px;
    padding: 27px 22px 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  .lower-page .page-header .logo,
  .studio-page .page-header .logo {
    font-family: var(--font-en);
    font-size: 20px;
    line-height: 1;
  }
  .lower-page .page-header .ph-right,
  .studio-page .page-header .ph-right {
    display: flex;
    align-items: center;
    gap: 24px;
  }
  .lower-page h1 {
    position: absolute;
    left: 140px;
    top: 240px;
    font-size: 72px;
  }
  .menu-overlay .menu-visual {
    width: 65.694%;
  }
  .menu-overlay .menu-panel {
    width: 34.306%;
  }
  .menu-overlay .menu-list {
    left: 48px;
    top: 142px;
    width: 398px;
  }
  .menu-overlay .menu-download {
    left: 48px;
    bottom: 59px;
  }
  .lower-page .cta-bar,
  .studio-page .cta-bar {
    position: absolute;
    left: 140px;
    margin: 0;
    width: 1160px;
    padding: 63px 0;
    height: 216px;
  }
  .site-footer {
    height: 500px;
  }
  .site-footer .f-col1 {
    left: 22px;
    top: 140px;
    gap: 72px;
  }
  .site-footer .f-col2 {
    left: 494px;
    top: 140px;
  }
  .site-footer .f-col3 {
    left: 710px;
    top: 140px;
    display: flex !important;
  }
  .site-footer .f-col4 {
    left: 966px;
    top: 140px;
    gap: 30px;
  }
  .site-footer .footer-download {
    margin-top: 10px;
  }
  .studio-page {
    min-height: 7906px;
  }
  .studio-page .studio-hero {
    padding-top: 371px;
  }
  .studio-page .room-sec.first {
    margin-top: 200px;
  }
  .studio-page .room-sec + .room-sec {
    margin-top: 180px;
  }
  .studio-page .room-sec .carousel {
    margin-top: 70px;
  }
  .studio-page .room-sec.desc-3l .carousel {
    margin-top: 64px;
  }
  .studio-page .carousel .car-main {
    height: 640px;
    aspect-ratio: auto;
  }
  .studio-page .drawing-band {
    position: absolute;
    top: 5545px;
    left: 0;
    width: 100%;
    height: 1225px;
    margin: 0;
  }
  .studio-page .drawing-band .drawing {
    top: 119px;
  }
  .studio-page .drawing-band .spec {
    left: 140px;
    right: auto;
    top: 888px;
    width: 1160px;
    height: 272px;
    display: grid;
    grid-template-columns: 532px 532px;
    grid-template-rows: repeat(4, 54px);
    column-gap: 96px;
    row-gap: 0;
  }
  .studio-page .drawing-band .spec .row {
    height: 54px;
    padding: 20px 0;
    border-top: 0 !important;
    border-bottom: 1px solid var(--gray) !important;
  }
  .studio-page .drawing-band .spec .row:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
    border-top: 1px solid var(--gray) !important;
  }
  .studio-page .drawing-band .spec .row:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
  }
  .studio-page .drawing-band .spec .row:nth-child(3) {
    grid-column: 1;
    grid-row: 3;
  }
  .studio-page .drawing-band .spec .row:nth-child(4) {
    grid-column: 1;
    grid-row: 4;
  }
  .studio-page .drawing-band .spec .row:nth-child(5) {
    grid-column: 2;
    grid-row: 1;
    border-top: 1px solid var(--gray) !important;
  }
  .studio-page .drawing-band .spec .row:nth-child(6) {
    grid-column: 2;
    grid-row: 2;
  }
  .studio-page .drawing-band .spec .row:nth-child(7) {
    grid-column: 2;
    grid-row: 3/span 2;
    height: 108px;
  }
  .studio-page .drawing-band .prop-btn {
    left: 1101px;
    top: 1136px;
    width: 199px;
    height: 44px;
    justify-content: center;
    border: 1px solid var(--main);
    border-radius: 50px;
  }
  .studio-page .cta-bar.wide {
    top: 7010px;
  }
  .studio-page > .site-footer {
    position: absolute;
    top: 7406px;
    left: 0;
    width: 100%;
    margin: 0;
  }
  .price-page {
    min-height: 5025px;
  }
  .price-page .price-lead {
    position: absolute;
    left: 494px;
    top: 492px;
    font-size: 14px;
    line-height: 1.8;
    letter-spacing: 0.7px;
  }
  .price-page .info-section {
    position: absolute;
    left: 140px;
    gap: 138px;
  }
  .price-page .info-section header {
    width: 216px;
  }
  .price-page .info-table {
    width: 806px;
    font-size: 14px;
  }
  .price-page .info-row h3 {
    width: 216px;
  }
  .price-page .info-row > div {
    flex: 1;
  }
  .price-page .living-price {
    top: 623px;
  }
  .price-page .time-price {
    top: 1222px;
  }
  .price-page .reserve-price {
    top: 1817px;
  }
  .price-page .around-price {
    top: 2851px;
  }
  .price-page .cta-bar {
    top: 4129px;
  }
  .price-page > .site-footer {
    position: absolute;
    top: 4525px;
    left: 0;
    width: 100%;
    margin: 0;
  }
  .access-page {
    min-height: 3832px;
  }
  .access-map-large {
    position: absolute;
    left: 140px;
    top: 492px;
    width: 1160px;
    height: 520px;
  }
  .access-map-large iframe {
    width: 100%;
    height: 100%;
    border: 0;
  }
  .access-map-large .map-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .access-map-large .map-shield {
    position: absolute;
    inset: 0;
  }
  .access-map-large .map-open {
    display: none;
  }
  .access-address {
    position: absolute;
    left: 140px;
    top: 1060px;
    width: 1160px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    font-size: 14px;
    line-height: 1.8;
  }
  .access-address .icon-line {
    margin-top: 8px;
  }
  .access-page .info-section {
    position: absolute;
    left: 140px;
    gap: 138px;
  }
  .access-page .info-section header {
    width: 216px;
  }
  .access-page .info-table {
    width: 806px;
    font-size: 14px;
  }
  .access-page .info-row h3 {
    width: 216px;
  }
  .access-page .info-row > div {
    flex: 1;
  }
  .access-page .root-access {
    top: 1346px;
  }
  .access-page .around-access {
    top: 2054px;
  }
  .access-page .route-copy p {
    margin-top: 24px;
  }
  .access-page > .site-footer {
    position: absolute;
    top: 3332px;
    left: 0;
    width: 100%;
    margin: 0;
  }
  .contact-page {
    min-height: 2320px;
  }
  .contact-intro {
    position: absolute;
    left: 140px;
    top: 492px;
    font-size: 14px;
    line-height: 1.8;
  }
  .reserve-info {
    display: flex;
    gap: 24px;
    margin-top: 16px;
  }
  .form-lead {
    position: absolute;
    left: 140px;
    top: 689px;
    font-size: 14px;
    line-height: 1.8;
  }
  .contact-form {
    position: absolute;
    left: 140px;
    top: 752px;
    width: 1160px;
    font-size: 14px;
  }
  .contact-form .form-row {
    margin-bottom: 40px;
  }
  .contact-form label {
    width: 354px;
    padding-top: 20px;
    flex: 0 0 auto;
  }
  .contact-form input,
  .contact-form textarea {
    padding: 24px;
    height: 64px;
  }
  .contact-form .form-row > input,
  .contact-form .fields {
    width: 806px;
  }
  .contact-form .company > input,
  .contact-form .phone-field > input {
    width: 452px;
  }
  .contact-form .fields.two {
    gap: 16px;
  }
  .contact-form .fields.two input {
    width: 395px;
  }
  .contact-form textarea {
    width: 806px;
    height: 240px;
  }
  .contact-form .message {
    margin-bottom: 64px;
  }
  .contact-form .submit {
    width: 256px;
    margin-left: 452px;
  }
  .contact-page > .site-footer {
    position: absolute;
    top: 1820px;
    left: 0;
    width: 100%;
    margin: 0;
  }
}
@media (min-width: 768px) {
  .studio-page .page-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 27px 22px 0;
  }
  .studio-page .page-header .logo {
    font-family: var(--font-en);
    font-weight: 400;
    font-size: 20px;
    line-height: 1;
    margin-top: 2px;
  }
  .studio-page .page-header .ph-right {
    display: flex;
    align-items: center;
    gap: 33px;
  }
  .studio-page .studio-hero {
    padding-top: 371px;
  }
  .studio-page .studio-hero h1 {
    margin-left: 9.722%;
    font-family: var(--font-en);
    font-weight: 300;
    font-size: 72px;
    line-height: 1;
  }
  .studio-page .studio-hero .strip {
    margin-left: 9.722%;
    margin-top: 27px;
    display: flex;
    gap: 8px;
    height: 565px;
  }
  .studio-page .studio-hero .strip .st-a,
  .studio-page .studio-hero .strip .st-b {
    overflow: hidden;
  }
  .studio-page .studio-hero .strip .st-a {
    width: 74.923%;
  }
  .studio-page .studio-hero .strip .st-b {
    width: 24.462%;
  }
  .studio-page .studio-hero .strip img {
    height: 100%;
    object-fit: cover;
    max-width: none;
  }
  .studio-page .studio-hero .strip .st-a img {
    width: 133.47%;
  }
  .studio-page .studio-hero .strip .st-b img {
    width: 408.805%;
    margin-left: -308.805%;
  }
  .studio-page .sub-nav {
    position: fixed;
    left: 22px;
    top: auto;
    bottom: 35px;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 56px;
  }
  .studio-page .sub-nav a {
    font-family: var(--font-en);
    font-weight: 400;
    font-size: var(--little);
    letter-spacing: var(--ls-lose);
    line-height: 1;
    display: block;
  }
  .studio-page.is-scrolled-deep .sub-nav {
    opacity: 0;
    pointer-events: none;
  }
  .studio-page .room-sec {
    margin-left: 26.111%;
    width: 72.361%;
  }
  .studio-page .room-sec.first {
    margin-top: 216px;
  }
  .studio-page .room-sec + .room-sec {
    margin-top: 180px;
  }
  .studio-page .room-sec .rs-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }
  .studio-page .room-sec .rs-head .rs-ttl {
    font-family: var(--font-en);
    font-weight: 400;
    font-size: 23px;
    letter-spacing: 0.92px;
    line-height: 1.2;
  }
  .studio-page .room-sec .rs-head .rs-desc {
    width: 57.006%;
    font-size: var(--base);
    line-height: 2;
    letter-spacing: var(--ls-base);
    text-align: justify;
  }
  .studio-page .room-sec .carousel {
    margin-top: 70px;
  }
  .studio-page .room-sec.desc-3l .carousel {
    margin-top: 64px;
  }
  .studio-page .room-sec .car-foot {
    margin-top: 16px;
    gap: 71px;
  }
  .studio-page .room-sec .thumbs {
    width: 77.351%;
  }
  .studio-page .room-sec .thumbs .thumb {
    width: 142px;
    height: 95px;
  }
  .studio-page .room-sec .thumbs .thumb img {
    width: 142px;
    height: 95px;
  }
  .studio-page .room-sec .car-ctrl {
    display: flex;
    align-items: flex-start;
    gap: 50px;
    padding-top: 6px;
  }
  .studio-page .room-sec .car-ctrl .car-arrows {
    margin-top: -6px;
  }
  .studio-page .drawing-band {
    position: relative;
    margin-top: 177px;
    height: 1287px;
    background: var(--band);
  }
  .studio-page .drawing-band .drawing {
    position: absolute;
    left: 9.722%;
    top: 144px;
    width: 80.556%;
    height: 689px;
    object-fit: cover;
  }
  .studio-page .drawing-band .spec {
    position: absolute;
    right: 9.722%;
    top: 890px;
    width: 417px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .studio-page .drawing-band .spec .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
    height: 54px;
    line-height: 1;
  }
  .studio-page .drawing-band .spec .row dt {
    font-weight: var(--w-l);
    width: 84px;
  }
  .studio-page .drawing-band .spec .row dd {
    font-weight: var(--w-l);
    margin: 0;
  }
  .studio-page .drawing-band .spec .row.lined {
    border-top: 1px solid var(--gray);
    border-bottom: 1px solid var(--gray);
  }
  .studio-page .drawing-band .spec .row.tall {
    height: 90px;
  }
  .studio-page .drawing-band .spec .row.wrap {
    align-items: center;
    line-height: 1.8;
  }
  .studio-page .drawing-band .spec .row.wrap dt {
    width: 70px;
  }
  .studio-page .drawing-band .spec .row.wrap dd {
    flex: 1;
    text-align: justify;
  }
  .studio-page .drawing-band .prop-btn {
    position: absolute;
    left: 9.722%;
    top: 907px;
  }
  .studio-page .cta-bar.wide {
    margin-left: 1.528%;
    width: 96.944%;
    margin-top: 109px;
  }
  .studio-page .site-footer {
    margin-top: 178px;
  }
}
@media (min-width: 768px) {
  .studio-page {
    min-height: 7906px;
  }
  .studio-page .page-header .ph-right {
    gap: 24px;
  }
  .studio-page .room-sec.first {
    margin-top: 200px;
  }
  .studio-page .carousel .car-main {
    height: 640px;
    aspect-ratio: auto;
  }
  .studio-page .drawing-band {
    position: absolute;
    top: 5545px;
    left: 0;
    width: 100%;
    height: 1225px;
    margin: 0;
  }
  .studio-page .drawing-band .drawing {
    top: 119px;
  }
  .studio-page .drawing-band .spec {
    left: 140px;
    right: auto;
    top: 888px;
    width: 1160px;
    height: 272px;
    display: grid;
    grid-template-columns: 532px 532px;
    grid-template-rows: repeat(4, 54px);
    column-gap: 96px;
    row-gap: 0;
  }
  .studio-page .drawing-band .spec .row {
    height: 54px;
    padding: 20px 0;
    border-top: 0 !important;
    border-bottom: 1px solid var(--gray) !important;
  }
  .studio-page .drawing-band .spec .row:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
    border-top: 1px solid var(--gray) !important;
  }
  .studio-page .drawing-band .spec .row:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
  }
  .studio-page .drawing-band .spec .row:nth-child(3) {
    grid-column: 1;
    grid-row: 3;
  }
  .studio-page .drawing-band .spec .row:nth-child(4) {
    grid-column: 1;
    grid-row: 4;
  }
  .studio-page .drawing-band .spec .row:nth-child(5) {
    grid-column: 2;
    grid-row: 1;
    border-top: 1px solid var(--gray) !important;
  }
  .studio-page .drawing-band .spec .row:nth-child(6) {
    grid-column: 2;
    grid-row: 2;
  }
  .studio-page .drawing-band .spec .row:nth-child(7) {
    grid-column: 2;
    grid-row: 3/span 2;
    height: 108px;
  }
  .studio-page .drawing-band .prop-btn {
    left: 1101px;
    top: 1136px;
    width: 199px;
    height: 44px;
    justify-content: center;
    border: 1px solid var(--main);
    border-radius: 50px;
  }
  .studio-page .cta-bar.wide {
    position: absolute;
    left: 140px;
    top: 7010px;
    width: 1160px;
    height: 216px;
    margin: 0;
    padding: 63px 0;
  }
  .studio-page > .site-footer {
    position: absolute;
    top: 7406px;
    left: 0;
    width: 100%;
    margin: 0;
  }
}
@media (min-width: 768px) {
  .site-header .side-nav {
    gap: 30px;
  }
  .side-nav ul {
    width: 102px;
  }
  .side-nav li, .side-nav a {
    width: 100%;
  }
  .side-nav .insta {
    align-self: flex-end;
    width: 10px;
  }
  .lower-page .page-header .logo, .studio-page .page-header .logo {
    margin-top: 5px;
  }
  .menu-overlay .menu-list {
    top: 166px;
  }
  .site-footer .f-col1 {
    gap: 72px;
  }
  .site-footer .f-info {
    white-space: nowrap;
  }
}
@media (min-width: 768px) {
  .top-page {
    min-height: 7869px;
  }
  .top-page .studio-row .ph {
    height: 460px;
  }
  .top-page .studio-row .col {
    height: auto;
  }
  .top-page .sea-wrap {
    top: 4985px;
  }
  .top-page .access {
    top: 5885px;
  }
  .top-page .access .routes {
    top: 624px;
    width: 452px;
  }
  .top-page .access .routes p {
    margin: 0;
    line-height: 28px;
  }
  .top-page .access .routes p + p {
    margin-top: 24px;
  }
  .top-page .cta-bar {
    top: 6973px;
  }
  .top-page > .site-footer {
    top: 7369px;
  }
  .studio-page {
    min-height: 8251px;
  }
  .studio-page .room-sec {
    position: absolute;
    left: 376px;
    width: 1042px;
    margin: 0 !important;
  }
  .studio-page #living {
    top: 1235px;
  }
  .studio-page #garden {
    top: 2373px;
  }
  .studio-page #rooftop {
    top: 3539px;
  }
  .studio-page #location {
    top: 4677px;
  }
  .studio-page .room-sec .rs-head {
    display: flex;
    justify-content: space-between;
    gap: 0;
  }
  .studio-page .room-sec .rs-head .rs-ttl {
    flex: none;
    width: 352px;
    font-size: 23px;
    line-height: 28px;
  }
  .studio-page .room-sec .rs-head .rs-desc {
    flex: none;
    width: 594px;
    margin: 0;
    font-size: 14px;
    line-height: 28px;
  }
  .studio-page .room-sec .carousel, .studio-page .room-sec.desc-3l .carousel {
    margin-top: 70px;
  }
  .studio-page .carousel .car-main {
    height: 693px;
  }
  .studio-page .carousel .car-main img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .studio-page .drawing-band {
    top: 5875px;
    height: 1240px;
  }
  .studio-page .drawing-band .drawing-viewer {
    position: absolute;
    left: 140px;
    top: 107px;
    width: 1160px;
    height: 730px;
  }
  .studio-page .drawing-band .drawing-stage {
    height: 689px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .studio-page .drawing-band .drawing {
    position: static;
    width: 1079px;
    height: 641px;
    max-width: 100%;
    object-fit: contain;
    transform: none;
  }
  .studio-page .drawing-band .spec {
    top: 917px;
    height: 216px;
  }
  .studio-page .drawing-band .spec .row:nth-child(5) {
    grid-column: 2;
    grid-row: 1;
  }
  .studio-page .drawing-band .spec .row:nth-child(6) {
    grid-column: 2;
    grid-row: 2/span 3;
    height: 162px;
    padding-top: 36px;
  }
  .studio-page .cta-bar.wide {
    top: 7355px;
  }
  .studio-page > .site-footer {
    top: 7751px;
  }
  .lower-page .info-section {
    display: flex;
    gap: 138px;
    width: 1160px;
  }
  .lower-page .info-section header {
    flex: none;
    width: 216px;
  }
  .lower-page .info-table {
    flex: none;
    width: 806px;
    font-size: 14px;
  }
  .lower-page .info-row {
    box-sizing: border-box;
    display: flex;
    gap: 20px;
    padding: 19px 0 40px;
    line-height: 25px;
  }
  .lower-page .info-row h3 {
    flex: none;
    width: 216px;
  }
  .lower-page .info-row > div {
    flex: 1;
    min-width: 0;
  }
  .lower-page .info-row p {
    line-height: 25px;
  }
  .lower-page .info-row p + p {
    margin-top: 16px;
  }
  .lower-page .info-row small {
    display: block;
    font-size: 10px;
    line-height: 18px;
    margin-top: 12px;
  }
  .lower-page .info-section header h2 {
    font-size: 23px;
    line-height: 23px;
  }
  .lower-page .info-section header > p {
    margin-top: 20px;
    font-size: 14px;
    line-height: 14px;
  }
  .lower-page .around-price article, .lower-page .around-access article {
    margin-top: 24px;
  }
  .lower-page .around-price article p, .lower-page .around-access article p {
    margin: 0;
  }
  .lower-page article a {
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    line-height: 23px;
  }
  .lower-page .info-row:nth-child(2) article:first-child {
    margin-top: 0;
  }
  .price-page {
    min-height: 4911px;
  }
  .price-page .price-lead {
    width: 806px;
    line-height: 25px;
  }
  .price-page .price-lead a {
    text-decoration: underline;
  }
  .price-page .living-price .info-row:nth-child(-n+2) {
    height: 85px;
  }
  .price-page .living-price .info-row:nth-child(4) {
    height: 135px;
  }
  .price-page .time-price .info-row {
    height: 194px;
  }
  .price-page .reserve-price {
    top: 1596px;
  }
  .price-page .reserve-price .info-row:nth-child(1) {
    height: 135px;
  }
  .price-page .reserve-price .info-row:nth-child(2) {
    height: 292px;
  }
  .price-page .reserve-price .info-row:nth-child(3) {
    height: 267px;
  }
  .price-page .reserve-price .info-row:nth-child(4) {
    height: 181px;
  }
  .price-page .around-price {
    top: 2605px;
  }
  .around-price .info-row:nth-child(1) {
    height: 481px;
  }
  .around-access .info-row:nth-child(1) {
    height: 349px;
  }
  .around-price .info-row:nth-child(2), .around-access .info-row:nth-child(2) {
    height: 639px;
  }
  .around-price .info-row:nth-child(3), .around-access .info-row:nth-child(3) {
    height: 110px;
  }
  .price-page .cta-bar {
    top: 4015px;
  }
  .price-page > .site-footer {
    top: 4411px;
  }
  .contact-page {
    min-height: 2218px;
  }
  .contact-page .contact-reserve {
    position: absolute;
    left: 140px;
    top: 753px;
  }
  .contact-page .contact-reserve .info-row:nth-child(1) {
    height: 135px;
  }
  .contact-page .contact-reserve .info-row:nth-child(2) {
    height: 383px;
  }
  .contact-page .contact-reserve .info-row:nth-child(3) {
    height: 267px;
  }
  .contact-page > .site-footer {
    top: 1718px;
  }
  .access-page {
    min-height: 3642px;
  }
  .access-page .access-address {
    align-items: flex-start;
  }
  .access-page .root-access .info-row {
    height: 110px;
  }
  .access-page .root-access .info-row.car-route {
    height: 228px;
  }
  .access-page .root-access .car-route p {
    line-height: 28px;
  }
  .access-page .around-access {
    top: 1864px;
  }
  .access-page > .site-footer {
    top: 3142px;
  }
  .terms-page {
    min-height: 2398px;
  }
  .terms-body {
    position: absolute;
    left: 494px;
    top: 492px;
    width: 720px;
    font-size: 14px;
    line-height: 25px;
  }
  .terms-intro {
    letter-spacing: 0.7px;
  }
  .terms-rules {
    margin-top: 80px;
    line-height: 25px;
  }
  .terms-page .cta-bar {
    top: 1502px;
  }
  .terms-page > .site-footer {
    position: absolute;
    left: 0;
    top: 1898px;
    width: 100%;
  }
}
@media (min-width: 768px) {
  .terms-page > .site-footer {
    margin: 0;
  }
  .price-page .reserve-price .info-row:last-child {
    height: 201px;
  }
  .studio-page #location .rs-ttl {
    line-height: 23px;
  }
  .studio-page .drawing-band .spec .row:nth-child(6) {
    position: absolute;
    grid-area: auto;
    left: 628px;
    top: 90px;
    width: 532px;
    height: 90px;
    padding: 20px 0;
    align-items: center;
  }
  .studio-page .drawing-band .spec .row:nth-child(6) dt {
    width: 70px;
    font-size: 14px;
    line-height: 25px;
  }
  .studio-page .drawing-band .spec .row:nth-child(6) dd {
    width: 452px;
    font-size: 14px;
    line-height: 25px;
  }
}
@media (min-width: 768px) and (max-width: 1439px) {
  body {
    width: 1440px;
    max-width: none;
    zoom: var(--layout-scale, 1);
  }
}